SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    Now available in Orange Tijmen's Avatar
    Join Date
    Jul 2004
    Location
    The Netherlands
    Posts
    1,469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    second level nav not showing??

    I'm trying to get this menu to work, but it fails to show the second level.
    What am I doing wrong here?

    http://www.tijmensmit.com/dev/navmenu_test.html
    Travel Photos on Flickr - Twitter

    “Never give up. Never surrender”

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Location
    Kent, UK
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Tijmen,

    There's a few problems here; mostly I think you are trying to mix too many techniques and tripping over your own toes.

    Specific issues:

    1. You have set
      nav li a span {display:none;}
      and haven't turned this off anywhere. This means that your L2 text navigation will never show.
    2. You are using absolute positioning on nav li ul. This will position within the containing positioned block, which is the whole page. You have set left:0, but have not set a position relative to 'top'. This means your subnav will display in top-left corner of the page, not below the top nav where you want it.
    3. Your rule to turn on sub-nav looks wrong. You are turning off sub-nav with:
      #nav .hide li {
      visibility:hidden;
      }
      You are attempting to turn it back on with:
      #nav ul:hover .hide li {
      visibility:visible;
      }

      Looking at the structure of your html, I think this should be targeting #nav li:hover .hide li
    4. You have nothing in place to deal with selected state - i.e when the user stops hovering and actually clicks a particular top level nav.

    Additionally, although this is incidental to your issue hiding sub-nav, you are using Javascript for mouse-over effects on Level 1 Nav images. In fact, the images you are using appear to have been designed for pure CSS mouseover, with the 'off state' and 'on state' included in a single image. All you need to do to get your mouseover is use these as background images, and then adjust the background-position when :hover state is triggered to move the image up and display the 'on state'.

    To get all this working, I would suggest the following steps:

    1. Strip your CSS back to the essentials.
    2. Build your Level 1 navigation, and Level 2 navigation for one Level 1 item only.
    3. Get your nav to display the way you want, making sure if you use absolute positioning you specify top and left offsets, and keep in mind which is the containing positioned block.
    4. Only when your nav looks right, work on the rules to hide/show your Level 2 nav.
    5. Don't confuse yourself by using both 'display' and 'visibility' rules. (I prefer 'display' rules, but that is personal.)


    And enjoy the journey!
    Paul Clark, BlueCamroo Inc
    All-in-one Online CRM, Social CRM and Project Management solution

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    And I would recommend against using the display: none/display: block method of hiding/showing the submenu. First, I have yet to get a menu to display its subs via keyboard, even when adding :focus to everything (likely this is just my bad coding)... if :focus fails to show the dropdown, then a screen reader who's browsing via a CSS-enabled browsers (such as JAWS via IE6/7) then display: none will effectively keep everything in hiding.

    Second, Haslayout is always there, lurking in the bushes. But it gets worse when you change the display property. It causes you to need to set something else for IE alone: either visibility:visible, or change the colour of the text, or something like that.

    I've gone to using the left: -gazillion px, and then left: 0 upon :hover. I also find I need to trigger Haslayout no matter what I do, on the :hover itself. : (

    I've got a javascript-removed version of Suckerfish I made, in preperation for using it on a server with whatever:hover for IE6... and a barebones too if you want.

    I also dunno why Javascript is being used to move what should be background image...????

  4. #4
    Now available in Orange Tijmen's Avatar
    Join Date
    Jul 2004
    Location
    The Netherlands
    Posts
    1,469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I also dunno why Javascript is being used to move what should be background image...????
    That's a long story, and not really what I would normally have done. But lets just say that I was forced to do is that way.... Its has a lot to do with the CMS thats being used, and that it needs to be able to change the name of the images being used in the menu.

    Thanks for the explanation both of you
    Travel Photos on Flickr - Twitter

    “Never give up. Never surrender”

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

    The main problem is that you have set #nav ul to a fixed height of 36px and then used overflow:hidden so that your strange image swap technique works because half of your image is hidden etc. This means that your lower nav levels will never be seen because you have hidden the overflow.

    You will need to set the overflow:hidden on the anchor in question and not the main ul. This will allow the drop down to show.

    You are also addressing the wrong elements to make the dropdown show and you simply need to address the nested ul (no need for classes on the nested ul's either unless you want unique styling).

    I don't know what type of menu you wanted but I have changed the code so that everything is at least working and you can change the styling to suit now.

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
    dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
    a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
    strong, sub, sup, tt, var {
        margin: 0;
        padding: 0;
    }
    
    body {
        background-color: #566171;
        /*behaviour:url("javascript/csshover.htc");*/
    }
    
    * {margin:0;padding:0;}
    img {border:0;display:inline;}
    #nav {height:112px;width:921px;background-color:#000;}
    #nav a {color:#fff;}
    #nav ul {
        background-color:#000;
        text-transform:uppercase;
        height:36px;
        width:921px;
        position:relative;
    }
    #nav ul li {
        float:left;
        width:auto;
        height:36px;
        }
    #nav ul li a {
        float:left;
        height:36px;
        overflow:hidden;
    }
    #nav li ul {    
        display: block;
        height:auto;
        position: absolute;
        margin-left:-999em;
        top:2em;    
        left:0;
        width:921px;
        background-color: #1f1e1f;
        z-index:1000;
    }
    #nav ul li li{margin:0 10px;}
    #nav li a span {display:none}
    #nav li li a span {display:block}
    #nav li:hover ul {margin-left:0;}
    
    </style>
    <script type="text/javascript">
    function moveImg(t) { t.style.marginTop='-36px'; }
    function restoreImg(t) { t.style.marginTop='0px'; }
    </script>
    </head>
    <body>
    <div id="nav">
        <ul>
            <li id="equipment-to-rent"><a href="#"><img src="http://www.tijmensmit.com/dev/site_images/nav_equipment_home_en.gif" width="191" height="72" onmouseover="moveImg(this)" onmouseout="restoreImg(this)" alt="Equipment to rent"/><span>Equipment to Rent</span></a>
                <ul class="hide">
                    <li id="cooling"><a href="#" title=""><span>Cooling</span></a></li>
                    <li id="heating"><a href="#" title=""><span>Heating</span></a></li>
                </ul>
            </li>
            <li id="industries-served"><a href="#" title=""><img src="http://www.tijmensmit.com/dev/site_images/nav_industries_home_en.gif" width="191" height="72" onmouseover="moveImg(this)" onmouseout="restoreImg(this)" alt="Industries server"/><span>Industries served</span></a>
                <ul class="hide">
                    <li id="industry"><a href="#" title=""><span>Industry</span></a></li>
                    <li id="power-plants"><a href="#" title=""><span>Power plants</span></a></li>
                    <li id="utilities"><a href="#" title=""><span>Utilities</span></a></li>
                    <li id="events"><a href="#" title=""><span>Events</span></a></li>
                    <li id="shipping"><a href="#" title=""><span>Shipping</span></a></li>
                </ul>
            </li>
            <!--
             <li id="contact-us"><a href="#" title=""><img src="http://www.tijmensmit.com/dev/site_images/nav_contact_en.gif" width="173" height="72" onmouseover="moveImg(this)" onmouseout="restoreImg(this)" /><span>Contact us</span></a>
                <ul id="hide">    
                    <li id="request-info"><a href="#" title="">Request for info</a></li>
                    <li id="contact-info"><a href="#" title="">Contact info</a></li>
                    <li id="depot-locator"><a href="#" title="">Depot Locator</a></li>
                </ul>
            </li>    
            
            <li id="about-energyst"><a href="#" title=""><img src="http://www.tijmensmit.com/dev/site_images/nav_about_en.gif" width="173" height="72" onmouseover="moveImg(this)" onmouseout="restoreImg(this)" /><span>About energyst</span></a>        
                    <ul id="hide">    
                        <li id="company-info"><a href="#" title="">Company info</a></li>
                        <li id="why-rent"><a href="#" title="">Why rent</a></li>
                        <li id="our-partners"><a href="#" title="">Our partners</a></li>
                        <li id="locations"><a href="#" title="">Locations</a></li>
                        <li id="latest-news"><a href="#" title="">Latest news</a></li>
                    </ul>
                </li>    -->
            <li id="jobs"><a href="#" title=""><img src="http://www.tijmensmit.com/dev/site_images/nav_jobs_en.gif" width="173" height="72" onmouseover="moveImg(this)" onmouseout="restoreImg(this)" alt="" /><span>About energyst</span></a></li>
        </ul>
    </div>
    </body>
    </html>
    As mentioned in above posts instead of using visibility we simply move the element off screen when we don't want it and then bring it back when needed.

    I haven't tested in IE either because you can't link to a behaviour file from my local version but if you have any problems then shout and I'll set up a local behavior file to check.

    Hope that helps

  6. #6
    Now available in Orange Tijmen's Avatar
    Join Date
    Jul 2004
    Location
    The Netherlands
    Posts
    1,469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul! I make a couple of changes and it works fine in Firefox and IE7. But I jus can't get the second nav to show up in IE6, even with the csshover.htc included. Also in Opera 9.26 weird things happend with the menu when you hover over the links?

    http://www.tijmensmit.com/dev/navmenu.html
    Travel Photos on Flickr - Twitter

    “Never give up. Never surrender”

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You have spelled behavior incorrectly.

    Code:
    <style>
    body {behaviour:url("csshover.htc");}
    </style>
    behavior not behaviour.

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    How is that affecting Opera though, if the behavior part is sitting in an IE conditional comment?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The behavior was for IE only.

    Opera can be fixed by adding a width it seems.

    Code:
    #nav ul li {width:200px}
    #nav ul li li{width:auto}
    Haven't had much time to fine a better solution due to personal circumstances this week.

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Ah! So that's the Opera bug HTMLdog was talking about in Sons of Suckerfish!

    That kinda sux though. Sometimes you have texts of different widths... we wouldn't want to set classes on everything just to change widths because there's a long word. But I know there are menus out there with just side padding and a float: none on the next level li and I've seen them work okay in Opera... so is it simply the lack of width setting Opera into frenzie or is it lack of width in a certain situation?

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme Poes
    so is it simply the lack of width setting Opera into frenzie or is it lack of width in a certain situation?
    The problem in Opera (now that I've had time to look properly) is that it doesn't like the anchor to be floated inside the floated list. If you change the inner anchor to display:block and not floated then it seems to work ok.

    Of course this breaks IE6 and under because they will expand the float to 100&#37; width when a child has a "layout".

    Therefore you would need to do something like this:

    Code:
    #nav ul li a {
        /* float:left */
            display:block;
        height:42px;
        overflow:hidden;
    }
    * html #nav ul li a {float:left}
    The above seems to fix the opera issue completely without the need for a width.


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
  •