How To Make A Responsive Mega Menu With Html CSS
Menu that displays a large dropdown menu and usually a lot of links that you can add to it. CSS Mega Menu feature is usually used on large sites that have a lot of content and type of pages so that it requires a lot of navigation, such as government sites or news sites.On this occasion Saikot house will give a tutorial How to Install Responsive Mega Menus on Blogger. Please follow the steps below.
How to Install Responsive Mega Menus on Blogger
Here I will give you several mega menu choices that are already equipped with search features, then just adjust to your needs.It should be noted, the code that I will share requires the Fontwesome icon. So add Fontwesome in the template if it doesn't already exist.
Open the page Blogger > Click the menu Topic and click the button Edit HTML > Add the code below before </body>
<div class='megamenu-container'>
<div class='megamenu'>
<ul>
<li><a href='/'>Home</a></li>
<li>
<a href='#'>About</a>
<ul>
<li>
<a href='#'>School</a>
<ul>
<li><a href='#'>Leadership</a></li>
<li><a href='#'>History</a></li>
<li><a href='#'>Locations</a></li>
<li><a href='#'>Careers</a></li>
</ul>
</li>
<li>
<a href='#'>Study</a>
<ul>
<li><a href='#'>Undergraduate</a></li>
<li><a href='#'>Masters</a></li>
<li><a href='#'>International</a></li>
<li><a href='#'>Online</a></li>
</ul>
</li>
<li>
<a href='#'>Research</a>
<ul>
<li><a href='#'>Undergraduate research</a></li>
<li><a href='#'>Masters research</a></li>
<li><a href='#'>Funding</a></li>
</ul>
</li>
<li>
<a href='#'>Something</a>
<ul>
<li><a href='#'>Sub something</a></li>
<li><a href='#'>Sub something</a></li>
<li><a href='#'>Sub something</a></li>
<li><a href='#'>Sub something</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>News</a>
<ul>
<li><a href='#'>Today</a></li>
<li><a href='#'>Calendar</a></li>
<li><a href='#'>Sport</a></li>
</ul>
</li>
<li>
<a href='#'>Contact</a>
<ul>
<li>
<a href='#'>School</a>
<ul>
<li><a href='#'>Lidership</a></li>
<li><a href='#'>History</a></li>
<li><a href='#'>Locations</a></li>
<li><a href='#'>Careers</a></li>
</ul>
</li>
<li>
<a href='#'>Study</a>
<ul>
<li><a href='#'>Undergraduate</a></li>
<li><a href='#'>Masters</a></li>
<li><a href='#'>International</a></li>
<li><a href='#'>Online</a></li>
</ul>
</li>
<li>
<a href='#'>Study</a>
<ul>
<li><a href='#'>Undergraduate</a></li>
<li><a href='#'>Masters</a></li>
<li><a href='#'>International</a></li>
<li><a href='#'>Online</a></li>
</ul>
</li>
<li>
<a href='#'>Another sub</a>
<ul>
<li><a href='#'>Undergraduate</a></li>
<li><a href='#'>Masters</a></li>
<li><a href='#'>International</a></li>
<li><a href='#'>Online</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<span class='containersearch'>
<form action='/search' id='search-form' method='get'>
<input class='inputnui' name='q' placeholder='Search here...' type='search' value=''/>
<i aria-hidden='true' class='fa fa-search'/>
</form>
</span>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
// JS Megamenu by naminakiky.com
$(document).ready(function(){"use strict";$(".megamenu > ul > li:has( > ul)").addClass("megamenu-dropdown-icon"),$(".megamenu > ul > li > ul:not(:has(ul))").addClass("normal-sub"),$(".megamenu > ul").before('<a href="#" class="megamenu-mobile"></a>'),$(".megamenu > ul > li").hover(function(e){$(window).width()>943&&($(this).children("ul").stop(!0,!1).fadeToggle(150),e.preventDefault())}),$(".megamenu > ul > li").click(function(){$(window).width()<=943&&$(this).children("ul").fadeToggle(150)}),$(".megamenu-mobile").click(function(e){$(".megamenu > ul").toggleClass("show-on-mobile"),e.preventDefault()})});
$(document).ready(function(){$(".fa-search").click(function(){$(".containersearch, .inputnui").toggleClass("active"),$("input[type='text']").focus()})});
//]]>
</script>Choose jQuery if using version 2 or version 3
<script type='text/javascript'>
//<![CDATA[
// JS Megamenu by naminakiky.com
$(document).ready(function(){"use strict";$(".megamenu > ul > li:has( > ul)").addClass("megamenu-dropdown-icon"),$(".megamenu > ul > li > ul:not(:has(ul))").addClass("normal-sub"),$(".megamenu > ul").before('<a href="#" class="megamenu-mobile"></a>'),$(".megamenu > ul > li").hover(function(e){$(window).width()>943&&($(this).children("ul").stop(!0,!1).fadeToggle(150),e.preventDefault())}),$(".megamenu > ul > li").click(function(){$(window).width()<=943&&$(this).children("ul").fadeToggle(150)}),$(".megamenu-mobile").click(function(e){$(".megamenu > ul").toggleClass("show-on-mobile"),e.preventDefault()})});
$(document).ready(function(){$(".fa-search").click(function(){$(".containersearch, .inputnui").toggleClass("active"),$("input[type='text']").focus()})});var prev=0,$window=$(window),nav=$(".megamenu-container");$window.on("scroll",function(){var n=$window.scrollTop();nav.toggleClass("hiddenmega",n>prev),prev=n});
//]]>
</script>Then select one of the CSS below and add the code before </head>
Mega Menu Version 1
This is the standard version of Responsive Mega Menu<style type='text/css'>
/* Responsive megamenu by cssmoz.blospot.com */
.megamenu{position:relative;display:block;margin:auto;text-align:center;max-width:970px}
.megamenu-container{margin:0 auto;background:#222;box-shadow:0 2px 10px rgba(0,0,0,0.05);position:fixed;top:0;left:0;right:0;z-index:99}
.megamenu-mobile{display:none;padding:24px 20px;background:#fff;box-shadow:0 2px 15px rgba(0,0,0,0.1)}
.megamenu-mobile:before{content:"\f0c9";font-family:"fontawesome";font-size:1.5rem;padding:0;left:20px;position:absolute;top:15px;transform:translateY(-25%);color:#222}
.megamenu-dropdown-icon:before{content:"\f107";font-family:"fontawesome";display:none;cursor:pointer;color:#fff;position:absolute;right:20px;top:15px}
.megamenu > ul{margin:0 auto;width:100%;list-style:none;padding:0;position:relative;box-sizing:border-box}
.megamenu > ul:before,.megamenu > ul:after{content:"";display:table}
.megamenu > ul:after{clear:both}
.megamenu > ul > li{float:left;padding:0;margin:0;text-decoration:none;transition:all .1s}
.megamenu > ul > li a{cursor:pointer;text-decoration:none;padding:15px 20px;display:block;color:#fff;font-size:14px;transition:all .1s}
.megamenu > ul > li:hover{background:#e84118}
.megamenu > ul > li > ul{display:none;width:100%;background:#fff;padding:20px;position:absolute;z-index:99;left:0;margin:0;list-style:none;text-align:left;box-sizing:border-box;box-shadow:0 8px 10px -4px rgba(0,0,0,0.2)}
.megamenu > ul > li > ul:before,.megamenu > ul > li > ul:after{content:"";display:table}
.megamenu > ul > li > ul:after{clear:both}
.megamenu > ul > li > ul > li{margin:0;padding-bottom:0;list-style:none;width:25%;background:none;float:left}
.megamenu > ul > li > ul > li a{color:#222;padding:0.2em 0;width:95%;display:block;border-bottom:1px solid rgba(0,0,0,0.1)}
.megamenu > ul > li > ul > li a:hover{color:#e84118}
.megamenu > ul > li > ul > li > ul{display:block;padding:0;margin:10px 0 0;list-style:none;box-sizing:border-box}
.megamenu > ul > li > ul > li > ul:before,.megamenu > ul > li > ul > li > ul:after{content:"";display:table}
.megamenu > ul > li > ul > li > ul:after{clear:both}
.megamenu > ul > li > ul > li > ul > li{float:left;width:100%;padding:10px 0;margin:0;font-size:0.8em}
.megamenu > ul > li > ul > li > ul > li a{border:0}
.megamenu > ul > li > ul.normal-sub{width:100%;max-width:170px;left:auto;padding:5px 10px}
.megamenu > ul > li > ul.normal-sub > li{width:100%}
.megamenu > ul > li > ul.normal-sub > li a{border:0;padding:.5em 0}
.containersearch{background:#e84118;width:0;position:absolute;top:0;right:0;padding:0 30px;text-align:center;transition:all 0.5s ease}
.containersearch .fa{background:#e84118;color:#fff;position:absolute;font-size:19px;cursor:pointer;padding:0;top:15px;right:20px}
.inputnui{border:0!important;background:transparent;width:0%;padding:17.5px 0!important;outline:none;color:#fff;font-size:15px!important;transition:all 0.3s ease}
.containersearch.active{width:250px;padding-left:25px;transition:all 0.5s ease}
.inputnui.active{width:98%;padding-left:5px!important;transition:all 0.5s 0.8s ease}
input::placeholder{color:#fff}
@media only screen and (max-width: 959px) {
.megamenu-container{width:100%}
.megamenu-mobile,.megamenu-dropdown-icon:before{display:block}
.megamenu > ul{display:none}
.megamenu > ul > li{position:relative;width:100%;float:none;display:inline-block;text-align:left;padding:0}
.megamenu > ul > li a{padding:15px 20px;display:block}
.megamenu > ul > li > ul{position:relative;overflow-y:scroll;max-height:280px}
.megamenu > ul > li > ul.normal-sub{width:100%;max-width:100%}
.megamenu > ul > li > ul > li{float:none;width:100%;margin-top:20px}
.megamenu > ul > li > ul > li:first-child{margin:0}
.megamenu > ul > li > ul > li > ul{position:relative}
.megamenu > ul > li > ul > li > ul > li{float:none}
.megamenu .show-on-mobile{display:block}
.megamenu > ul > li:hover{background:rgba(255,255,255,.1)}
.containersearch{background:transparent}
.containersearch .fa{background:transparent;color:#222}
.containersearch.active{width:100%;text-align:center}
.inputnui.active,input::placeholder{color:#888;text-align:center}}
</style>Mega Menu Version 2 with the Scroll Hide Function
This is version 2 of the Responsive Mega Menu with the hide hide function, so the menu will close if we scroll the page down and it will reappear if our page scrolls up.<style type='text/css'>
/* Responsive megamenu */
.megamenu{position:relative;display:block;margin:auto;text-align:center;max-width:970px}
.megamenu-container{margin:0 auto;background:#222;box-shadow:0 2px 10px rgba(0,0,0,0.05);position:fixed;top:0;left:0;right:0;z-index:99;transition:transform 1s cubic-bezier(0.86,0,0.07,1)}
.megamenu-mobile{display:none;padding:24px 20px;background:#fff;box-shadow:0 2px 15px rgba(0,0,0,0.1)}
.megamenu-mobile:before{content:"\f0c9";font-family:"fontawesome";font-size:1.5rem;padding:0;left:20px;position:absolute;top:15px;transform:translateY(-25%);color:#222}
.megamenu-dropdown-icon:before{content:"\f107";font-family:"fontawesome";display:none;cursor:pointer;color:#fff;position:absolute;right:20px;top:15px}
.megamenu > ul{margin:0 auto;width:100%;list-style:none;padding:0;position:relative;box-sizing:border-box}
.megamenu > ul:before,.megamenu > ul:after{content:"";display:table}
.megamenu > ul:after{clear:both}
.megamenu > ul > li{float:left;padding:0;margin:0;text-decoration:none;transition:all .1s}
.megamenu > ul > li a{cursor:pointer;text-decoration:none;padding:15px 20px;display:block;color:#fff;font-size:14px;transition:all .1s}
.megamenu > ul > li:hover{background:#e84118}
.megamenu > ul > li > ul{display:none;width:100%;background:#fff;padding:20px;position:absolute;z-index:99;left:0;margin:0;list-style:none;text-align:left;box-sizing:border-box;box-shadow:0 8px 10px -4px rgba(0,0,0,0.2)}
.megamenu > ul > li > ul:before,.megamenu > ul > li > ul:after{content:"";display:table}
.megamenu > ul > li > ul:after{clear:both}
.megamenu > ul > li > ul > li{margin:0;padding-bottom:0;list-style:none;width:25%;background:none;float:left}
.megamenu > ul > li > ul > li a{color:#222;padding:0.2em 0;width:95%;display:block;border-bottom:1px solid rgba(0,0,0,0.1)}
.megamenu > ul > li > ul > li a:hover{color:#e84118}
.megamenu > ul > li > ul > li > ul{display:block;padding:0;margin:10px 0 0;list-style:none;box-sizing:border-box}
.megamenu > ul > li > ul > li > ul:before,.megamenu > ul > li > ul > li > ul:after{content:"";display:table}
.megamenu > ul > li > ul > li > ul:after{clear:both}
.megamenu > ul > li > ul > li > ul > li{float:left;width:100%;padding:10px 0;margin:0;font-size:0.8em}
.megamenu > ul > li > ul > li > ul > li a{border:0}
.megamenu > ul > li > ul.normal-sub{width:100%;max-width:170px;left:auto;padding:5px 10px}
.megamenu > ul > li > ul.normal-sub > li{width:100%}
.megamenu > ul > li > ul.normal-sub > li a{border:0;padding:.5em 0}
.containersearch{background:#e84118;width:0;position:absolute;top:0;right:0;padding:0 30px;text-align:center;transition:all 0.5s ease}
.containersearch .fa{background:#e84118;color:#fff;position:absolute;font-size:19px;cursor:pointer;padding:0;top:15px;right:20px}
.inputnui{border:0!important;background:transparent;width:0%;padding:17.5px 0!important;outline:none;color:#fff;font-size:15px!important;transition:all 0.3s ease}
.containersearch.active{width:250px;padding-left:25px;transition:all 0.5s ease}
.inputnui.active{width:98%;padding-left:5px!important;transition:all 0.5s 0.8s ease}
input::placeholder{color:#fff}
.hiddenmega{transform:translateY(-80px)}
@media only screen and (max-width: 959px) {
.megamenu-container{width:100%}
.megamenu-mobile,.megamenu-dropdown-icon:before{display:block}
.megamenu > ul{display:none}
.megamenu > ul > li{position:relative;width:100%;float:none;display:inline-block;text-align:left;padding:0}
.megamenu > ul > li a{padding:15px 20px;display:block}
.megamenu > ul > li > ul{position:relative;overflow-y:scroll;max-height:280px}
.megamenu > ul > li > ul.normal-sub{width:100%;max-width:100%}
.megamenu > ul > li > ul > li{float:none;width:100%;margin-top:20px}
.megamenu > ul > li > ul > li:first-child{margin:0}
.megamenu > ul > li > ul > li > ul{position:relative}
.megamenu > ul > li > ul > li > ul > li{float:none}
.megamenu .show-on-mobile{display:block}
.megamenu > ul > li:hover{background:rgba(255,255,255,.1)}
.containersearch{background:transparent}
.containersearch .fa{background:transparent;color:#222}
.containersearch.active{width:100%;text-align:center}
.inputnui.active,input::placeholder{color:#888;text-align:center}}
</style>Mega Menu Version 3 with the Scroll Hide Bottom Function
This is version 3 of the Responsive Mega Menu with hide hide scroll function, has the same function as version 2 only the menu position is below.<style type='text/css'>
/* Responsive megamenu */
.megamenu{position:relative;display:block;margin:auto;text-align:center;max-width:970px}
.megamenu-container{margin:0 auto;background:#222;box-shadow:0 2px 10px rgba(0,0,0,0.05);position:fixed;bottom:0;left:0;right:0;z-index:99;transition:transform 1s cubic-bezier(0.86,0,0.07,1)}
.megamenu-mobile{display:none;padding:24px 20px;background:#fff;box-shadow:0 2px 15px rgba(0,0,0,0.1)}
.megamenu-mobile:before{content:"\f0c9";font-family:"fontawesome";font-size:1.5rem;padding:0;left:20px;position:absolute;top:15px;transform:translateY(-25%);color:#222}
.megamenu-dropdown-icon:before{content:"\f107";font-family:"fontawesome";display:none;cursor:pointer;color:#fff;position:absolute;right:20px;top:15px}
.megamenu > ul{margin:0 auto;width:100%;list-style:none;padding:0;position:relative;box-sizing:border-box}
.megamenu > ul:before,.megamenu > ul:after{content:"";display:table}
.megamenu > ul:after{clear:both}
.megamenu > ul > li{float:left;padding:0;margin:0;text-decoration:none;transition:all .1s}
.megamenu > ul > li a{cursor:pointer;text-decoration:none;padding:15px 20px;display:block;color:#fff;font-size:14px;transition:all .1s}
.megamenu > ul > li:hover{background:#e84118}
.megamenu > ul > li > ul{display:none;width:100%;background:#fff;padding:20px;position:absolute;z-index:99;left:0;margin:0;list-style:none;text-align:left;box-sizing:border-box;;box-shadow:0 -4px 10px 0 rgba(0,0,0,0.1)}
.megamenu > ul > li > ul:before,.megamenu > ul > li > ul:after{content:"";display:table}
.megamenu > ul > li > ul:after{clear:both}
.megamenu > ul > li > ul > li{margin:0;padding-bottom:0;list-style:none;width:25%;background:none;float:left}
.megamenu > ul > li > ul > li a{color:#222;padding:0.2em 0;width:95%;display:block;border-bottom:1px solid rgba(0,0,0,0.1)}
.megamenu > ul > li > ul > li a:hover{color:#e84118}
.megamenu > ul > li > ul > li > ul{display:block;padding:0;margin:10px 0 0;list-style:none;box-sizing:border-box}
.megamenu > ul > li > ul > li > ul:before,.megamenu > ul > li > ul > li > ul:after{content:"";display:table}
.megamenu > ul > li > ul > li > ul:after{clear:both}
.megamenu > ul > li > ul > li > ul > li{float:left;width:100%;padding:10px 0;margin:0;font-size:0.8em}
.megamenu > ul > li > ul > li > ul > li a{border:0}
.megamenu > ul > li > ul.normal-sub{width:100%;max-width:170px;left:auto;padding:5px 10px}
.megamenu > ul > li > ul.normal-sub > li{width:100%}
.megamenu > ul > li > ul.normal-sub > li a{border:0;padding:.5em 0}
.containersearch{background:#e84118;width:0;position:absolute;top:0;right:0;padding:0 30px;text-align:center;transition:all 0.5s ease}
.containersearch .fa{background:#e84118;color:#fff;position:absolute;font-size:19px;cursor:pointer;padding:0;top:15px;right:20px}
.inputnui{border:0!important;background:transparent;width:0%;padding:17.5px 0!important;outline:none;color:#fff;font-size:15px!important;transition:all 0.3s ease}
.containersearch.active{width:250px;padding-left:25px;transition:all 0.5s ease}
.inputnui.active{width:98%;padding-left:5px!important;transition:all 0.5s 0.8s ease}
input::placeholder{color:#fff}
.hiddenmega{transform:translateY(80px)}
@media only screen and (max-width: 959px) {
.megamenu-container{width:100%}
.megamenu-mobile,.megamenu-dropdown-icon:before{display:block}
.megamenu > ul{display:none}
.megamenu > ul > li{position:relative;width:100%;float:none;display:inline-block;text-align:left;padding:0}
.megamenu > ul > li a{padding:15px 20px;display:block}
.megamenu > ul > li > ul{position:relative;overflow-y:scroll;max-height:280px;bottom:initial}
.megamenu > ul > li > ul.normal-sub{width:100%;max-width:100%}
.megamenu > ul > li > ul > li{float:none;width:100%;margin-top:20px}
.megamenu > ul > li > ul > li:first-child{margin:0}
.megamenu > ul > li > ul > li > ul{position:relative}
.megamenu > ul > li > ul > li > ul > li{float:none}
.megamenu .show-on-mobile{display:block}
.megamenu > ul > li:hover{background:rgba(255,255,255,.1)}
.containersearch{background:transparent}
.containersearch .fa{background:transparent;color:#222}
.containersearch.active{width:100%;text-align:center}
.inputnui.active,input::placeholder{color:#888;text-align:center}}
</style>Next, click the button Save theme and see the results on your blog.
Yup, that's it How to Install Responsive Mega Menus on Blogger Saikot house can convey this time. Thank you for visiting and hopefully useful.
Post a Comment