How can I add submenus to a standards-based vertical navigation bar?

November 28th, 2010 · No Comments

Hi Janine,

Could you please show me how to change a standards-based vertical navigation bar into a Spry menu bar? In other words, how to add submenus to a standards-based vertical navigation bar?

Regards,
Coddie

PS: I’m working on a template.

HTML Code:
<ul>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Item 3</a></li>
<li><a href=”#”>Item 4</a></li>
</ul>

Change to

<ul id=”MenuBar1″>
<li><a class=”MenuBarItemSubmenu” href=”#”>Item 1</a>
<ul>
<li><a href=”#”>Item 1.1</a></li>
<li><a href=”#”>Item 1.2</a></li>
<li><a href=”#”>Item 1.3</a></li>
</ul>
</li>
<li><a href=”#”>Item 2</a></li>
<li><a class=”MenuBarItemSubmenu” href=”#”>Item 3</a>
<ul>
<li><a class=”MenuBarItemSubmenu” href=”#”>Item 3.1</a>
<ul>
<li><a href=”#”>Item 3.1.1</a></li>
<li><a href=”#”>Item 3.1.2</a></li>
</ul>
</li>
<li><a href=”#”>Item 3.2</a></li>
<li><a href=”#”>Item 3.3</a></li>
</ul>
</li>
<li><a href=”#”>Item 4</a></li>
</ul>

Hi Coddie,

Unless you know JavaScript, HTML, and CSS very well, doing your own editing of a menu like the one you show in the email will be very challenging.

If you don’t wish to learn how to write all of that code, I suggest you consider using the Spry navigation options in Dreamweaver. Here’s an article on how to create a drop-down menu in Dreamweaver:
http://www.digitalfamily.com/dreamweaver/Spry-Tutorials/spry-drop-down-menu.html

Hope that helps and I wish you all the best,
Janine

Tags: Spry

0 responses so far ↓

  • There are no comments yet...Kick things off by filling out the form below.

You must log in to post a comment.