SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertical fly-out menu

    Hello,
    I need to make a vertical fly-out menu, the design is in the picture below:



    I've been searching a little around and have come across these two so far:
    http://www.xs4all.nl/~peterned/examples/cssmenu.html
    and
    http://tutorials.alsacreations.com/d...t/cssmenu4.htm

    Never made a vertical fly-out menu before so I'm looking for some suggestions here .
    Anyone used any of those two before? any other you might suggest?

    Regards
    Frederik

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    John has a good round up of dropdown techniques here:

    http://www.tyssendesign.com.au/artic...down-low-down/

    The techniques are just basic css but can be a little fiddly to do. Ie6 needs a helping hand with some javascript.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the link Paul Will check it out.

  4. #4
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ended up using http://www.xs4all.nl/~peterned/examples/cssmenu.html,
    My code so far: http://www.frederikvig.com/flyout/flyout.html

    The problem I'm having is:
    - a:hover on the sub-menues, having problems styling those
    - a on the first ul, the color should be black here, but when I set it to black it also sets the color to black on the children.

    Any help is very much appreciated!

    cheers
    Frederik

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The beauty of nested lists is that you don't need any extra classes in the lists because all the elements are available through descendant selectors. (unless one item is styled differently then it needs a special class such as a current tab.)

    If you set:
    li {color:green;border:2px solid red}

    then for sublists you say:
    li li {color:somethingelse;border:none}

    The same applies for all elements in the nested links uls and anchors alike.

    You need to target everything through the initial ID otherwise you will end up styling all lists on your page.

    Don't use the child selector because ie6 doesn't understand it and its not really needed.

    If you want space between the flyouts you have to use padding on the ul because the flyouts must always be touching or they will disappear before you can reach them.

    I don't really now what your final result is to look like but I woudl do something like this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <style type="text/css">
    * { margin: 0; padding: 0}
    body {
        font-family: Verdana, Arial, Helvetica, sans-serif; 
      font-size: 12px;
    }
        /* the menu */
    
    ul#mainmenu,
    #mainmenu li,
    #mainmenu a {
        display:block;
        min-height:0;
        list-style:none;
    }
    ul#mainmenu {
        width:150px;
        margin:7px;
    }
    ul#mainmenu ul {
       background: #fff;
         margin:0;
         padding:3px;
    }
    #mainmenu    li {
        position:relative;
        text-align: center;
        z-index:9;
        margin:7px 0 0 0;
      height:30px
    }
    #mainmenu    li a    { 
        background: url("http://www.frederikvig.com/flyout/images/first.jpg") no-repeat;
        width:150px;
        height:30px;
        line-height:20px;
    }
    #mainmenu    li:hover a {
        background: url(http://www.frederikvig.com/flyout/images/first-top.jpg) no-repeat; 
     color:#000;
    }
    #mainmenu li li,
    #mainmenu li li a {
        height:auto;
        background:none;
        margin:0;
        line-height:normal;
        width:auto;
    } 
    * html #mainmenu li li,
    * html #mainmenu li li a {height:1&#37;} 
    
    #mainmenu    li li {
      padding: 0px;
        margin:0;
        width:147px;
        background:#80bfd4
    }
    #mainmenu    li:hover li a{background:none;}        
    #mainmenu    li ul {
            position:absolute;
            top:0px;
    }
    #mainmenu    li ul li{padding:3px}        
    #mainmenu    li ul { left:100%; } 
    
    #mainmenu    a {
            padding:4px 0;
            text-decoration:none;
            color:white;
            font-weight:bold;
    }
    #mainmenu li:hover li a{color:#fff}
    #mainmenu li li:hover a{background-color:#eaf5ff;color:#000}
    #mainmenu li:hover li:hover li a{background:#80bfd4;color:#fff}
    #mainmenu li:hover li:hover li:hover a{background-color:#eaf5ff;color:#000}
    #mainmenu li:hover { z-index:10; }        
            
    ul#mainmenu    ul,#mainmenu li:hover ul ul {
        display:none;
    }
    #mainmenu    li:hover ul,#mainmenu li:hover li:hover ul {
        display:block;
    }        
            
        </style>
    </head>
    <body>
    <ul id="mainmenu">
        <li><a href="#">CHANNELS</a>
            <ul>
                <li><a href="#">E-mail</a>
                    <ul>
                        <li><a href="#">Promo-mail</a></li>
                        <li><a href="#">Program mail</a></li>
                    </ul>
                </li>
                <li><a href="#">Newsletters</a></li>
                <li><a href="#">DM's</a></li>
                <li><a href="#" >Event</a>
                    <ul>
                        <li><a href="#">WEB Cast</a></li>
                        <li><a href="#">Program mail</a></li>
                    </ul>
                </li>
                <li><a href="#">Online</a>
                    <ul>
                        <li><a href="#">Page</a></li>
                        <li><a href="#">Call to action</a></li>
                    </ul>
                </li>
                <li><a href="#">Advertising</a></li>
                <li><a href="#">PR</a></li>
            </ul>
        </li>
        <li><a href="#">TOOLS</a>
            <ul>
                <li><a href="#">MAPSS</a></li>
                <li><a href="#">C-Star</a></li>
                <li><a href="#">EMMA</a></li>
                <li><a href="#">PENS</a></li>
                <li><a href="#">Regsys</a>
                    <ul>
                        <li><a href="#">BANT</a></li>
                    </ul>
                </li>
                <li><a href="#">WWE</a></li>
                <li><a href="#">DMC</a></li>
                <li><a href="#">UBT</a></li>
            </ul>
        </li>
        <li><a href="#">DATABASES</a>
            <ul>
                <li><a href="#">Customer Database (MSI)</a></li>
                <li><a href="#">Customer Database (MSO)</a></li>
                <li><a href="#">Sales Database (SIEBEL)</a></li>
            </ul>
        </li>
        <li><a href="#">INPUT DATA</a>
            <ul>
                <li><a href="#">LIVE ID (customer)</a></li>
                <li><a href="#">Regsys</a></li>
            </ul>
        </li>
        <li><a href="#">BG</a>
            <ul>
                <li><a href="#">Servers &amp; tools</a></li>
                <li><a href="#">Windows</a></li>
                <li><a href="#">Information worker</a></li>
                <li><a href="#">Security</a></li>
                <li><a href="#">CRM</a></li>
            </ul>
        </li>
        <li><a href="#" >TARGET AUDIENCE</a>
            <ul>
                <li><a href="#">Partner</a></li>
                <li><a href="#">IW</a></li>
                <li><a href="#">IT-PRO</a></li>
                <li><a href="#">Developer</a></li>
                <li><a href="#">TDM</a></li>
                <li><a href="#">BDM</a></li>
                <li><a href="#">Students</a></li>
                <li><a href="#">Consumer</a></li>
            </ul>
        </li>
        <li><a href="#">SEGMENT</a>
            <ul>
                <li><a href="#">EPG Public</a></li>
                <li><a href="#">EPG Private</a></li>
                <li><a href="#">BigIT</a></li>
                <li><a href="#">SomeIT</a></li>
                <li><a href="#">LRG</a></li>
                <li><a href="#">Consumer</a></li>
                <li><a href="#">SOHO</a></li>
            </ul>
        </li>
        <li><a href="#">PRIVACY</a>
            <ul>
                <li><a href="#">Privacy</a></li>
            </ul>
        </li>
    </ul>
    </body>
    </html>
    Obviously I can't check ie6 because there is no hover routine added yet.

  6. #6
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much Paul
    Was playing a little along with:
    #mainmenu>li a:hover {
    color: #000000;
    }
    #mainmenu li * a:hover{
    background-color: #eaf5ff;
    }

    Which sort of worked, but your code is much cleaner and better. Also thanks for the explanation , I'm reading http://reference.sitepoint.com/css/specificity to learn more.


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
  •