How To Add Multi color Responsive Menu To Blogger. I want to share a responsive menu for your blogspot design. Nowadays, there are many blogger looking for Responsive Design. It is caused google was prioritizing responsive sites to appear on google pages. Because of that, I wanna help you to make responsive and simple menu just for all of you (someone who need responsive menu). If you one of them, you are in the correct tutorial. The scripts below will make your blog more awesome than before. Let's continue to the tutorial below, I will explain to you step by steps to make responsive menu clearly. To make sure about the displaying of that, you can see the below image. I will make a demo in a GIF format what does it look like. First go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for </b:skin> or </style> and add the below code just above it.
/* Menu Navigasi */
.nav {background:#E5E5E5;height: 35px}
#nav {width: 100%;font: 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;position: static;}
#nav ul, #nav li {list-style: none;margin: 0;padding: 0;z-index:99999}
#nav > a {display: none;}
#nav li {position: relative;}
#nav li a, #nav li a:hover {color: #fff;display: block;text-decoration: none;}
#nav > ul {background:none;height: 35px}
#nav > ul > li {width: 14.28%;height: 100%;float: left;list-style: none;margin: 0;padding: 0;}
#nav > ul > li > a {height: 100%;font-size: 14px;font-weight:bold;line-height: 35px;text-align: center;}
#nav > ul > li:hover > a, #nav > ul:not( :hover ) > li.active > a {background-color:#547279;transition: all 0.5s ease-in-out;}
@media only screen and ( max-width:500px) {
#nav {position: relative;top: auto;left: auto;}
#nav > a {width: 35px;height: 35px;text-align: left;text-indent: -9999px;background-color: #E5E5E5;position: relative;}
#nav > a:before, #nav > a:after {position: absolute;border: 2px solid black;top: 35%;left: 25%;right: 25%;content: '';}
#nav > a:after {top: 60%;}
#nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type {display: block;}
#nav > ul {height: auto;display: none;position: absolute;left: 0;right: 0;}
#nav:target > ul {display: block;}
#nav > ul > li {width: 100%;float: none;}
#nav > ul > li > a {height: auto;text-align: center;padding:1.5px 7px 1.5px 7px;}
#nav > ul > li:not( :last-child ) > a {border: none;}
}
.menu1 {background-color:#1358BA}
.menu2 {background-color:#03C7E9}
.menu3 {background-color:#FE1635}
.menu4 {background-color:#6E8D5A}
.menu5 {background-color:#44749d}
.menu6 {background-color:#fa6900}
.menu7 {background-color:#3b8686}The code above is a basic code for responsive menu. If you are interested to redesign you can change the colors, width and height depend on your blog style. You can see the demo below to make sure you like or not about the display mode.
There are two ways to add this code, you can choose which one is easy for you.
#1 Go to Blog Title → Layout → Add Widget → HTML/JavaScript and paste the given code in the box opened.
#2 Go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for </header> and add the given code just below it (Every template is different, please chose the correct one)
<div class='nav'>
<div id="nav" role="navigation"> <a href="#nav">Show navigation</a> <a href="#" title="Hide navigation">Hide navigation</a>
<ul class="clear-fix">
<li class='menu1'><a href="#">Home</a></li>
<li class='menu2'><a href="#">Profil</a></li>
<li class='menu3'><a href="#">Article</a></li>
<li class='menu4'><a href="#">Tutorial</a></li>
<li class='menu5'><a href="#">Widget</a></li>
<li class='menu6'><a href="#">Money</a></li>
<li class='menu7'><a href="#">SEO</a></li>
</ul>
</div>
</div>Make sure you have the jquery plugin in your blog, if not then add the below code just above the code </head> in your template. But if you have added the jquery plugin just skip this step and continue to the last step.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
The last step is press Ctrl + F and search for </head> and add the below code just just above </head>.
<script type='text/javascript'>
$( function()
{
$( '#nav li:has(ul)' ).doubleTapToGo();
});
</script>
Don't forget to click save and your Responsive Menu have been added to your lovely blog. The features of the Responsive Menu are #Responsive #Cool #Multicolor #Simple #Flat #Design
Advertisement
EmoticonEmoticon