Dynamic Mega Drop Down Menu By Askwithloud
How do I make an dynamic mega drop down menu by askwithloud?
The actual advantage of having a mega menu bar is that it keeps the things together in one place, so your visitors won't have to spend much time in searching for a specific category of their interest.. What is a dynamic mega drop down menu by askwithloud? How do you make a dynamic mega drop down menu by askwithloud? This script and codes were developed by Prince on 15 December 2022, Thursday.
Dynamic Mega Drop Down Menu By Askwithloud - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dynamic Mega Drop Down Menu 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 prefetch' href='https://googledrive.com/host/0BxB51PrIeBaiRUhWMGRFSkVPNzA'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
<ul class='megamenu' id='megamenuid'> <li><a href='/'>HOME</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 install a dynamic mega drop down menu bar into your blogger blog - In my previous article I already shared with you a responsive mega drop down menu for your blog( You can find that article here - Ajax mega drop down menu for blogger), But today I'm going to share with you a new and dynamic mega menu bar for your dynamic blog. You know guys the actual advantage of having a mega menu bar is that it keeps the things together in one place, so your visitors won't have to spend much time in searching for a specific category of their interest. So today I'm going to show you how you can easily set up this dynamic mega menu bar into your blogger blog without any problems.</p> <br> <center><a href="http://www.askwithloud.com/2015/09/dynamic-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://googledrive.com/host/0BxB51PrIeBaidk1vbDU4aXdLaXc'></script> <script src="js/index.js"></script>
</body>
</html>
Dynamic Mega Drop Down Menu 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;
}
.megamenu *{margin:0;padding:0;font-family:'PT Sans Narrow'}ul.megamenu{list-style:none;line-height:1;overflow:visible !important}ul.megamenu:after{margin:0;padding:0;content:' ';display:block;height:0px;clear:both}ul.megamenu li{float:left;display:inline;position:relative;text-transform:uppercase}ul.megamenu li a.menu-target:after{content:"";width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #fff;font-size:0;line-height:0;bottom:22px;right:5px;position:absolute}ul.megamenu li a{display:block;line-height:50px;padding:0px 20px;text-decoration:none;border-left:1px solid #000;box-shadow:1px 0 0 0 rgba(255, 255, 255, 0.1) inset;color:#d9d9d9;font-size:14px;transition:all 0.3s ease-in-out}ul.megamenu li a:hover{background:#111111;color:#fff}ul.megamenu ul{position:absolute;display:none;top:100%}ul.megamenu li:hover > ul{display:block}ul.megamenu ul li{z-index:72;min-width:149px;float:none;background:#000;text-shadow:none}ul.megamenu ul li a{text-transform:none;font-weight:normal}ul.megamenu ul li a:hover,ul.megamenuid ul li a.hover{background:#E0E0E0;color:#444}ul.megamenu ul ul{display:none;left:100%;top:0}ul.megamenuid li div.megasubmenu{background:#F9F9F9;position:absolute;width:830px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;-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:#888;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all 0.3s ease-in-out}ul.megamenuid li:hover div.megasubmenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.megamenuid ul,ul.megamenuid ul li{display:block !important;border:0 none !important;margin:0 !important;padding:0 !important}ul.megamenuid ul li{background:none !important;float:left !important}ul.megamenuid ul.leftmenulist{position:absolute;width:18%;left:0;top:0;bottom:0;background:#EEEEEE;border-right:1px dashed #e5e5e5 !important}ul.megamenuid ul.leftmenulist a{border-left:none !important;color:#555}ul.megamenuid ul.rightmenulist{position:relative;display:block;width:81%;float:right;margin:0px 0px 0px !important;background:none}ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;min-height:210px;padding:5px 17px 5px 0px !important}ul.megamenuid ul.rightmenulist li .thumb-container{left:0;width:100%;height:100%;position:absolute;overflow:hidden;font-size:0;line-height:0}ul.megamenuid ul.rightmenulist li .thumb-container img{position:relative;top:10px;padding:0;width:100%;height:100%;display:block}ul.megamenuid ul.rightmenulist li a{display:block;border-left:none !important;padding:0px 5px !important;line-height:1.4;color:#777;font-weight:bold;font-size:14px}ul.megamenuid ul.rightmenulist li a:hover{color:#000;background:transparent}ul.megamenuid .loading-icon{background:url('https://2.bp.blogspot.com/-N9HNU11nhiA/Va-NLcGF0lI/AAAAAAAALW4/HzSlCK7PGeY/s1600/wait.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.megamenuid .menu-icon{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #777;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#megamenuid{background:rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #3d3d3d, #212121) repeat scroll 0 0;background:-webkit-linear-gradient(top,#3d3d3d,#212121);background-color:#3d3d3d;box-shadow:1px 1px 0 0 rgba(255, 255, 255, 0.1) inset;height:50px;width:100%;position:relative;max-width:1000px;margin:0 auto;padding:0px}#megamenuid h5{font-size:16px;margin-top:70px;text-align:center}#megamenuid h5:before{content:"";position:absolute;top:50px;left:50%;width:5px;height:2px;margin-left:-4px;border-left:2px solid black;border-right:2px solid black}#megamenuid h5:after{content:"";position:absolute;top:55px;left:50%;width:10px;height:5px;margin-left:-7px;border-top:2px solid black;border-left:2px solid black;border-right:2px solid black;border-radius:8px 8px 0px 0px}li.search-box{float:right !important;line-height:35px;margin:7px 10px 0 0}li.search-box .search-field{border:none;padding:3px;background:#3F3F3F;color:#fff;width:135px;font-size:13px}li.search-box .search-field:focus{border:none;outline:none;background:#4C4C4C;color:#fff}li.search-box .search-button{background:url('https://4.bp.blogspot.com/-VJqk_zzkAuw/VazlDH_goDI/AAAAAAAALVM/t-AjU3ix55k/s1600/search.png') no-repeat;border:none;cursor:pointer;padding:5px 10px;transition:all 0.3s ease-in-out}li.search-box .search-button:hover{opacity:0.9}.search-alert{background:#E84C3D url(https://3.bp.blogspot.com/-TQMok5egm8c/Va44AXnjg3I/AAAAAAAALV8/eq_8ICAlH2I/s1600/search-info.png) no-repeat;background-position:5px;text-transform:capitalize;color:#fff;margin:-5px;padding:0px 15px 0px 40px;display:none;border-radius:5px;
text-transform:lowercase;
}
Dynamic Mega Drop Down Menu By Askwithloud - Script Codes JS Codes
jQuery(document).ready(function($) { $('#megamenuid').megaBloggerMenu({ postsNumber:4,noThumbnail:'https://2.bp.blogspot.com/-Z7jG9iO9OTg/Vazz6YJnFQI/AAAAAAAALVs/wlSvXPgdDAo/s1600/no_image_available.png'})});
$(function(){$('.search-here').submit(function(e){if($('.search-box.search-field').val().length==0){$('.search-box.search-alert').fadeIn().css('display','inline-block');e.preventDefault()}})});
Developer | Prince |
Username | Askwithloud |
Uploaded | December 15, 2022 |
Rating | 3 |
Size | 4,741 Kb |
Views | 8,096 |
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 |
Css3 slide | Nakome | 3,190 Kb |
Project MMetro beta | Atomicsong | 5,157 Kb |
Bootstrap 3 Price Table | Honglio | 2,655 Kb |
A Pen by Jay | Jaycode | 3,784 Kb |
Portfolio Page | HuffmanJ25 | 5,240 Kb |
Experiment - SCSS SVG Background Image with Variables | See8ch | 3,270 Kb |
Flexbox Test | Icutpeople | 2,486 Kb |
A Pen by Matt Popovich | Mpopv | 3,349 Kb |
Gradient-ui-button-mark-fx | Tabspace | 1,881 Kb |
WRENCH - STAFF | Lolita-adams | 1,608 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!