Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorspencerb
    • CommentTimeDec 31st 2007 edited
     permalink
    Hi, I don't know if this is even possible or not, but I am trying to get Sons of Suckerfish to work for this main navigation: http://www.legacymultimedia.com

    If you notice when you hover over the Services link, some horizontal sub-menu items show up, which is somehow controlled by Javascript from the designer who worked on this site before I came along.

    So, I've come along and really cleaned up the code a ton, removing nested tables and turning the main navigation into one image, using the Matrix Navigation technique, where you use one image for the navigation, and then use background positioning in CSS for the hover and on state. Very clever indeed...

    Here is the link to the newly marked up page: http://www.legacymultimedia.com/index-new.html

    However, I can't get the horizontal sub-menu items (which are just text) to drop down horizontally. I've told that I need to have Sons of Suckerfish implemented to allow that text to come down below the main navigation, but I'm not sure if you can do it with the Matrix Navigation technique that I've set up.

    Anyways, any help would greatly be appreciated on this...

    Thanks,
    Spencer
    http://barefoot-webdesign.com
  1.  permalink
    I'm confused.. I don't see any sub lists? Are you saying you tried implementing the drop downs, or are you just asking if it is possible?

    Its possible, I use it all the time with the same one image technique.
    Here is an example. http://www.premcom.com/
  2.  permalink
    Spencer,

    The XHTML needs some adjusting. The secondary (hover) navigation needs to be nested within the primary navigation. It should look something like this:

    <ul id="nav">
    <li><a href="#">About Legacy</a></li>
    <li><a href="#">Services</a>
    <ul>
    <li><a href="#">Custom DVD Packages</a></li>
    <li><a href="#">Milestone DVDs</a></li>
    <li><a href="#">etc.</a></li>
    </ul>
    </li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">etc.</a></li>
    </ul>

    You then use the CSS to hide the interior list (display: none), and then show the interior list on rollover (display: block). There are a TON of good examples of this if you Google it. Or just use the original SoS example. You'll need some JS to get the hover effect to work in IE6.
    • CommentAuthorspencerb
    • CommentTimeJan 3rd 2008 edited
     permalink
    Hey Scott, thanks for the recommendations. I changed the menu to reflect the changes that need to be made, and then added the suckerfish.js file in the head, and you can now see what it's doing. Do you have any ideas as to why it's doing this. Thanks for your help.

    http://www.legacymultimedia.com/index-new.html
Add your comments
    Username Password
  • Format comments as (Help)