CSS3 is an innovative language and launched after easy CSS which is not capable to reveal sophisticated capability of any gizmo like Edge Shadow, Image Rotating, Image Popup, Slope, Popup Navigation, Opacity, and so on. If we wish to over stylize our widgets then we have to embrace innovative code like CSS3, occasionally we require not any jQuery support and therefore we stumble upon wonderful devices on the basis of this bit just. Today we're gonna release such a sophisticated CSS3 powered navigation bar which takes no extra support of jQuery however rather able to reveal a remarkable popup dropdowns on any frontend. The menu bar is really simple to setup on blogspot design template. If you want to share this widget with your readers do not forget to connect back us.
- Open Blogger > Template > Edit HTML.
- Press
Ctrl +F & search for]]></b:skin>tag & paste below code above it..nav{/* General Font */ font-family: 'Open Sans', sans-serif;font-weight: 600;/* 400 thinner */ font-size: 13px;line-height: 13px;/* General Shape */ position: relative;padding: 0 15px;/* Fix for inline-block spacing*/ margin: 0;/* Genral Styling */ background-color: #222222;}/* Reset Links */.nav a, .nav a:link, .nav a:visited, .nav a:hover, .nav a:focus, span{color: #a2a297;text-decoration: none;}/* Main element of the naviagtion */.nav > li{display: inline-block;text-align: center;margin-left: -4px;/* For the inline-block spacing */ border-right: 1px solid #000;-webkit-box-shadow: 1px 0px 0px 0px rgba(51, 51, 51, 1);box-shadow: 1px 0px 0px 0px rgba(51, 51, 51, 1);}/* Search */.nav > li > a{display:block;padding:20px 18px;}.nav > li:hover > a{color:#fff;}.nav > li:hover{background-color:#000;}.nav > li > ul{opacity:0;visibility:hidden;position:absolute;list-style:none;top:53px;background-color:#222222;width:200px;text-align:left;margin-top:30px;border:1px solid black;z-index:99;padding:0;}.nav > li:hover > ul{opacity:1;visibility:visible;margin-top:0;}.nav li > ul li{font-size:11px;position:relative;display:block;border-bottom:1px solid #000;-webkit-box-shadow:0 1px 0 0 rgba(51,51,51,1);padding:15px 10px;}.nav > li > ul li:hover{background-color: #000;}.nav ul li:hover > a{color: white;}/* Second and third dropdown level */.nav > li > ul li ul{opacity: 0;visibility: hidden;position: absolute;list-style: none;top:-1px;left: 200px;background-color: #222222;width: 200px;text-align: left;padding: 0px;border:1px solid black;margin-left: 30px;}/* Second and third level appears */.nav > li ul li:hover > ul{opacity: 1;visibility: visible;margin-left: 0px;}/* Full width dropdown */.nav > li > .fulldrop{opacity: 0;visibility: hidden;position: absolute;list-style: none;top:53px;left: 0px;background-color: #222222;width: 100%;min-height: 100px;text-align: left;margin-top:30px;padding: 0;border:1px solid black;z-index: 99;-webkit-box-sizing: border-box;/* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;/* Firefox, other Gecko */ box-sizing: border-box;/* Opera/IE 8+ */ overflow: hidden;}/* Full dropdown appears */.nav > li:hover .fulldrop{opacity: 1;visibility: visible;margin-top: 0px;}.nav ul li:hover:after{color: white;}/* coldrop based dropdown */.nav .coldrop{opacity: 0;visibility: hidden;position: absolute;list-style: none;top:53px;background-color: #222222;min-height: 100px;text-align: left;margin-top:30px;padding: 0;border:1px solid black;padding: 0 10px;z-index: 99;-webkit-box-sizing: border-box;/* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;/* Firefox, other Gecko */ box-sizing: border-box;/* Opera/IE 8+ */}.nav > li:hover .coldrop{opacity: 1;visibility: visible;margin-top: 0px;}.nav .coldrop .column{width: 130px;margin:0 9px;}input#mobile_menu{display: none;}/* coldrop for full width dropdown */.nav .column{width: 14.1%;float: left;color:white;margin: 0 0 0 2.2%;-webkit-box-sizing: border-box;/* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;/* Firefox, other Gecko */ box-sizing: border-box;/* Opera/IE 8+ */}.nav .column ul{padding: 0;margin: 0;}.nav .column ul li{padding: 0;list-style: none;font-size: 11px;}.nav .column h3{font-size: 13px;font-weight: bold;padding: 14px 0;margin: 5px 0 10px 0;border-bottom: 1px solid black;-webkit-box-shadow: 0px 1px 0px 0px rgba(51, 51, 51, 1);-webkit-box-shadow: 0px 1px 0px 0px rgba(51, 51, 51, 1);}.nav .column ul li a{display: block;padding: 0 0 15px 0;}/* Arrows for dropdowns */.nav li.dropdown:after{content: "\f107";font-family: FontAwesome;color: #a2a297;position: absolute;margin-left: 38px;margin-top: -30px;display: inline-block;}.nav li.dropdown:hover:after{color: white;}.nav ul li.dropdown:after{content: "\f105";position: absolute;left: 170px;font-family: FontAwesome;display: inline-block;color: #a2a297;margin-left: 10px;margin-top: 2px;}.nav ul li.dropdown:hover:after{color: white;}.nav > li > ul li ul, .nav li >ul li, .nav > li > .fulldrop, .nav > li > .coldrop, .nav > li > ul, .nav > li{transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;/* Firefox 4 */ -webkit-transition: all 0.2s ease-in-out;/* Safari and Chrome */ -o-transition: all 0.2s ease-in-outs;/* Opera */}@media only screen and (max-width: 959px){.nav > li > ul li ul li ul{left: -201px;z-index: 3;}.nav > li > a{padding: 20px 12px;font-size: 12px;}.nav .coldrop .column{width: 120px;margin:0 5px;}}@media only screen and (max-width: 767px){label.mobile_menu span{display: inline;}label.mobile_menu{position: relative;display: block;width: 100%;background-color: #222222;padding: 10px 0;border-bottom: 1px solid white;}.nav{display: none;}.nav{padding: 0;}.nav li{width: 100%;text-align: left;margin-left: 0;}.nav > li{border-right: none;border-bottom: 1px solid #000;-webkit-box-shadow: 0px 1px 0px 0px rgba(51, 51, 51, 1);-webkit-box-shadow: 0px 1px 0px 0px rgba(51, 51, 51, 1);padding: 18px 0px;position: relative;}.nav > li > a{display: inline;}.nav li ul, .nav li .fulldrop, .nav li .coldrop{top:45px;}.nav li ul{padding: 0;}.nav .fulldrop, .nav .coldrop{width: 100%;}.nav li > ul li{padding: 18px 0px;}#mobile_menu:checked+.nav{display: block}.nav .column, .nav .coldrop .column{width: 94%;padding: 0 3%;}.nav > li > ul{width: 100%;}.nav > li > ul li ul{width: 100%;top:43px;left: auto;right: 0;padding-left: 1px;margin-top: 30px;z-index: 2;}.nav > li > ul > li:hover ul{margin-top: 0;}.nav > li > ul li ul li ul{width: 100%;top:43px;left: -1px;padding-left: 1px;margin-left: 0;margin-top: 30px;}.nav > li > ul > li ul li:hover ul{margin-top: 0;}.nav > li > ul li{padding: 15px 0 15px 6%;width: 94%;}.nav > li > ul li ul li{padding: 15px 0 15px 9%;width: 91%;}label:after{position: absolute;top:0px;right: 10px;content: "";font-size: 30px;color: white;}.nav > li > ul li ul li ul li{padding: 15px 0 15px 12%;width: 88%;}.nav > li > ul li:hover{background-color: transparent;}.nav > li.search{float: none;padding-left: 14px;}.nav ul li.dropdown:after{left: 90%;}.nav .column, .nav .coldrop .column, .nav > li > ul, .nav > li > ul li ul, .nav > li > ul li ul li ul{-webkit-box-sizing: border-box;/* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box;/* Firefox, other Gecko */ box-sizing: border-box;/* Opera/IE 8+ */}}
- CSS pasted successfully, now its time to execute the HTML, just copy the below code and navigate to Blogger > Layout > Add Gadget.
<ul class='nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li><a href='#'>Link</a>
</li>
<li class='dropdown'><a href='#'>Drop</a>
<ul>
<li><a href='#'>Drop 1.1</a></li>
<li><a href='#'>Drop 1.2</a></li>
<li><a href='#'>Drop1.3</a></li>
<li class='dropdown'><a href='#'>Drop 1.4</a>
<ul>
<li><a href='#'>Drop 1.1</a></li>
<li><a href='#'>Drop 1.2</a></li>
</ul>
</li>
<li><a href='#'>DropDown 1.5</a></li>
<li><a href='#'>DropDown 1.6</a></li>
</ul>
</li>
<li><a href='#'>Link</a>
</li>
</ul> - Choose HTML/JavaScript & paste the above copied code into it.
- Now you can change the the names and add your own personal links in this awesome Navbar.
- Align the gadget where you wanna display the navbar and press Save.
- You can even add more DropDown menu's by inserting below code into the above code. Juts paste it below the above code.
<li class='dropdown'><a href='#'>Drop</a>
<ul>
<li><a href='#'>Drop 1.1</a></li>
<li><a href='#'>Drop 1.2</a></li>
</ul>
</li>
That's it now refresh your blog and see this awesome Navbar in action, well you can also change some styling if you are good with CSS. So have fun using this navbar absolutely for free. Have any question do comment below.
(COMMENTS WILL LOAD AUTOMATICALLY)