[Hidden-tech] Need help with subnavigation and CSS

[B. Kimo Lee]

Hi Lynn,

Congrats on getting your menu worked out.

What's going to complicate it for you is that each menu is item is a different color and must therefore be treated individually in your CSS, which will apply to all of your sub-level menu items. 

1. CSS — You've probably noticed that each color block in the CSS is a duplicate of the previous color block code with the colors changed. So to implement the sub-level menus, you're probably going to have to duplicate each li style and rename them for your different color blocks to style and position the first sub-level items. 

2. HTML — Then you'll need to modify each unordered list in your HTML to include a new unordered list for each sub-level in your navigation.

3. Javascript — Next, you'll need some kind of Javascript code to make the cascading menu items display.

You can find some tips on building Suckerfish menus here (there is a link at the very bottom to a demo of a vertical version, from which you can view both the HTML and the needed Javascript in the source code for the page.):
http://www.htmldog.com/articles/suckerfish/dropdowns/

Once you understand what goes on in the demo, you can apply the principles to your situation. I'd copy their code, get it running it on a test page, and then start experimenting by adding your HTML and CSS to the first submenu item.

You can see where having all of those different colors is going to make it complicated to keep track of your CSS. But it can be done if you have the patience for it.

Good luck!

Best,
Kimo



AZURELINK  ::  "Simply Connected!"
-------------------------------------------------------------------------------
Web Site Design & Scalable, Managed Web Hosting
Joomla! Content Management System Implementation
eCommerce Development
-------------------------------------------------------------------------------
321 Main Street, Suite 4
Amherst, MA 01002
(413) 549-2020
For more information, please visit: www.azurelink.com
Follow Azurelink on Twitter: http://twitter.com/azurelink
-------------------------------------------------------------------------------




On Nov 29, 2011, at 11:37 AM, Lynn Nichols wrote:

>   ** Be sure to fill out the survey/skills inventory in the member's area.
>   ** If you did, we all thank you.
> 
> 
> I've designed a navigation menu based on Mark Newhouse's Blue Blocks 
> (from the Dynamic Drive library). It works great, but now the client 
> wants to add sub navigation and I'm having trouble with it. I'm not an 
> HTML or CSS maven... is there someone out there who is and could take a 
> look?
> 
> Here's a link to the working navigation:
> 
> http://www.starstruckdesign.com/clients/hillside/hillsideinvestnav.html
> 
> And here's the CSS:
> 
> http://www.starstruckdesign.com/clients/hillside/hillsideinvestnav.css
> 
> Thanks in advance!
> 
> 
> Lynn
> 
> 
> -- 
> Lynn A. Nichols, Starstruck Design
> Gill, MA • 413-863-7752 • lynn at starstruckdesign.com
> http://www.starstruckdesign.com • http://www.shopwesternmass.com
> 
> 
> 
> 
> 
> 
> _______________________________________________
> Hidden-discuss mailing list - home page: http://www.hidden-tech.net
> Hidden-discuss at lists.hidden-tech.net
> 
> You are receiving this because you are on the Hidden-Tech Discussion list.
> If you would like to change your list preferences, Go to the Members   
> page on the Hidden Tech Web site.
> http://www.hidden-tech.net/members

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.hidden-tech.net/pipermail/hidden-discuss/attachments/20111129/92383cc3/attachment-0002.html 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Azurelink.vcf
Type: text/directory
Size: 611 bytes
Desc: not available
Url : http://lists.hidden-tech.net/pipermail/hidden-discuss/attachments/20111129/92383cc3/attachment-0001.bin 
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.hidden-tech.net/pipermail/hidden-discuss/attachments/20111129/92383cc3/attachment-0003.html