Add Mega Drop Down Menu In Blogger By Askwithloud
How do I make an add mega drop down menu in blogger by askwithloud?
I'm here with a new ajax mega menu bar and today I'm going to show you how you can easily set up this mega navigation menu bar into your blogger blog without any problems.. What is a add mega drop down menu in blogger by askwithloud? How do you make a add mega drop down menu in blogger by askwithloud? This script and codes were developed by Prince on 14 December 2022, Wednesday.
Add Mega Drop Down Menu In Blogger By Askwithloud - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Add Mega Drop Down Menu In Blogger By Askwithloud</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
<ul id="adajaxmenu" class="admenus"> <li><a href='/'><i class='fa fa-home fa-lg'></i></a></li>
<li>
<a href="#">Rooting</a>
<ul>
<li><a href="http://www.smartphoneroot.in/search/label/Sony">SONY</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/Samsung">SAMSUNG</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/Acer">ACER</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/HTC">HTC</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/Gionee">GIONEE</a></li>
</ul>
</li>
<li>
<a href="#">ANDROID</a>
<ul>
<li><a href="http://www.smartphoneroot.in/search/label/Micromax">MICROMAX</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/Karbonn">KARBONN</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/Huawei">HUAWEI</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/LG">LG</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/HP">HP</a></li>
</ul>
</li>
<li>
<a href="#">NEW TUTORIALS</a>
<ul>
<li><a href="http://www.smartphoneroot.in/search/label/Lenovo">LENOVO</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/Google">GOOGLE</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/Motorola">MOTOROLA</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/Xolo">XOLO</a></li>
<li><a href="http://www.smartphoneroot.in/search/label/Prestigio">PRESTIGIO</a></li>
</ul>
</li>
<li>
<li><a href="http://www.askwithloud.com/p/sitemap.html">Sitemap</a></li>
<li><a href="http://www.askwithloud.com/p/contact.html">Contact</a></li>
<li class='search-form'>
<form action='/search' class='searchblog' method='get'>
<input class='searchbar' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='searchsubmit' type='submit' value='Search'/>
</form> <p class='search-alert'>Search form is empty!
</li>
</ul>
<div class='clear'/>
</ul>
<div class='clear'/> <div class='post-body'> <h2 class='post-title'>Simple Ajax Menu By Askwithloud</h2> <p>How to add a dynamic drop down mega menu navigation bar into your blogger blog - As you already know that, the navigation menu (Drop down menu) is coming with every blogger templates. However, some premium templates are coming with a dynamic mega menu navigation bar. And the best part of this navigation bar is that it's looking more attractive, comparing to the other menu bar. So don't worry friend, I'm here with a new ajax mega menu bar and today I'm going to show you how you can easily set up this mega navigation menu bar into your blogger blog without any problems.</p> <br> <center><a href="http://www.askwithloud.com/2015/08/ajax-mega-drop-down-menu-for-blogger.html"> <b>Go To The Main Article Page :) </b> </a></center>
</div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/javmenu.js'></script> <script src="js/index.js"></script>
</body>
</html>
Add Mega Drop Down Menu In Blogger By Askwithloud - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Oswald);
body {
background-color:#f9f9f9;
font-size:16px
color:#444;
}
.post-body h2{
color:#f54325;
font-family:'Oswald';
font-weight:400;
text-align:center;
}
.post-body {
max-width:680px;
margin:20px auto;
border:10px solid #f0f0f0;
padding:15px 20px;
background-color:#fff;
color:#444;
font-family:'Arial';
font-size:13px;
}
.admenus * {
margin:0;
padding:0;
}
ul.admenus {
list-style:none;
line-height:1;
overflow:visible!important;
}
ul.admenus:after {
margin:0;
padding:0;
content:' ';
display:block;
height:0px;
clear:both;
}
ul.admenus li {
float:left;
display:inline;
position:relative;
font-size:14px;
font-weight:400;
text-transform:uppercase;
}
ul.admenus li a {
display:block;
line-height:50px;
padding:0 20px;
text-decoration:none;
color:#2c2c2c;
font-family:'Oswald';
font-size:13px;
font-weight:400;
transition:all 0.3s ease-in-out;
}
ul.admenus li a:hover,ul.admenus li a.hoverover {
background:#f54325;
color:#fff;
}
ul.admenus ul {
position:absolute;
display:none;
top:100%;
border:1px solid #ccc;
}
ul.admenus li:hover > ul {
display:block;
}
ul.admenus ul li {
z-index:72;
float:none;
min-width:160px;
background:#f5f5f5;
text-shadow:none;
}
ul.admenus ul li a {
text-transform:none;
font-weight:normal;
color:#aaa;
font-family:'Arial';
}
ul.admenus ul li a:hover,ul.adajaxmenu ul li a.hover {
background:#f54325;
}
ul.admenus ul ul {
display:none;
left:100%;
top:0;
}
ul.adajaxmenu li div.submenu {
position:absolute;
width:600px;
z-index:90;
left:0;
top:100%;
overflow:hidden;
min-height:150px;
background:#f0f0f0;
-moz-transform:translate(0,30px);
-webkit-transform:translate(0,30px);
-o-transform:translate(0,30px);
transform:translate(0,30px);
transform-origin:50% 0;
visibility:hidden;
opacity:0;
color:#929292;
box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);
transition:all 0.3s ease-in-out;
}
ul.adajaxmenu li:hover div.submenu {
visibility:visible;
opacity:1;
-moz-transform:translate(0,0);
-webkit-transform:translate(0,0);
-o-transform:translate(0,0);
transform:translate(0,0);
}
ul.adajaxmenu ul ,ul.adajaxmenu ul li {
display:block!important;
border:0 none!important;
margin:0!important;
padding:0!important;
}
ul.adajaxmenu ul li {
background:none!important;
float:none!important;
}
ul.adajaxmenu ul.verticlemenu {
position:absolute;
width:33%;
left:0;
top:0;
bottom:0;
background:#202020;
}
ul.adajaxmenu ul.postslist {
position:relative;
display:block;
width:65%;
float:right;
margin:0 0 15px 0!important;
background:none;
}
ul.adajaxmenu ul.postslist li {
display:block;
overflow:hidden;
position:relative;
min-height:60px;
padding:15px 8px 15px 110px!important
}
ul.adajaxmenu ul.postslist li .imgCont {
position:absolute;
left:0;
top:15px;
width:100px;
height:70px;
overflow:hidden;
font-size:0;
line-height:0;
border:1px solid #929292;
}
ul.adajaxmenu ul.postslist li .imgCont img {
position:relative;
top:-20px;
padding:0;
width:100px;
height:100px;
display:block;
}
ul.adajaxmenu ul.postslist li a {
display:block;
line-height:1.4;
padding:0!important;
color:#666;
font-family:'Arial';
font-size:12px;
transition:all 0.3s ease-in-out;
}
ul.adajaxmenu ul.postslist li a:hover {
color:#f54325;
background:transparent;
}
ul.adajaxmenu .loader {
background: url('https://4.bp.blogspot.com/-sRHd2OR7omQ/VFBOax0jdNI/AAAAAAAABgg/ei6bgO1agM0/s1600/adloading.gif') no-repeat scroll 0 0 transparent;
width:22px;
height:22px;
position:absolute;
top:50%;
margin-top:-11px;
right:5px;
}
ul.adajaxmenu .menuArrow {
border-bottom:4px solid transparent;
border-top:4px solid transparent;
border-left:4px solid #fff;
display:block;
height:0;
margin-top:-4px;
position:absolute;
right:11px;
top:50%;
width:0;
}
#adajaxmenu {
background:#fff;
height:50px;
width:100%;
position:relative;
border:1px solid #e6e6e6;
max-width:980px;
margin:0 auto;
padding:0 20px;
}
li.search-form{
float:right!important;
line-height:50px;
margin:0 20px 0 0;
}
li.search-form .searchbar{
border:none;
padding:10px 5px;
background:#f9f9f9;
color:#fff;
width:130px;
}
li.search-form .searchbar:focus{
border:none;
outline:none;
background:#fafafa;
color:#666;
}
li.search-form .searchsubmit{
background:#f54325;
border:none;
color:#fff;
cursor:pointer;
padding:10px 5px;
transition:all 0.3s ease-in-out;
}
li.search-form .searchsubmit:hover{
opacity:0.9;
}
.search-alert{
color:#f9f9f9;
padding:2px 15px 2px 40px;
display:none;
margin:5px;
background:#333 url(https://4.bp.blogspot.com/-Pzf65SZdXYo/VFHy3_xVhmI/AAAAAAAABg4/W2QdE2000f4/s1600/Indicate.png) no-repeat;
background-position:10px;
border-radius:5px;
text-transform:lowercase;
}
Add Mega Drop Down Menu In Blogger By Askwithloud - Script Codes JS Codes
jQuery(document).ready(function($) { $('#adajaxmenu').ajaxBloggerMenu({ numPosts : 4, // Number of Posts to show defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image });
});
$(function(){ $('.searchblog').submit(function(e){ if($('.search-form .searchbar').val().length==0){ $('.search-form .search-alert').fadeIn().css('display','inline-block'); e.preventDefault(); } });
});
Developer | Prince |
Username | Askwithloud |
Uploaded | December 14, 2022 |
Rating | 3.5 |
Size | 4,356 Kb |
Views | 16,192 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
Slides-07-1 POSITION | Exhtml | 1,909 Kb |
Gulpfile | Aimhigherwebdesign-amy | 1,765 Kb |
Spinners using Font Icons | Keyamoon | 3,007 Kb |
Wikipedia Viewer | Odylic | 2,333 Kb |
Exploding Text | Jjmartucci | 4,749 Kb |
Spin | Elalemanyo | 8,262 Kb |
Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
Project_one | MOHIM | 9,592 Kb |
IbrahimJabbari-Effect21 | Ibrahimjabbari | 1,882 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!