Saturday, August 29, 2009

Horizontal Menu(Customizable) Widget For Blogger or Blogspot

1 comments 8/29/2009
Sign up to receive our site updates!
Menus are the key tool to navigate through the site easily.We have seen a horizontal menu or a navigation bar on many websites and blogs.But very few Blogger blogs have a horizontal navigation bar like we have here at our blog.you find a simple horizontal menu on so many blogs.But this one not like that one,

1.Multi level
2.Easy to customize
3.Professional Desgin
4.All browser computability
5.Wide rang navigation

Here I'll show you how to add a horizontal menu like the one I added to my blog.

Click here to see the DEMO



Login into Blogger>Edit Html

Find ]]></b:skin>

Paste the Below code just before that

/* Start Vertical Menu From www.techtasks.blogspot.com */

#pad {height:100px;}
/* ================================================================
The original version of this stylesheet and the associated (x)html
is available at http://www.csshmenus.co.uk
Copyright (c) 2009- Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#hmenu {padding:0; margin:0; list-style:none; height:30px; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#hmenu li {float:left; margin-right:1px;}
#hmenu li a {display:block; float:left; height:30px; line-height:30px; background:#333; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold;

padding:0 25px 0 10px;}


#hmenu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

#hmenu li a:hover {z-index:200; position:relative;color:#fff; background-color:#c60;}
#hmenu li:hover {position:relative; z-index:200;}

#hmenu li:hover > a {
color:#fff;/* Menu Font Color */
background:#840; /* Menu mouse over Color */
}

#hmenu li:hover > a.sub {
color:#fff; /* Drop down item mouse over font Color */
background-color:#840; /* Drop down item mouse over background Color */
}
*/
#hmenu li.current a {color:#fff; background:#840;}


#hmenu li a.sub {
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoZ90rxFEuYtXaI79oH3_8AlU_Q64fXz0TkIiSaz17rBVnmLvssMawUFdddUvbdWHCYWN9DzdhyF3vjR8w4ILqvfo08GYx-90VRS-jwRdzsd8Gr3RvGZzPHxQAR9SQ3lR79-EplH8X_KE/) /* Down arrow image */
no-repeat right center;
}

#hmenu :hover ul {left:0; top:30px; width:120px; background:#444;}

/* keep the 'next' level invisible by placing it off screen. */
#hmenu ul,
#hmenu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#hmenu :hover ul :hover ul
{left:120px; top:-1px; background:#222; white-space:nowrap; width:100px; z-index:200; height:auto;}

#hmenu :hover ul li {margin:0; border-top:1px solid #666;}
#hmenu :hover ul li a {
width:120px; /* Width of sub menu item */
padding:0; text-indent:10px;
background:#333; /* Drop down background color */
color:#ccc; /* Drop down item font Color */
height:30px; line-height:30px;}
#hmenu :hover ul li a.fly {background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG2E486PjKMUgIYErkQ9bA1nYUCRqCT52GkBbCZW7Z9FVfrewO6se0XoXwwg7YIm6M8uGV03A4qR7smzG55EkSnOO2qajDmYURwqifQ7piAN08_s1bDF9cMpmh590NhTz0JSDhKMiZD3Y/) no-repeat right
center;}

#hmenu :hover ul :hover {background-color:#c60; color:#fff;}
#hmenu :hover ul :hover a.fly {background-color:#c60; color:#fff;}

#hmenu :hover ul :hover ul li a {width:100px; padding:0; text-indent:10px; background:#333; /* Dropdown Sub Menu background color */
color:#ccc; /* Dropdown Sub Menu font color */
}
#hmenu :hover ul :hover ul :hover {
background-color:#c60; /* Dropdown Sub Menu mouse over color */
color:#fff;/* Dropdown Sub Menu mouse over font color */
}

/* End Vertical Menu From www.techtasks.blogspot.com */

If u want customize the colors of Horizontal menu then follow the comments ( /* */ )on the above code


Go to >page elements

Then find the place where u want to add the menu...

Add Gadget>select HTML/Javascript>

Paste the following code in the content box.


<ul id="hmenu">
<li class="current"><a href="Home"><b>Home</b></a></li>
<li><a href="About Us"><b>About Us</b></a></li>

<li><a class="sub" href="#"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="fly" href="#url">Dropdown one<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown 1.1</a></li>
<li><a href="#url">Dropdown 1.2</a></li>
<li><a href="#url">Dropdown 1.3</a></li>
<li><a href="#url">Dropdown 1.4</a></li>
<li><a href="#url">Dropdown 1.5</a></li>
<li><a href="#url">Dropdown 1.6</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="sub"><a class="fly" href="#url">Dropdown two<!--[if gte IE

7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown 2.1</a></li>
<li><a href="#url">Dropdown 2.2</a></li>
<li><a href="#url">Dropdown 2.3</a></li>
<li><a href="#url">Dropdown 2.4</a></li>
<li><a href="#url">Dropdown 2.5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a class="fly" href="#url">Dropdown five<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown 5.1</a></li>
<li><a href="#url">Dropdown 2.2</a></li>
<li><a href="#url">Dropdown 3.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="sub" href="#"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown one</a></li>
<li><a href="#url">Dropdown two</a></li>
<li><a href="#url">Dropdown three</a></li>
<li><a href="#url">Dropdown four</a></li>
<li><a href="#url">Dropdown five</a></li>
<li><a href="#url">Dropdown six</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li id="support"><a href="www.techtasks.blogspot.com"><b>Tech Tasks</b></a></li>
</ul>

Change the above code according to your requirement and then,


Click on save ,That's it.

Check the blog
Your Ad Here

1 comments:

Proyuth on September 27, 2010 at 12:20 AM said... [Reply]

Hello,

Thanks alot for the very useful tips. I try to follow your steps, it works quite well but the dropdown categories are hidden under the elements. When I drag it to the bottom, it works perfectly. You can check it here:

http://test-dropdown.blogspot.com

very grateful if you can give me some tips to solve this problem.

Thanks again and looking forwards to having solution from you.

Proyuth

Respects for your's Questions & Opinions

  • Friends
  •  

    Recent Posts

    Copyright 2008 All Rights Reserved Tech Tasks Template by Rajesh Kumar Chekuri