Welcome Message

Blog Consits of a Blogger Hacks and Blogger Templates.Enhace your blog with a excellent blogger templates and very good blogger hacks.

Multi-Level Drop-Down Menu

0

Posted on : 9:16 AM | By : sriram | In : , ,



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://www.hackblogger.co.cc/-->


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://www.hackblogger.co.cc/" 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://www.hackblogger.co.cc/-->
Of course you have to edit the content before saving this widget.




NOTE: Although the required css and js files are already uploaded and linked in the code in ,but I suggest you to download and save these files as a backup on your PC:

Download these 2 files:
DDM1_script.js, and
DDM1_style.css

Download Link

Share this :

  • Stumble upon
  • twitter

Comments (0)