Simple Codes To Create Drop-Down Menu For Your Blogg
Codes To Create Drop-Down Menu For Your Blogg
If you are a blogger and looking for the codes of a good-looking Drop Down Menu for your blog, then here it is. Follow this article.
Adding menus, Nav or any Page list in the blog of different categories is crucial. It helps our users to find any particular topic for any group quickly. These menus also were given professional effect to our blogs and contributed to arranging various labels or categories. So today I choose to introduce the drop-down menu for a blog with drop-down features which help to add different tags or pages according to their categories. Pure CSS codes make this menu bar with basic HTML.
Steps To Create Drop-Down Menu in Blogg
- Open Your Blogger Dashboard >> Template Section
- Click on Edit HTML.
- Click on coding box & search by Ctrl+f for the code which looks.
]]></b:skin>
- After searching, You have to paste the code given below just Above/Below the ]]></b:skin>.
#ST-Container {
font: normal 1em Arial, Helvetica, sans-serif;
width:100%; float:left;
} a { color: #333; }
#menu { margin: 0; padding: -1px 6px 0; width:900px;
position:relative; height:33px; z-index:300; padding-left:12px;
background:#000 left top repeat-x;
-moz-border-radius:15px;-khtml-border-radius:15px;
-webkit-border-radius:15px; border-radius:15px; }
#menu li { margin: 0 0px; padding: 0 0 8px; float: left; position: relative; list-style: none; border-right: 1px solid #fff }
#menu a { font-weight: bold; color: #ffffff; text-decoration: none; display: block; padding: 8px 20px; margin: 0; -webkit-border-radius: 1.6em; -moz-border-radius: 1.6em; text-shadow: 0 1px 1px rgba(0,0,0, .3); }
#menu a:hover { background: #26abe3;outline:0 color: #fff; } /* sub levels link hover */
#menu ul li:hover a, #menu li:hover li a { background: none; border: none; color: #000; -webkit-box-shadow: none; -moz-box-shadow: none; }
#menu ul a:hover { background: #26abe3 url() repeat-x 0 -100px !important; color: #fff !important; text-align:left; -webkit-border-radius: 0; -moz-border-radius: 0; text-shadow: 0 1px 1px rgba(0,0,0, .1); } /* dropdown */
#menu li:hover > ul { display: block; }
#menu ul { display: none; text-align:left; margin: 0; padding: 0; width: 185px; position: absolute; top: 35px; left: 0;
background: #ddd url(http://2.bp.blogspot.com/-A86MDTlHnVo/TtC-qF3gIQI/AAAAAAAAFbw/Vv41gIktCig/s1600/gradient.png) repeat-x 0 0; border: solid 1px #b4b4b4; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); box-shadow: 0 1px 3px rgba(0,0,0, .3); }
#menu ul li { float: none; margin: 0; padding: 0; }
#menu ul a { font-weight: normal; text-shadow: 0 1px 0 #fff; } /* level 3+ list */ #menu ul ul { left: 181px; top: -3px; }
#menu ul li:first-child > a { -webkit-border-top-left-radius: 9px; -moz-border-radius-topleft: 9px; -webkit-border-top-right-radius: 9px; -moz-border-radius-topright: 9px; } #menu ul li:last-child > a { -webkit-border-bottom-left-radius: 9px; -moz-border-radius-bottomleft: 9px; -webkit-border-bottom-right-radius: 9px; -moz-border-radius-bottomright: 9px; }
#menu:after { content: “.”; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
#menu { display: inline-block;
}
- Now be careful while below steps. If your blog has any menu bar, then replace its coding otherwise follow below steps given below.
- Now search for the Code which looks like <div id=’header’>
- If you are able to find this code successfully then click on numbering tab to close its coding as shown in image below.
- After Closing coding of header part just below it paste the below given codes
<div id=’ST-Container’>
<ul id=’menu’>
<li class=’current’><a href=’http://www.tecfever.com/’>Home</a></li> <li><a href=’#’>Page 1</a> <ul> <li><a href=’#’>Item 1</a></li>
<li><a href=’#’>Item 2</a>
</li> <li><a href=’#’>Item 3</a></li> </ul></li>
<li><a href=’#’>Page 2</a> <ul>
<li><a href=’#’>Item 1</a></li>
<li><a href=’#’>Item 2</a></li>
<li><a href=’#’>Item 3</a></li> </ul></li>
<li><a href=’#’>Page 3</a> <ul>
<li><a href=’#’>Item 1</a></li>
<li><a href=’#’>Item 2</a></li>
<li><a href=’#’>Item 3</a></li> </ul></li>
<li><a href=’#’>Page 4</a> <ul>
<li><a href=’#’>Item 1</a></li>
<li><a href=’#’>Item 2</a></li>
<li><a href=’#’>Item 3</a></li> </ul></li>
< li><a href=’http://www.tecfever.com/’>Create This</a></li> </ul></div>
- Then replace # with your label links or pages.
- After Pasting Both codes, then click on the Save Button of your Template.
- Then refresh your blog & watch this menu bar lively appears on your blog.
We hope you like this drop-down menu tutorial & hope you will successfully be able to create it. But if you suffer any problems in this process don’t forget to share in the comment box. Thanks for reading.