Navigation Menu With Sub-Menus
Bahasa | English
Today
I will explain how to make navigation menu with sub-menu like sample
shown below. Try moving your cursor over the menu Blogger Template and
see what happen. You will see that the menu expand and show sub-menus.
By
installing this menu on your blog, it will make your blog more
interesting. For blog owner, you can categorized the contents easily.
And for your blog's visitor, of course, they will explore your blog
easier and easily choose the categories they like. You can see live demo here.
The
navigation menu I’m going to explain is not using javascript. It is
built using HTML and CSS. So, I believe you will find it very easy to
install it on your blog.
Well, it’s time to let you know how to install this menu on your blog. As usual, you need to login to www.blogger.com and directly go to Edit HTML. Before precede to the next step, remember to back-up your template first.
- Find this code ]]></b:skin>
- Paste the code below right above the previous code. The code in red is the code for width of menu area. Mostly the width is the same with the body width of your template. Change the value to suit your template.#NavbarMenu { background: #000; width: 874px; height: 35px; font-size: 13px; font-family: Arial, Tahoma, Verdana; color: #fff; font-weight: bold; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 874px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #808080; height: 24px; color: #fff; display: block; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: bold; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #c0c0c0; color: #000; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #c0c0c0; width: 150px; color: #000; font-size: 14px; font-family: trebuchet ms, Times New Roman; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #000; color: #fff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }
- Before precede to the next step, you need to determine the location of the menu on your blog. Mostly, the menu position is either on the top (above the header) or below the header block. In this sample I put the menu above the header then you have to look for this code <div id='header-wrapper'>
- Paste the code below above the previous code. <div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='http://allfreetips4u.blogspot.com'>Home</a> </li>
<li><a href='#'>Blogger Template</a>
<ul>
<li><a href='http://allfreetips4u.blogspot.com/search/label/2 column'>2 Column</a> </li>
<li><a href='http://allfreetips4u.blogspot.com/search/label/3 column'>3 Column</a> </li>
<li><a href='http://allfreetips4u.blogspot.com/search/label/4 column'>4 Column</a> </li> </ul> </li>
<li><a href='#'>Blogging Trick</a> </li>
<li><a href='#'>Forum</a>
<ul>
<li><a href='http://allfreetips4u.blogspot.com/search/label/Learn SEO'>Learn SEO</a> </li>
<li><a href='http://allfreetips4u.blogspot.com/search/label/Adsense'>Adsense</a> </li>
<li><a href='http://allfreetips4u.blogspot.com/search/label/Blog Monetize'>Blog Monetize</a> </li>
<li><a href='http://allfreetips4u.blogspot.com/search/label/Link Exchange'>Link Exchange</a> </li>
</ul> </li> </ul>
</div> </div>
- Now, it’s time to change some codes to meet your needs. The blue code is url-link and the red code is the anchor-text or the title of menu or sub-menu related to the link. For example Home menu. If you click on the Home menu, you’ll go to main page, so change the url with your blog’s url. Another example for Blogger Template menu. If you click the menu, it will take you to a page or pages that show postings with ‘blogger template’ label. So, you can change the url like this http://blogname.blogspot.com/search/label/blogger template. Change blogname with your blog’s name.
- You can add or subtract the menu and submenu as you like. To add menu, just repeat the code as many time as you like. To subtract menu or sub-menu, you can remove the code.
- And that’s it. Don’t forget to save your work.
- Now your blog looks more interesting.
