Web design & Internet tutorials
Search the site...
Home» FAQ » CSS » How can I add submenus to a standards-based vertical navigation bar?

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

Posted by Janine Warner - August 25, 2012 - CSS, Dreamweaver, FAQ
0

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 a tutorial on how to create a drop-down menu in Dreamweaver

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

css, dwcs3, dwcs4, dwcs5, dwcs6, web design

Leave a Reply

You must be logged in to post a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1&1 Hosting

Recent Posts

  • Google Analytics for Creative Professionals – new class on Pluralsight
  • Follow the cursor JavaScript sample
  • Part Four: Tools that let amateurs look like professionals
  • Part Three: Influence, Klout and finding what’s hot
  • Best social media tools part 2: Twitter, Instagram and Pinterest




© 2001 - 2020 All rights reserved. DigitalFamiliy.com | Terms & Conditions of Use | Privacy Policy

This is a demonstration store. No physical products will be shipped. Dismiss