New Multi-Level Drop-Down Menu





UPDATE:  I updated some of my posts, this post I update 17+ Drop Down Menu Widget in Blogger - Horizontal Menus With CSS & HTML Codes........










STEP #1: Log in to Blogger, go to Layout and click on "Edit HTML" Find (CTRL+F) this code in the template:


</head>

and immediately ABOVE / BEFORE that, paste this code:
<!--MULTI-LEVEL-DD-MENU-STARTS--><link rel="stylesheet" href="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/style.css" type="text/css" /><script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/script.js"></script><!--MULTI-LEVEL-DD-MENU-http://about-tutorials.blogspot.com-->

STEP #2: Now go to "Layout" -> "Edit HTML" -> "Page Elements" and click on "Add a Gadget" and select it as "HTML/JavaScript" type. And add this code to it:




<!--MULTI-LEVEL-DD-MENU-STARTS--><ul class="menunew" id="menu"><li><a href="#" class="menulink">Dropdown One</a><ul><li><a href="#">Navigation Item 1</a></li><li><a href="#" class="sub">Navigation Item 2</a><ul><li class="topline"><a href="#">Navigation Item 1</a></li><li><a href="#">Navigation Item 2</a></li><li><a href="#">Navigation Item 3</a></li><li><a href="#">Navigation Item 4</a></li><li><a href="#">Navigation Item 5</a></li></ul></li><li><a href="#" class="sub">Navigation Item 3</a><ul><li class="topline"><a href="#">Navigation Item 1</a></li><li><a href="#">Navigation Item 2</a></li><li><a href="#" class="sub">Navigation Item 3</a><ul><li class="topline"><a href="#">Navigation Item 1</a></li><li><a href="#">Navigation Item 2</a></li><li><a href="#">Navigation Item 3</a></li><li><a href="#">Navigation Item 4</a></li><li><a href="#">Navigation Item 5</a></li><li><a href="#">Navigation Item 6</a></li></ul></li><li><a href="#">Navigation Item 4</a></li></ul></li><li><a href="#">Navigation Item 4</a></li><li><a href="#">Navigation Item 5</a></li></ul></li><li><a href="http://about-tutorials.blogspot.com" class="menulink">Blogger Help</a></li><li><a href="#" class="menulink">Dropdown Two</a><ul><li><a href="#">Navigation Item 1</a></li><li><a href="#" class="sub">Navigation Item 2</a><ul><li class="topline"><a href="#">Navigation Item 1</a></li><li><a href="#">Navigation Item 2</a></li><li><a href="#">Navigation Item 3</a></li></ul></li></ul></li><li><a href="#" class="menulink">Dropdown Three</a><ul><li><a href="#">Navigation Item 1</a></li><li><a href="#">Navigation Item 2</a></li><li><a href="#">Navigation Item 3</a></li><li><a href="#">Navigation Item 4</a></li><li><a href="#">Navigation Item 5</a></li><li><a href="#" class="sub">Navigation Item 6</a><ul><li class="topline"><a href="#">Navigation Item 1</a></li><li><a href="#">Navigation Item 2</a></li></ul></li><li><a href="#">Navigation Item 7</a></li><li><a href="#">Navigation Item 8</a></li><li><a href="#">Navigation Item 9</a></li><li><a href="#">Navigation Item 10</a></li></ul></li></ul><script type="text/javascript">var menu=new menu.dd("menu");menu.init("menu","menuhover");</script><!--MULTI-LEVEL-DD-MENU-http://about-tutorials.blogspot.com-->

Of course you have to edit the content before saving this widget.

G+

0 comments:

Post a Comment