2 Replies Latest reply on Oct 26, 2006 1:02 PM by VVebbie

    CSS menus

    edwheels Level 1
      I am trying to find a tutorial on how to create a horizontal navigation menu with dropdowns in CSS. I have found some nice tutorials but none of them go into detail on all the steps in the process. They all tell you to copy and past chunks of code without telling you how to create the code yourself. Creating a CSS navigation menu is nice but if I don’t know how to edit the individual aspects to suit my needs it’s of no use to me. If anyone knows of a tutorial that truly walks you threw every step I would appreciate it.
        • 1. Re: CSS menus
          Level 7
          Check the uberlink and MacFly tutorials at PVII
          ( http://www.projectseven.com/)

          and the Navbar tutorial/articles at Thierry's place
          ( http://tjkdesign.com/articles/dropdown/)

          Or this one (more recent article):
          ( http://tjkdesign.com/articles/Pure_CSS_Dropdown_Menus.asp)

          Or to get it done fast, go here -

          http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm


          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.dreamweavermx-templates.com - Template Triage!
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
          ==================


          "edwheels" <webforumsuser@macromedia.com> wrote in message
          news:ehr34h$iaf$1@forums.macromedia.com...
          >I am trying to find a tutorial on how to create a horizontal navigation
          >menu
          > with dropdowns in CSS. I have found some nice tutorials but none of them
          > go
          > into detail on all the steps in the process. They all tell you to copy and
          > past
          > chunks of code without telling you how to create the code yourself.
          > Creating a
          > CSS navigation menu is nice but if I don?t know how to edit the individual
          > aspects to suit my needs it?s of no use to me. If anyone knows of a
          > tutorial
          > that truly walks you threw every step I would appreciate it.
          >


          • 2. Re: CSS menus
            VVebbie Level 1
            1. Use of child selectors and the hover pseudo-class to show/hide child elements within a list structure
            http://www.w3.org/TR/CSS21/selector.html#child-selectors

            2. (This is a bit trickier) Positioning of the child elements.
            I like to place my child elements in a 0x0 "anchor" element with overflow enabled, and then use that to position the top left corner of the submenu. After that, you can nudge the submenu around using margins, etc.

            Sample css (Note: does not implement behaviors, as I used javascript for this, see below):

            table.calendar div.calendar_positioner
            {
            float: left;
            height: 0px;
            overflow: visible;
            width: 0px;
            }
            table.calendar div.calendar_popup
            {
            border-right: 2px solid #E0E0E0;
            border-bottom: 2px solid #DDDDDD;
            display: none;
            margin-top: -5px;
            margin-left: 33px;
            visibility: hidden;
            position: absolute;
            width: 400px;
            z-index: 300;
            }

            This is for a popup - for a menu a more conventional method is to use a list, however that involved significant modification of display properties, etc, that I don't really want to get into.

            Keep in mind that there is no pure css dropdown menu that works in Internet Explorer 6, as it does not support child selectors or the hover pseudo-class.