SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Flyout Menus

  1. #1
    SitePoint Enthusiast EvoVII's Avatar
    Join Date
    Jun 2003
    Location
    Illinois
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Flyout Menus

    Does anyone have a good solution for vertical flyout menus? I have some dynamic menus that I would like to flyout to 3 levels. I have been experimenting, but it seems I am not getting anywhere. Any help or example sites would be appreciated. Thanks in advance!

    EvoVII

  2. #2
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using the show/hide layers function of DW will allow you to build such menus.
    I have a demo of such a flyout menu here:
    http://www.dreamweaverresources.com/demos/elegante/
    Easy enough to add more levels once you get the hang of it

    You can also learn to build them yourself using some extensions from pvii.
    look for auto layers... pretty much what DW does with show/hide, but makes them faster to build.

    Hope this helps.

    Nadia

  3. #3
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Completely ignore my post if you were asking about CSS menus - sorry :-)

    Nadia

  4. #4
    Are You There? KDesigns's Avatar
    Join Date
    Oct 2003
    Location
    Your Monitor
    Posts
    1,146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Check out AListApart. The have a good tutorial called "Suckerfish Dropdowns" that walks you through the whole process.

    If you don't feel like digging through their site you could also just do a Google for "Suckerfish Dropdowns". The page should be in the top few.

    If you look here it is a horizontal slider menu that I did built off of a bullet point list in CSS.
    ChooseDaily.com - Follow on Twitter
    Top Resources for Web Designers and Developers Every Day!

  5. #5
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by KDesigns
    If you look here it is a horizontal slider menu that I did built off of a bullet point list in CSS.
    That's a really nice looking site and the menu is great! Appears to be cross browser (FFox, IE6 and Opera

    Did you do that using the suckerfish method?

    Nadia

  6. #6
    Are You There? KDesigns's Avatar
    Join Date
    Oct 2003
    Location
    Your Monitor
    Posts
    1,146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! The basic structure is very similar to that of the suckerfish method. I did some alterations here and there to make it fit, but the suckerfish tutorial is a very good walk-through on creating menus through CSS.

    The great thing is that other than a small bit necessary for everything to work in IE there's no JavaScript (10-12 lines) .
    ChooseDaily.com - Follow on Twitter
    Top Resources for Web Designers and Developers Every Day!

  7. #7
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by KDesigns
    The great thing is that other than a small bit necessary for everything to work in IE there's no JavaScript (10-12 lines) .
    Did notice that in the tut... that was one thing I didn't try, what happens if javascript is turned off?? Will do that tomorrow using FFox with js disabled... I can see myself following the tut tomorrow - when I should be doing other stuff !!

    Nadia

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Nadia P
    Did notice that in the tut... that was one thing I didn't try, what happens if javascript is turned off?? Will do that tomorrow using FFox with js disabled... I can see myself following the tut tomorrow - when I should be doing other stuff !!

    Nadia
    If JS is turned off and the proper CSS for flyout menus isn't used (or if you're using a browser like IE that wouldn't support the CSS for it anyway), then they just see the main links. Be sure to provide the inner links somewhere else once a user has gone to a page linked from the main nav.

  9. #9
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks !

    Hopefully I'll have time to play with this today sometime...


    Nadia


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •