Pre-made navigation bar with second sub-menu drop-down functionality

 

 

Click here to see the demo

 

Directions

Step 1: From the Dashboard, navigate to Layout > Edit HTML (you don’t have to click on expand widgets template), and locate this section code: ]]></b:skin>

Step 2: Add the section code below right after it:

<link href=’slanteddividermenu/ddlevelsmenu-base.css' rel='stylesheet' type='text/css'/>
<link href=’ddlevelsmenu-topbar.css' rel='stylesheet' type='text/css'/>
<link href='ddlevelsmenu-sidebar.css' rel='stylesheet' type='text/css'/>

<script src='ddlevelsmenu.js' type='text/javascript'>

/***********************************************
* All Levels Navigational Menu- (c) Dynamic Drive DHTML
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

Note: The code above references the external .js and .css file, which you need to download below (right click/ select “Save As”)

• ddlevelsmenu-base.css
• ddlevelsmenu-topbar.css
• ddlevelsmenu-sidebar.css
• ddlevelsmenu.js

Step 3: Save your template and navigate to Layout > Page Elements to Add a Gadget > HTML/JavaScript.

 

Step 4: Copy and paste the section code below in the box and select Save.

<div id="ddtopmenubar" class="slantedmenu">
<ul>
<li><a href="http://www.blogspotvision.com">Home</a></li>
<li><a href="http://www.blogspotvision.com">DHTML</a></li>
<li><a href="http://www.blogspotvision.com" rel="ddsubmenu2">CSS</a></li>
<li><a href="http://www.blogspotvision.com">Forums</a></li>
<li><a href="http://www.blogspotvision.com" rel="ddsubmenu3">Web Tools</a></li>
</ul>
</div>

<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar")
</script>

<!--HTML for the Drop Down Menus associated with Top Menu Bar-->
<!--They should be inserted OUTSIDE any element other than the BODY tag itself-->
<!--A good location would be the end of the page (right above "</BODY>")-->

<!--Top Drop Down Menu 1 HTML-->

<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 2a</a></li>
<li><a href="#">Item Folder 3a</a>
  <ul>
  <li><a href="#">Sub Item 3.1a</a></li>
  <li><a href="#">Sub Item 3.2a</a></li>
  <li><a href="#">Sub Item 3.3a</a></li>
  <li><a href="#">Sub Item 3.4a</a></li>
  </ul>
</li>
<li><a href="#">Item 4a</a></li>
<li><a href="#">Item Folder 5a</a>
  <ul>
  <li><a href="#">Sub Item 5.1a</a></li>
  <li><a href="#">Item Folder 5.2a</a>
    <ul>
    <li><a href="#">Sub Item 5.2.1a</a></li>
    <li><a href="#">Sub Item 5.2.2a</a></li>
    <li><a href="#">Sub Item 5.2.3a</a></li>
    <li><a href="#">Sub Item 5.2.4a</a></li>
    </ul>
  </li>
    </ul>
</li>
<li><a href="#">Item 6a</a></li>
</ul>

<!--Top Drop Down Menu 2 HTML-->

<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="#">Item 1b</a></li>
<li><a href="#">Item 2b</a></li>
<li><a href="#">Item Folder 3b</a>
  <ul>
  <li><a href="#">Sub Item 3.1b</a></li>
  <li><a href="#">Sub Item 3.2b</a></li>
  <li><a href="#">Sub Item 3.3b</a></li>
  <li><a href="#">Sub Item 3.4b</a></li>
  </ul>
</li>
<li><a href="#">Item 4b</a></li>
<li><a href="#">Item Folder 5b</a>
  <ul>
  <li><a href="#">Sub Item 5.1b</a></li>
  <li><a href="#">Item Folder 5.2b</a>
    <ul>
    <li><a href="#">Sub Item 5.2.1b</a></li>
    <li><a href="#">Sub Item 5.2.2b</a></li>
    <li><a href="#">Sub Item 5.2.3b</a></li>
    </ul>
  </li>
    </ul>
</li>
<li><a href="#">Item 6b</a></li>
</ul>

<!--Top Drop Down Menu 3 HTML-->

<ul id="ddsubmenu3" class="ddsubmenustyle">
<li><a href=http://www.blogspotvision.com>blogspotvision</a></li>
<li><a href="http://www.blogspotvision.com">blogspotvision</a></li>
<li><a href="http://www.dynamicdrive.com/emailriddler/">blogspotvision</a></li>
<li><a href="http://www.blogspotvision.com">blogspotvision</a></li>
<li><a href="http://www.blogspotvision.com">blogspotvision</a></li>
</ul>

Note: Modify the links and Preview your template.

 

*Tutorial completed