This is cool Smooth Multilevel Drop-Down Navigation Menu, if you like add this Drop-Down menu your blog..please follow below step..
How To Add Smooth Multilevel Drop-Down Navigation Menu To Blogger
1.Log in to your dashboard--> Desing- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see </head> tag.
4.Now add below code before </head> tag.
How To Add Smooth Multilevel Drop-Down Navigation Menu To Blogger
1.Log in to your dashboard--> Desing- -> Edit HTML
2.Click on "Expand Widget Templates"
3.Scroll down to where you see </head> tag.
4.Now add below code before </head> tag.
<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/bloggertricksandtoolz/ddsmoothmenu.css" /> <link rel="stylesheet" type="text/css" href="https://sites.google.com/site/bloggertricksandtoolz/ddsmoothmenu-v.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="https://sites.google.com/site/bloggertricksandtoolz/ddsmoothmenu.js"> /*********************************************** * Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code * Bloggerized by Sameera http://www.bloggertricksandtoolz.com/ ***********************************************/ </script> <script type="text/javascript"> ddsmoothmenu.init({ mainmenuid: "smoothmenu1", //menu DIV id orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v" classname: 'ddsmoothmenu', //class added to menu's outer DIV //customtheme: ["#1c5a80", "#18374a"], contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"] }) ddsmoothmenu.init({ mainmenuid: "smoothmenu2", //Menu DIV id orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v" classname: 'ddsmoothmenu-v', //class added to menu's outer DIV //customtheme: ["#804000", "#482400"], contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"] }) </script>
5.Click on "Save Template"
6.Now Go to desing--->> Add a Gadget--->> Select Html Java Script--->> Paste the below code
<div id="smoothmenu1" class="ddsmoothmenu"> <ul> <li><a href="http://www.dynamicdrive.com">Item 1</a></li> <li><a href="#">Folder 0</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul> </li> <li><a href="#">Folder 1</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul> </li> <li><a href="#">Item 3</a></li> <li><a href="#">Folder 2</a> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Folder 2.1</a> <ul> <li><a href="#">Sub Item 2.1.1</a></li> <li><a href="#">Sub Item 2.1.2</a></li> <li><a href="#">Folder 3.1.1</a> <ul> <li><a href="#">Sub Item 3.1.1.1</a></li> <li><a href="#">Sub Item 3.1.1.2</a></li> <li><a href="#">Sub Item 3.1.1.3</a></li> <li><a href="#">Sub Item 3.1.1.4</a></li> <li><a href="#">Sub Item 3.1.1.5</a></li> </ul> </li> <li><a href="#">Sub Item 2.1.4</a></li> </ul> </li> </ul> </li> <li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li> </ul> <br style="clear: left" /> </div>
7.Now save your "Html Java scrpit" you are done.
Cheers.
See this link for more customization: http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
No comments:
Post a Comment