Free Tutorial For You: How to Create Dropdown Menu and Sticky Menu on Blogger or Blogspot

A good website display will make visitors feel at home for a long time on our website and can also attract website visitors to come back to visit our website. therefore it is very important to make the website look better. one of the supporting website displays is the menu display, the monotonous menu display will make visitors bored.

Okay this time I will show you how to make a dropdown and sticky menu like the picture above.

The steps are as follows:

1. Go to the blogger admin page.

If your header is set up as a stand alone (1) gadget, then you need to edit it in the html part of your template.

Go to theme, and edit HTML.

Search type 'Header1' in the box. Hit the enter key on your keyboard.

It will find that code. It should look like

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Sustain The Future (Header)' type='Header'> <!----So, it should look like this after it is changed : ----!>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'> <b:widget id='Header1' locked='false' title='Sustain The Future (Header)' type='Header'>

Then Search type "</body>" in the box. Hit the enter key on your keyboard.

and copy script below before </body> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/> <script type="text/javascript"> $(document).ready(function() { var aboveHeight = $('header').outerHeight(); $(window).scroll(function(){ if ($(window).scrollTop() > aboveHeight){ $('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px'); } else { $('sticknav').removeClass('fixed').next().css('padding-top','0'); } }); }); </script>

Then save.

2. Go to Loyout menu, and then add widget html/javasrcrip widget and drag to header or cross colom.

3. Then copy the script below to html/javascript widget in header :

<sticknav>
<ul id='dropdownmenu'>
<li class="active"><a href='https://nanomh.blogspot.com/'>Home</a></li>
<li class="sub"><a href='#'>Nano</a>
<ul>
<li><a href='#'>Sub-Nano1</a></li>
<li><a href='#'>Sub-Nano2</a></li>
<li><a href='#'>Sub-Nano3</a></li>
</ul>
</li>
<li><a href='#'>Erna</a>
<ul>
<li><a href='#'>Sub-Erna1</a></li>
<li><a href='#'>Sub-Erna2</a></li>
<li><a href='#'>Sub-Erna3</a></li>
</ul>
</li>
<li><a href='#'>Titan</a>
<ul>
<li><a href='#'>Sub-Titan1</a></li>
<li><a href='#'>Sub-Titan2</a></li>
<li><a href='#'>Sub-Titan3</a></li>
</ul>
</li>
<li><a href='#'>Nadhera</a>
<ul>
<li><a href='#'>Sub-Nadhera1</a></li>
<li><a href='#'>Sub-Nadhera2</a></li>
<li><a href='#'>Sub-Nadhera3</a></li>
</ul>
</li>
</ul>
</sticknav>

<style>
#dropdownmenu{
margin:0px 0 0 -30px;
padding:0px 0px 0px 100px;
width: 1050px; /*Set Width of Blog Menu*/
font:$(tabs.font); /*Change Font Type,Size,Etc*/
color:$(tabs.text.color); /*Change Font Color*/
}
#dropdownmenu ul{
background:$(tabs.background.color)$(tabs.background.gradient)
repeat-x scroll 0 -800px;
_background-image:none; /*Change Menu BG*/
height:20px; /*Height*/
list-style:none;
margin:0px;
padding:0px;
}
#dropdownmenu li{
float:left;
padding:0px;
}
#dropdownmenu li a{
background:$(tabs.background.color)$(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image:none; /*Change Menu BG*/
display:block;
margin:0px;
font:$(tabs.font); /*Change Font Type,Size,Etc*/
text-decoration:none;
}
#dropdownmenu > ul > li > a{
color:$(tabs.text.color); /*Change Font Color*/
}
#dropdownmenu ul ul a{
color:$(tabs.text.color); /*Change Font Size*/
}
#dropdownmenu li > a:hover, #dropdownmenu ul li:hover{
color:$(tabs.selected.text.color); /*Change Font Color On Hover*/
background-color:$(tabs.selected.background.color); /*Change Font BG Color*/
text-decoration:none;
}
#dropdownmenu li ul {
background:$(tabs.background.color)$(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image:none; /*Change Menu BG*/
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:100px; /*Change Width of Drop Down Menu*/
z-index:9999;
}
#dropdownmenu li:hover ul{
display:block;
overflow: visible;
}
#dropdownmenu li li {
background:$(tabs.background.color)$(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image:none;/*Change Menu BG*/
display:block;
float:none;
margin:0px;
padding:0px;
width:200px; /*Change Width of DropDown Menu*/
}
#dropdownmenu li:hover li a{
background:$(tabs.selected.background.color);/*Change BG of Link Hover*/
}
#dropdownmenu li ul a{
display:block;
height:auto;
margin:0px;
padding:10px;
text-align:left;
}
#dropdownmenu li ul a:hover, #dropdownmenu li ul li:hover > a{
color:$(tabs.selected.text.color);/*Change Text Color On Hover*/
background-color:$(tabs.selected.background.color);/*Change BG on Hover*/
border:0px;
text-decoration:none;
}

sticknav {
background: #eeeeee none repeat scroll top left;
height: 30px;
width: 45%;
margin-right: auto;
margin-left: auto;
left: 0px;
right: 0px;
position: relative;
z-index: 9999;
}
.fixed { position:fixed;margin-left:17%;margin-right:17%;}
</style>

Then Save.

And preview your blog, ......

For detail step by step, you can watch this video....

Okay, that's enough for now from me, if you have any questions, please comment in the comments column. If something goes wrong I apologize. Hopefully helpful, and thank you.

Free Tutorial For You

How to Create Dropdown Menu and Sticky Menu on Blogger or Blogspot

The steps are as follows:

Featured Post

How to fix CLS issue in your blog or web ?