SitePoint Sponsor

User Tag List

Page 9 of 11 FirstFirst ... 567891011 LastLast
Results 201 to 225 of 268
  1. #201
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Anton P View Post
    Thanks for the detailed info; I'll work through it as soon as I can!

    Just one quick point:



    Of course! The fixes are required for IE7: the CSS rules make hover work in IE7 while the JavaScript helps to improves focus.
    yes, that is obvious

    what i thought was that if i can add my own css only fixes for IE7 that fix both :hover and :focus (where i mean :active), it would be better than relying on javascript for anything except pretty effects.
    but it so happened that to apply my fixes, you would need to use my merged version, which had this IE7 bug in IE5-6 too, BUT instead of adding a ton of "IE5-6 only" css i thought that it does not matter that IE5-6 have the same bug, as now i can fix IE5-7 with the same conditional comments, and i think people prefer to support IE7 more than IE5-6, which means that the conditional comments are there to stay anyway.

    so the only thing that changes is the number in the [IF lte IE#] conditional comments, it just makes more sense to me!
    plus because i turned the fix to use percentage widths, it also means that the user tweaking the dropdown will not have to touch the fixes, so essentially you just need to add this piece of code for every additional level that you want.


    Code CSS:
    .
    .nav .sub {
        width:99%;/*1 level*/
    }
    .nav .sub .sub {
        width:98%;/*2 level*/
    }
    .nav .sub .sub .sub {
        width:97%;/*3 level*/
    }
    /*only ie5-6 need below*/
    .nav ul ul a {
    	left:400px;/*1 level*/
    }
    .nav ul ul ul a {
    	left:800px;/*2 level*/
    }
    .nav ul ul ul ul a {
    	left:1200px;/*3 level*/
    }
    .nav ul ul ul ul ul a {
    	left:1600px;/*4 level*/
    }
    which is still better than javascript, as i can just add a ton of them by default, and i doubt anyone is going to use more than 5 sub levels...

    i see no way to get rid of the IE7 bug,
    still, i would love to get rid of this:
    Code CSS:
    .nav ul ul {
    	position:relative;
    	left:-400px;
    }
    .nav ul ul a {
    	left:400px;/*1 level*/
    }
    .nav ul ul ul a {
    	left:800px;/*2 level*/
    }
    .nav ul ul ul ul a {
    	left:1200px;/*3 level*/
    }
    .nav ul ul ul ul ul a {
    	left:1600px;/*4 level*/
    }
    it is a problem only in IE5-6, where the <li> blocks the links, when the li is transparent, it only affects the "padding space" on the links.

    just remove the above code from the dropdown, and add this:

    Code CSS:
    .nav .sub {
        background:purple;
    }
    then look at it in IE5-6, and it will be plain obvious on what is wrong.
    are you up to this anton? because this is the best i could come up with.

    so if you have any suggestions then fire away.

  2. #202
    SitePoint Member
    Join Date
    Nov 2009
    Location
    Philippines
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello, i've been reading almost all of the posts of this thread since yesterday. You've made an impressive discovery YuriKolovsky, very useful. I just want to suggest additional improvement on usability, satisfying the Smashing Magazine's Designing Drop-Down Menus Best Practices Option 2: Clickable Menu. I removed the :hover on the top level links and retain :focus and :active to simulate the clickable menu feature and added pseudo close button [x] so as to guide the less savvy users on closing the menu. Unfortunately, webkit browsers such as Safari and Chrome are not handling :focus correctly. I've added a hack to disable clickable menu feature on webkit browsers.

    Here's the code:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TH - CSS Only Multilevel Dropdown</title>
    <style type="text/css">
    /***reset default styling***/
    .nav,
    .nav ul{
        list-style-type:none;
        margin:0;
        padding:0;
    }
    .nav a {
        text-decoration:none;
    }
    /*CUSTOMIZATION*/
    /*i have split the code to have the width/height/color separate from the rest of the code*/
    /*COLORS*/
    /*here are some default colors, funky colors used for distinctive visibility*/
    /*i hope that you can handle colors customization on your own :p*/
    .nav {
        background:yellow;
    }
    .nav a {
        background:#9C3;
        color:#000;
    }
    .nav ul {
        background:red;/*top link persistent background color*/
    }
    .nav a.main {
        background:transparent;/*so that the top link persistent background works*/
    }
    .nav ul a.main {
        background:yellow;
    }
    .nav a.main:hover {
        background:orange;
    }
    .nav .sub ul a {
        background:#CC6;
    }
    .nav .sub ul a.main {
        background:yellow;
    }
    .nav .sub ul a.main:hover {
        background:orange;
    }
    .nav a:hover,
    .nav a:focus,
    .nav a:active{
        background:orange;
    }
    .nav .sub li a:hover,
    .nav .sub li a:focus,
    .nav .sub li a:active{
        background:#C93;
    }
    .nav .sub .sub ul a {
        background:#099;
        color:#fff;
    }
    .nav .sub .sub ul a:hover,
    .nav .sub .sub ul a:focus,
    .nav .sub .sub ul a:active{
        background:#06F;
    }
    .nav .sub .sub .sub ul a {
        background:#036;
    }
    .nav .sub .sub .sub ul a:hover,
    .nav .sub .sub .sub ul a:focus,
    .nav .sub .sub .sub ul a:active{
        background:#006;
    }
    .nav .colored li a {
        background:purple;
    }
     
     
     
    /*HEIGHT*/
    .nav {
        height:25px;/*you could remove this and clear the float differently, but to me this makes the most sense*/
    }
    .nav a {
        padding:.2em 0;/*apply padding to links, to vertically center them, be careful with horizontal padding in IE5, correct width must be maintained*/
    }
    .nav a.main {
        height:25px;/*needs to be the same as the persistent background trick and so that the sublevels are properly aligned*/
        line-height:25px;/*not really necessary, but in this specific case it vertically centers the main link text*/
        overflow:hidden;/*making it more bulletproof*/
        padding:0;/*remove the padding that was applied above*/
    }
    .nav ul {
        padding-top:25px;/*persistent background trick*/
        margin-top:-25px;/*persistent background trick*/
    }
    .nav ul ul li {
        top:-25px;/*this is the sole reason why the main links must have a fixed height*/
    }
     
     
    /*WIDTH (!IMPORTANT)*/
    /*change each width value below, else the dropdown will stop working (:hover will still work in modern browsers because of the opera fix)*/
    /*set the link width here*/
    .nav .link,
    .nav a {
        width:150px;/*same as width*/
    }
    .nav ul li {
    /*force ie8 to float-drop*/
        max-width:150px;/*same as width*/
    }
    /*set the sublink left shift width here (same as width)*/
    .nav ul ul li {
    /*move the sublinks to the side, so they dont overlap*/
        left:150px;/*same as width*/
    }
    .nav li.reversed li {/*reverse the direction of sublinks for the last dropdown*/
        left:auto;
        right:150px;/*same as width*/
    }
    /*add the negative value of "width - 1px" here (because css can't do math)*/
    .nav a {
    /*makes the links very thin, so that the sublinks can hide inside the main link*/
        margin-right:-149px;/*make this width - 1px*/
    }
     
     
    /*Dropper Dropdown*/
    /*supports up to 4 sub-levels in IE5-7, more can be added*/
    /*modern browsers already support any amount of sublevels*/
    /*made by Timo Huovinen*/
     
    .nav li {
        float:left;/*fixes several IE related bugs, and allows for clearing*/
    }
    .close-menu,
    .nav ul {
        float:left;/*necessary for float drop*/
    }
    .nav ul li {
        clear:left;/*must clear the floated list item inside sublist*/
    }
    .nav a {
        position:relative;/*needs to have a position, to be above the rest*/
        display:inline-block;/*could be block, but i trust this more*/
    }
    .nav ul li li {
        position:relative;/*so that it can be moved using top: and left:*/
    }
    .nav a.main {
        float:left;/*necessary for float drop*/
        margin-top:10000px;/*bring the links back into view*/
    }
    
    .nav .link,
    .nav .sub {
        margin-top:-10000px;/*hide the links and their containers, opera has low upper limits*/
    }
    .close-menu,
    .nav ul {
        margin-bottom:-5000px;/*avoid any interaction between the sub's, can be any large size*/
    }
    /*the main trick, removes the negative right-margin and causes float drop*/
    .nav .link ul a:hover{
        margin-right:0;
    }
    
    .nav a:focus,
    .nav a:active{
        margin-right:0;
    }
    .close-menu { margin-left:-19px; } /* Width of .close-menu span minus 1px */
    .close-menu span { 
    	cursor: pointer; 
    	display: inline-block; 
    	float:left; 
    	left: 140px;
    	position:relative; 
    	top: -25px;
    	width: 20px;
    }
    
    
    /*OPERA fix*/
    .nav ul:hover,
    .nav ul ul:hover {
        clear:left;/*fix for opera sublinks flickering on :hover*/
    }
    /*firefox "opera fix" inconsistency fix, and hides anything that might be unwanted*/
    .nav .sub {
        visibility:hidden;
    }
    .nav .sub a {
        visibility:visible;
    }
    
    @media screen and (-webkit-min-device-pixel-ratio:0) {
    	/* :focus is not handled correctly by Safari/Google Chrome/webkit browsers. */
    	/* Disable Clickable Menu feature. */
    	.nav a:hover { margin-right:0; }
    	.close-menu { position: absolute; }
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    /*IE5-6 + 7 bug fixes*/
    
    .nav ul:hover,
    .nav ul ul:hover {
        clear:none;/*IE doesn't need Opera fix for sublinks flickering on :hover*/
    }
    
    /*sublevel support, add more to support more sublevels*/
    .nav .sub {
    /*add the negative value of "100&#37; - 1%" here*/
        width:99%;
    }
    .nav .sub .sub {
    /*add the negative value of "100% - 2%" here*/
        width:98%;
    }
    .nav .sub .sub .sub {
    /*add the negative value of "100% - 3%" here*/
        width:97%;
    }
     
     
    /*IE5-6 overlay problems fix, i would have used visibility:hidden, but that bugs ie5-6 out*/
    /*and it does not hurt ie7 in any way*/
    .nav ul ul {
        position:relative;
        left:-400px;
    }
    /*each sublevel needs +400px size, if you add more sublevels you have to add more of these, or find another way to fix ie5-6 overlay problem*/
    /*sublevel support, add more to support more sublevels*/
    .nav ul ul a {
        left:400px;
    }
    .nav ul ul ul a {
        left:800px;
    }
    .nav ul ul ul ul a {
        left:1200px;
    }
    .nav ul ul ul ul ul a {
        left:1600px;
    }
    /*ie does not support visibility properly*/
    .nav .sub {
        visibility:visible;
    }
    /*background for sub levels no longer needed*/
    .nav ul ul {
        background:transparent;
    }
    /*empty rule to fix occassional IE6 tabbing bug, one of the weirdest bug's i have seen.
    it seems that this indexes the links together as one?*/
    a, a:hover, a:active, a:focus {}
    </style>
    <![endif]-->
    <!--I would also suggest adding some javascript to delay the closing of the sublinks, just to make it even better-->
    </head>
    <body>
    <a href="#background1">background 1</a>
    <ul class="nav">
    <li class="link">
        <a  class="main" href="#">Main</a> <div class="close-menu"><span title="Close the menu">[x]</span></div>
        <ul>
            <li><a href="#1">test1</a></li>
            <li><a href="#2">test2</a></li>
            <li class="sub"><a class="main" href="#3">main 1 &#187;</a>
                        <ul class="colored">
                            <li><a href="#subtest1">sub test 1</a></li>
                            <li><a href="#subtest2">sub test 2</a></li>
                            <li><a href="#subtest3">sub test 3</a></li>
                            <li><a href="#subtest4">sub test 4</a></li>
                            <li class="sub"><a class="main" href="#sub4">SUB main 1 &#187;</a>
                                        <ul>
                                            <li><a href="#subtest1">sub sub test 1</a></li>
                                            <li><a href="#subtest2">sub sub test 2</a></li>
                                            <li><a href="#subtest3">sub sub test 3</a></li>
                                            <li><a href="#subtest4">sub sub test 4</a></li>
                                            <li><a href="#subtest5">sub sub test 5</a></li>
                                            <li><a href="#subtest6">sub sub test 6</a></li>
                                        </ul>
                            </li>
                            <li><a href="#subtest5">sub test 5</a></li>
                            <li><a href="#subtest6">sub test 6</a></li>
                        </ul>
            </li>
            <li class="sub"><a class="main" href="#4">main 2 &#187;</a>
                        <ul>
                            <li class="sub"><a class="main" href="#sub4">SUB main 2 &#187;</a>
                                        <ul>
                                            <li><a href="#subtest1">sub sub test 1</a></li>
                                            <li><a href="#subtest2">sub sub test 2</a></li>
                                            <li><a href="#subtest3">sub sub test 3</a></li>
                                            <li><a href="#subtest4">sub sub test 4</a></li>
                                            <li><a href="#subtest5">sub sub test 5</a></li>
                                            <li><a href="#subtest6">sub sub test 6</a></li>
                                        </ul>
                            </li>
                            <li><a href="#subtest1">sub test 1</a></li>
                            <li><a href="#subtest2">sub test 2</a></li>
                            <li><a href="#subtest3">sub test 3</a></li>
                            <li><a href="#subtest4">sub test 4</a></li>
                            <li><a href="#subtest5">sub test 5</a></li>
                            <li><a href="#subtest6">sub test 6</a></li>
                        </ul>
            </li>
            <li><a href="#5">test5</a></li>
            <li><a href="#6">test6</a></li>
            <li><a href="#7">long text link showing what happens</a></li>
            <li><a href="#8">test8</a></li>
            <li class="sub"><a class="main" href="#9">Everything is possible</a>
                        <ul>
                            <li><a href="#subtest1">sub test 1</a></li>
                            <li><a href="#subtest2">sub test 2</a></li>
                            <li><a href="#subtest3">sub test 3</a></li>
                            <li class="sub"><a class="main" href="#sub4">SUB test4 &#187;</a>
                                        <ul>
                                            <li><a href="#subtest1">sub sub test 1</a></li>
                                            <li><a href="#subtest2">sub sub test 2</a></li>
                                            <li><a href="#subtest3">sub sub test 3</a></li>
                                            <li class="sub"><a class="main" href="#sub7">Ultra SUB test7 &#187;</a>
                                                        <ul>
                                                            <li><a href="#subtest1">sub sub test 1</a></li>
                                                            <li><a href="#subtest2">sub sub test 2</a></li>
                                                            <li><a href="#subtest3">sub sub test 3</a></li>
                                                            <li><a href="#subtest4">sub sub test 4</a></li>
                                                            <li><a href="#subtest5">sub sub test 5</a></li>
                                                            <li><a href="#subtest6">sub sub test 6</a></li>
                                                        </ul>
                                            </li>
                                            <li class="sub"><a class="main" href="#sub7">Ultra SUB test8 &#187;</a>
                                                        <ul>
                                                            <li><a href="#subtest1">sub sub test 1</a></li>
                                                            <li><a href="#subtest2">sub sub test 2</a></li>
                                                            <li><a href="#subtest3">sub sub test 3</a></li>
                                                            <li><a href="#subtest4">sub sub test 4</a></li>
                                                            <li><a href="#subtest5">sub sub test 5</a></li>
                                                            <li><a href="#subtest6">sub sub test 6</a></li>
                                                        </ul>
                                            </li>
                                            <li><a href="#subtest4">sub sub test 4</a></li>
                                            <li><a href="#subtest5">sub sub test 5</a></li>
                                            <li><a href="#subtest6">sub sub test 6</a></li>
                                        </ul>
                            </li>
                            <li><a href="#subtest5">sub test 5</a></li>
                            <li><a href="#subtest6">sub test 6</a></li>
                            <li class="sub"><a class="main" href="#sub7">SUB test7 &#187;</a>
                                        <ul>
                                            <li><a href="#subtest1">sub sub test 1</a></li>
                                            <li><a href="#subtest2">sub sub test 2</a></li>
                                            <li><a href="#subtest3">sub sub test 3</a></li>
                                            <li><a href="#subtest4">sub sub test 4</a></li>
                                            <li><a href="#subtest5">sub sub test 5</a></li>
                                            <li><a href="#subtest6">sub sub test 6</a></li>
                                        </ul>
                            </li>
                        </ul>
            </li>
        </ul>
    </li>
    <li class="link">
        <a class="main" href="#">Main</a> <div class="close-menu"><span title="Close the menu">[x]</span></div>
        <ul>
            <li><a href="#1">test1</a></li>
            <li><a href="#2">test2</a></li>
            <li><a href="#3">test3</a></li>
            <li><a href="#4">test4</a></li>
            <li><a href="#5">test5</a></li>
            <li><a href="#6">test6</a></li>
            <li><a href="#7">test7</a></li>
        </ul>
    </li>
    <li class="link reversed">
        <a class="main" href="#">Main</a> <div class="close-menu"><span title="Close the menu">[x]</span></div>
        <ul>
            <li><a href="#1">test1</a></li>
            <li><a href="#2">test2</a></li>
            <li><a href="#3">test3</a></li>
            <li class="sub"><a class="main" href="#4">test4 &#187;</a>
                        <ul>
                            <li><a href="#subtest1">sub test 1</a></li>
                            <li><a href="#subtest2">sub test 2</a></li>
                            <li><a href="#subtest3">sub test 3</a></li>
                            <li><a href="#subtest4">sub test 4</a></li>
                            <li><a href="#subtest5">sub test 5</a></li>
                            <li><a href="#subtest6">sub test 6</a></li>
                        </ul>
            </li>
            <li><a href="#5">test5</a></li>
            <li><a href="#6">test6</a></li>
            <li class="sub"><a class="main" href="#7">test7 &#187;</a>
                        <ul>
                            <li><a href="#subtest1">sub2 test 1</a></li>
                            <li><a href="#subtest2">sub2 test 2</a></li>
                            <li><a href="#subtest3">sub2 test 3</a></li>
                            <li class="sub"><a class="main" href="#sub7">SUB test7 &#187;</a>
                                        <ul>
                                            <li><a href="#subtest1">sub sub test 1</a></li>
                                            <li><a href="#subtest2">sub sub test 2</a></li>
                                            <li><a href="#subtest3">sub sub test 3</a></li>
                                            <li><a href="#subtest4">sub sub test 4</a></li>
                                            <li><a href="#subtest5">sub sub test 5</a></li>
                                            <li><a href="#subtest6">sub sub test 6</a></li>
                                        </ul>
                            </li>
                            <li><a href="#subtest4">sub2 test 4</a></li>
                            <li><a href="#subtest5">sub2 test 5</a></li>
                            <li><a href="#subtest6">sub2 test 6</a></li>
                        </ul>
            </li>
        </ul>
    </li>
    </ul>
    <a href="#background2">background 2</a>
    </body>
    </html>
    FYI, the code doesn't rendered well on Opera 8, Firefox 1 & 1.5. YuriKolovsky thank you for sharing this remarkable technique.


    __________________
    Everything about the Philippines.

  3. #203
    SitePoint Member
    Join Date
    Nov 2009
    Location
    Philippines
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it posible to apply this technique on vertical flyout menus?


    __________________
    Everything about the Philippines.

  4. #204
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kapitbisig View Post
    Is it posible to apply this technique on vertical flyout menus?


    __________________
    Everything about the Philippines.
    Yes, just unfloat things and instead of left:0; on the submenu givie it left:100% .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #205
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    its not that simple ryan!
    @kapitbisig you can make it into a vertical flyout menu, i have made a quick thing before i made the new menu system, now i will need to remake this and make it more appropriate for the general public, but i think something is better than nothing

    sorry i could not reply yesterday, my Internet was messing up.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>NON JS DropDown Test</title>
    <style type="text/css">
    * {
    	margin:0;
    	padding:0;
    }
    /*css only Navigation 2009 &#169; Timo Huovinen @ thinkHTML.blogspot.com*/
    #nav, #nav ul {
    	list-style-type:none;
    }
    #nav {
    	position:relative;
    	width:200px;
    	z-index:10;
    	top:-10000px;
    }
    #nav ul {
    	float:left;
    }
    #nav li {
    	width:200px;
    	float:left;
    	margin-top:-10000px;
    }
    #nav a {
    	position:relative;
    	top:10000px;
    	margin-right:-199px;/*200 - 1*/
    	margin-top:10000px;
    	width:200px;
    	float:left;
    	text-decoration:none;
    	display:block;
    	color:#fff;
    	background:#222;
    }
    #nav ul li {
    	float:none;
    	width:auto;
    	margin-top:0;
    }
    #nav ul a {
    	background:#fff;
    	color:#000;
    	float:none;
    	margin-top:0;
    }
    #nav a:hover {
    	margin-right:0;
    }
    
    </style>
    </head>
    <body>
    <a href="#test">test text</a>
    <ul id="nav">
    	<li>
        	<a href="#main">MAIN</a>
            <ul>
            	<li><a href="#">test</a></li>
                <li><a href="#">test</a></li>
                <li><a href="#">test</a></li>
            </ul>
        </li>
        <li>
        	<a href="#main">MAIN</a>
            <ul>
            	<li><a href="#">test</a></li>
                <li><a href="#">test</a></li>
                <li><a href="#">test</a></li>
            </ul>
        </li>
    </ul>
    </body>
    </html>
    im on local holiday for a week, so i will do all of this as soon as im back!
    (although i am reading these posts whenever i can)

  6. #206
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    its not that simple ryan!
    To be fair that's how most menus are and I haven't even looked into how this dropdown works. I assumed the placement method was the same
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #207
    SitePoint Member
    Join Date
    Nov 2009
    Location
    Philippines
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @YuriKolovsky thank you for the reply and for the quick solution for vertical version of dropper dropdown menu... Scanning your New and Improved - Multilevel Dropdown at post #195, I noticed that CSS code has visibility:hidden; for firefox "opera fix" inconsistency fix. Isn't that bad for SEO (search engines may start to flag as possible spammers the sites that use CSS to hide content)? Or optionally instead of using visibility:hidden; I suggest to remove this line in CSS code:

    Code CSS:
    .nav ul {
        background:red;/*top link persistent background color*/
    }


    @RyanReese thank you also for the reply.


    __________________
    Everything about the Philippines.

  8. #208
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Isn't that bad for SEO (search engines may start to flag as possible spammers the sites that use CSS to hide content)?
    Not really, especially since more and more people were using various techniques to hide and show content for accessibility reasons. When pro-accessibility folks started having hidden skip links, they wondered what search engines would do, and apparently everyone adjusted their algorithms; Matt Cutts and a few others gave input stating things like, using CSS for accessibility etc will not garner a penalty.
    That said, I tend to shy away from visibility: hidden because like display: none, it gets obeyed by screen readers and the content won't get read out (except in certain quirky buggy circumstances which are different per reader).

    But for example, Stu Nichol's menus used visibility: hidden for years and his menus are very popular. Nobody has noticed any penalties from teh Googles etc. for using his menus. So even though spiders be dumb, they seem to be smart enough to understand good uses of visibility: hidden.
    And it's not like they are unfamiliar with people using same-background same text colour for hiding text by spammers anyway.

    In general you can do whatever you need to for a dropdown menu and so long as the whole menu is in the HTML, it's google-safe. : )

  9. #209
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    even though spiders be dumb, they seem to be smart enough to understand good uses of visibility: hidden.
    Indeed. In fact, currently, search engine companies direct their attention to actual complaints from competitors about black-hat SEO, in addition to the traditional detection algorithms. One of them (Google, IIRC) uses the following golden rule in their guide for authors: "Would you feel uncomfortable explaining what you've done on your site to a competitor? If so, don't use it!". They are not going to penalize you if you can provide an obvious, rational and sensible explanation for what you've done which means that their algorithms are necessarily far more subtle than simply penalizing any use of display:none, visiblilty:hidden, left:-9999px etc.

  10. #210
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    plus im not hiding any content with visibility:hidden
    im hiding the list container, but then i use visibility:visible on the links themselves to show them again.

    its just that in firefox the lower part of the sub dropdown menu was considered to be a hover area because of a <ul>, so i decided to balance it all out, you can use any technique you like, or remove it completely (just make sure to test it and see if it works)

    I suggest to remove this line in CSS code:
    .nav ul {
    background:red;/*top link persistent background color*/
    }

    the code above is a matter of preference, ITS THERE FOR A REASON, and im not removing it, as it creates a persistent background color
    if you look at it, i also have a rule
    .nav ul ul {
    background:transparent;
    }
    which kills the above, for any sublevels.

    so yes, tweak your hearts out.

  11. #211
    SitePoint Enthusiast stunic's Avatar
    Join Date
    Sep 2009
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have produced several menus that work using this principle and amongst them is a vertical slide menu that uses definition lists and has a click to open and close feature
    http://www.cssplay.co.uk/menus/dl-clickslide.html

  12. #212
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    That looks very good Stu

  13. #213
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    good work stu!
    i prefer the less visual examples but it does make it more "commercial" looking.

  14. #214
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Paul,
    didn't you have somewhere a clickable dropdown menu? It only worked in 2 browsers but that was due to how the others dealt with :focus...

  15. #215
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hey poes,
    I think this is the one you are looking for.

    More Random Stuff > Hide and show with css only

  16. #216
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Thanks, Ray, that's the one.

  17. #217
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i have removed even more of the ie fixes!
    now theres just one fix, which is width:99&#37; (im not counting the weird fix, as it might or might not even be a fix?)

    IE6-7 have a "feature" where floats withing floats push and move other floats in strange ways, so having the dropdown that works in all the other browsers causes IE6-7 to expand all of the children when you hover over the fist list item in the list (the bug that anton p kept talking about), IE5-7 also have a feature where they goes crazy if haslayout has not been applied, so my previous solution was to add fixed widths that became smaller and smaller the deeper you go in the sublists, this fixed IE6-7, but required a lot of changes if you wanted to change the width of the sublinks, so i used another IE5-7 "Feature" where if you give one of the sublists a % width, then it will use the closest parent width available for the calculation (this will be the top level container), so my fix so far looked like this

    .nav ul {
    width:99%;
    }
    .nav ul ul {
    width:98%;
    }
    .nav ul ul {
    width:97%;
    }

    and so forth for every sublevel
    what i failed to understand is that setting a percentage width, counts as setting a width, that its children will use as reference

    so

    .nav ul {
    width:99%;
    }

    is enough.

    there was also the issue that IE5-6 had the sublist container overlapping links above it, the overlap was transparent, and so it affected only the padding around the link, the text itself was penetrating the transparent sublist background, thus breaking the dropdown if you moved your mouse "up" on the list (as the mouse was no longer over a link)
    the fix was actually simple, all i had to do was remove the positioning from the list items, and instead give the position to the sub list itself (.nav ul ul) and move that to the left and up instead.

    this gives the advantage that it no longer needs any fixes on IE's side, it has no more inconsistencies between opera/firefox, and does not need any parent hiding.
    so essentially all of the IE specific fixes have been removed with the exception of width:99% which you will never need to even touch.

    you can also give the sublists (.nav ul ul) a z-index and make it overlap with its parent list, making it look fancier.

    the code will be in the next post:

  18. #218
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Multilevel Dropdown, with minimal IE fixes.

    Code CSS:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TH - CSS Only Multilevel Dropdown</title>
    <style type="text/css">
    /*timo huovinen, blah blah blah*/
    /***reset default styling***/
    .nav,
    .nav ul{
        list-style-type:none;
        margin:0;
        padding:0;
    }
    .nav a {
    	text-decoration:none;
    }
    /*CUSTOMIZATION*/
    /*i have split the code to have the width/height/color separate from the rest of the code*/
    /*COLORS*/
    /*here are some default colors, funky colors used for distinctive visibility*/
    /*i hope that you can handle colors customization on your own :p*/
    .nav {
        background:yellow;
    }
    .nav a {
        background:#9C3;
    	color:#000;
    }
    .nav ul {
        background:red;/*top link persistent background color*/
    }
    .nav a.main {
        background:transparent;/*so that the top link persistent background works*/
    }
    .nav ul a.main {
        background:yellow;
    }
    .nav a.main:hover {
        background:orange;
    }
    .nav .sub ul a {
        background:#CC6;
    }
    .nav .sub ul a.main {
        background:yellow;
    }
    .nav .sub ul a.main:hover {
        background:orange;
    }
    .nav a:hover,
    .nav a:focus,
    .nav a:active{
        background:orange;
    }
    .nav .sub li a:hover,
    .nav .sub li a:focus,
    .nav .sub li a:active{
        background:#C93;
    }
    .nav .sub .sub ul a {
        background:#099;
    	color:#fff;
    }
    .nav .sub .sub ul a:hover,
    .nav .sub .sub ul a:focus,
    .nav .sub .sub ul a:active{
        background:#06F;
    }
    .nav .sub .sub .sub ul a {
        background:#036;
    }
    .nav .sub .sub .sub ul a:hover,
    .nav .sub .sub .sub ul a:focus,
    .nav .sub .sub .sub ul a:active{
        background:#006;
    }
    .nav .colored li a {
    	background:purple;
    }
     
     
     
    /*HEIGHT*/
    .nav {
    	height:1.563em;/*you could remove this and clear the float differently, but to me this makes the most sense*/
    }
    .nav a {
    	padding:.2em 0;/*apply padding to links, to vertically center them, be careful with horizontal padding in IE5, correct width must be maintained*/
    }
    .nav a.main {
        height:1.563em;/*needs to be the same as the persistent background trick and so that the sublevels are properly aligned*/
    	line-height:1.563em;/*not really necessary, but in this specific case it vertically centers the main link text*/
    	overflow:hidden;/*making it more bulletproof*/
    	padding:0;/*remove the padding that was applied above*/
    }
    .nav ul {
    	padding-top:1.563em;/*persistent background trick*/
    	margin-top:-1.563em;/*persistent background trick*/
    }
    .nav ul ul {
    	position:relative;/*so that it can be moved top/left*/
        top:-1.563em;/*this is the sole reason why the main links must have a fixed height*/
    }
     
     
    /*WIDTH (!IMPORTANT)*/
    /*change each width value below, else the dropdown will stop working (:hover will still work in modern browsers because of the opera fix)*/
    /*set the link width here*/
    .nav .link, 
    .nav a {
        width:9em;/*same as width*/
    }
    .nav ul li {
    /*force ie8 to float-drop*/
    	max-width:9em;/*same as width*/
    }
    /*set the sublink left shift width here (same as width)*/
    .nav ul ul {
    /*move the sublinks to the side, so they dont overlap*/
        left:9em;/*same as width*/
    }
    .nav li.reversed ul {/*reverse the direction of sublinks for the last dropdown*/
    	left:auto;
        right:9em;/*same as width*/
    }
    /*add the negative value of "width - 1px" here (because css can't do math)*/
    /*or (width - 0.063em) where 0.063em is 1px on 16px base size*/
    .nav a {
    /*makes the links very thin, so that the sublinks can hide inside the main link*/
    	margin-right:-8.937em;/*make this width - 1px*//*or width - 0.063em*/
    }
     
     
    /*Dropper Dropdown*/
    /*supports up to 4 sub-levels in IE5-7, more can be added*/
    /*modern browsers already support any amount of sublevels*/
    /*made by Timo Huovinen*/
     
    .nav li {
        float:left;/*fixes several IE related bugs, and allows for clearing*/
    }
    .nav ul {
        float:left;/*necessary for float drop*/
    }
    .nav ul li {
        clear:left;/*must clear the floated list item inside sublist*/
    }
    .nav a {
        position:relative;/*needs to have a position, to be above the rest*/
        display:inline-block;/*could be block, but i trust this more*/
    }
    .nav a.main {
        float:left;/*necessary for float drop*/
    	margin-top:10000px;/*bring the links back into view*/
    }
    .nav .link,
    .nav .sub {
    	margin-top:-10000px;/*hide the links and their containers, opera has low upper limits*/
    }
    .nav ul {
    	margin-bottom:-5000px;/*avoid any interaction between the sub's, can be any large size*/
    }
    /*the main trick, removes the negative right-margin and causes float drop*/
    .nav a:hover,
    .nav a:focus,
    .nav a:active{
        margin-right:0;
    }
     
    /*OPERA fix*/
    .nav ul:hover,
    .nav ul ul:hover {
        clear:left;/*fix for opera sublinks flickering on :hover*/
    }
    /*background no longer needed*/
    .nav ul ul {
        background:transparent;
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    /*IE5-6 + 7 bug fixes*/
    .nav .sub {
    /*add the value of "100% - 1%" here*/
        width:99%;
    }
    /*empty rule to fix occassional IE6 tabbing bug, one of the weirdest bug's i have seen.
    it seems that this indexes the links together as one? does not happen for everyone, but im leaving it just in case.*/
    a, a:hover, a:active, a:focus {}
    </style>
    <![endif]-->
    <!--I would also suggest adding some javascript to delay the closing of the sublinks, just to make it even better-->
    </head>
    <body>
    <a href="#background1">background 1</a>
    <ul class="nav">
    <li class="link">
        <a class="main" href="#">Main</a>
        <ul>
            <li><a href="#1">test1</a></li>
            <li><a href="#2">test2</a></li>
            <li class="sub"><a class="main" href="#3">main 1 </a>
                        <ul class="colored">
                            <li><a href="#subtest1">sub test 1</a></li>
                            <li><a href="#subtest2">sub test 2</a></li>
                            <li><a href="#subtest3">sub test 3</a></li>
                            <li><a href="#subtest4">sub test 4</a></li>
                            <li class="sub"><a class="main" href="#sub4">SUB main 1 </a>
                                        <ul>
                                            <li><a href="#subtest1">sub sub test 1</a></li>
                                            <li><a href="#subtest2">sub sub test 2</a></li>
                                            <li><a href="#subtest3">sub sub test 3</a></li>
                                            <li><a href="#subtest4">sub sub test 4</a></li>
                                            <li><a href="#subtest5">sub sub test 5</a></li>
                                            <li><a href="#subtest6">sub sub test 6</a></li>
                                        </ul>
                            </li>
                            <li><a href="#subtest5">sub test 5</a></li>
                            <li><a href="#subtest6">sub test 6</a></li>
                        </ul>
            </li>
            <li class="sub"><a class="main" href="#4">main 2 </a>
                        <ul>
                        	<li class="sub"><a class="main" href="#sub4">SUB main 2 </a>
                                        <ul>
                                            <li><a href="#subtest1">sub sub test 1</a></li>
                                            <li><a href="#subtest2">sub sub test 2</a></li>
                                            <li><a href="#subtest3">sub sub test 3</a></li>
                                            <li><a href="#subtest4">sub sub test 4</a></li>
                                            <li><a href="#subtest5">sub sub test 5</a></li>
                                            <li><a href="#subtest6">sub sub test 6</a></li>
                                        </ul>
                            </li>
                            <li><a href="#subtest1">sub test 1</a></li>
                            <li><a href="#subtest2">sub test 2</a></li>
                            <li><a href="#subtest3">sub test 3</a></li>
                            <li><a href="#subtest4">sub test 4</a></li>
                            <li><a href="#subtest5">sub test 5</a></li>
                            <li><a href="#subtest6">sub test 6</a></li>
                        </ul>
            </li>
            <li><a href="#5">test5</a></li>
            <li><a href="#6">test6</a></li>
            <li><a href="#7">long text link showing what happens</a></li>
            <li><a href="#8">test8</a></li>
            <li class="sub"><a class="main" href="#9">Everything is possible</a>
                        <ul>
                            <li><a href="#subtest1">sub test 1</a></li>
                            <li><a href="#subtest2">sub test 2</a></li>
                            <li><a href="#subtest3">sub test 3</a></li>
                            <li class="sub"><a class="main" href="#sub4">SUB test4 </a>
                                        <ul>
                                            <li><a href="#subtest1">sub sub test 1</a></li>
                                            <li><a href="#subtest2">sub sub test 2</a></li>
                                            <li><a href="#subtest3">sub sub test 3</a></li>
                                            <li class="sub"><a class="main" href="#sub7">Ultra SUB test7 </a>
                                        				<ul>
                                            				<li><a href="#subtest1">sub sub test 1</a></li>
                                            				<li><a href="#subtest2">sub sub test 2</a></li>
                                            				<li><a href="#subtest3">sub sub test 3</a></li>
                                            				<li><a href="#subtest4">sub sub test 4</a></li>
                                            				<li><a href="#subtest5">sub sub test 5</a></li>
                                            				<li><a href="#subtest6">sub sub test 6</a></li>
                                        				</ul>
                            				</li>
                                            <li class="sub"><a class="main" href="#sub7">Ultra SUB test8 </a>
                                        				<ul>
                                            				<li><a href="#subtest1">sub sub test 1</a></li>
                                            				<li><a href="#subtest2">sub sub test 2</a></li>
                                            				<li><a href="#subtest3">sub sub test 3</a></li>
                                            				<li><a href="#subtest4">sub sub test 4</a></li>
                                            				<li><a href="#subtest5">sub sub test 5</a></li>
                                            				<li><a href="#subtest6">sub sub test 6</a></li>
                                        				</ul>
                            				</li>
                                            <li><a href="#subtest4">sub sub test 4</a></li>
                                            <li><a href="#subtest5">sub sub test 5</a></li>
                                            <li><a href="#subtest6">sub sub test 6</a></li>
                                        </ul>
                            </li>
                            <li><a href="#subtest5">sub test 5</a></li>
                            <li><a href="#subtest6">sub test 6</a></li>
                            <li class="sub"><a class="main" href="#sub7">SUB test7 </a>
                                        <ul>
                                            <li><a href="#subtest1">sub sub test 1</a></li>
                                            <li><a href="#subtest2">sub sub test 2</a></li>
                                            <li><a href="#subtest3">sub sub test 3</a></li>
                                            <li><a href="#subtest4">sub sub test 4</a></li>
                                            <li><a href="#subtest5">sub sub test 5</a></li>
                                            <li><a href="#subtest6">sub sub test 6</a></li>
                                        </ul>
                            </li>
                            <li class="sub"><a class="main" href="#sub7">SUB test7 </a>
                                        <ul>
                                            <li><a href="#subtest1">sub sub test 1</a></li>
                                            <li><a href="#subtest2">sub sub test 2</a></li>
                                            <li><a href="#subtest3">sub sub test 3</a></li>
                                            <li><a href="#subtest4">sub sub test 4</a></li>
                                            <li><a href="#subtest5">sub sub test 5</a></li>
                                            <li><a href="#subtest6">sub sub test 6</a></li>
                                        </ul>
                            </li>
                        </ul>
            </li>
        </ul>
    </li>
    <li class="link">
        <a class="main" href="#">Main</a>
        <ul>
            <li><a href="#1">test1</a></li>
            <li><a href="#2">test2</a></li>
            <li><a href="#3">test3</a></li>
            <li><a href="#4">test4</a></li>
            <li><a href="#5">test5</a></li>
            <li><a href="#6">test6</a></li>
            <li><a href="#7">test7</a></li>
        </ul>
    </li>
    <li class="link reversed">
        <a class="main" href="#">Main</a>
        <ul>
            <li><a href="#1">test1</a></li>
            <li><a href="#2">test2</a></li>
            <li><a href="#3">test3</a></li>
            <li class="sub"><a class="main" href="#4">test4 </a>
                        <ul>
                            <li><a href="#subtest1">sub test 1</a></li>
                            <li><a href="#subtest2">sub test 2</a></li>
                            <li><a href="#subtest3">sub test 3</a></li>
                            <li><a href="#subtest4">sub test 4</a></li>
                            <li><a href="#subtest5">sub test 5</a></li>
                            <li><a href="#subtest6">sub test 6</a></li>
                        </ul>
            </li>
            <li><a href="#5">test5</a></li>
            <li><a href="#6">test6</a></li>
            <li class="sub"><a class="main" href="#7">test7 </a>
                        <ul>
                            <li><a href="#subtest1">sub2 test 1</a></li>
                            <li><a href="#subtest2">sub2 test 2</a></li>
                            <li><a href="#subtest3">sub2 test 3</a></li>
                            <li class="sub"><a class="main" href="#sub7">SUB test7 </a>
                                        <ul>
                                            <li><a href="#subtest1">sub sub test 1</a></li>
                                            <li><a href="#subtest2">sub sub test 2</a></li>
                                            <li><a href="#subtest3">sub sub test 3</a></li>
                                            <li><a href="#subtest4">sub sub test 4</a></li>
                                            <li><a href="#subtest5">sub sub test 5</a></li>
                                            <li><a href="#subtest6">sub sub test 6</a></li>
                                        </ul>
                            </li>
                            <li><a href="#subtest4">sub2 test 4</a></li>
                            <li><a href="#subtest5">sub2 test 5</a></li>
                            <li><a href="#subtest6">sub2 test 6</a></li>
                        </ul>
            </li>
        </ul>
    </li>
    </ul>
    <a href="#background2">background 2</a>
    </body>
    </html>

    p.s. the large header is so that if someone who is skimming through the thread could "see" what bits of code are the final versions.

  19. #219
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Good work Timo and well documented Good to get rid of those extra hacks.

  20. #220
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very impressive YuriKolovsky, thanks for sharing and all the hard work put into this
    The more you learn.... the more you learn there is more to learn.

  21. #221
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can the top links be made variable width with this technique?

  22. #222
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i had quite a few people asking that.
    so i made this:

    Code CSS:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TH - CSS Only Multilevel Dropdown</title>
    <style type="text/css">
    /***reset default styling***/
    .nav,
    .nav ul{
        list-style-type:none;
        margin:0;
        padding:0;
    }
    .nav a {
        text-decoration:none;
    }
    /*CUSTOMIZATION*/
    /*i have split the code to have the width/height/color separate from the rest of the code*/
    /*COLORS*/
    /*here are some default colors, funky colors used for distinctive visibility*/
    /*i hope that you can handle colors customization on your own :p*/
    .nav {
        background:yellow;
    }
    .nav a {
        background:#9C3;
        color:#000;
    }
    .nav ul {
        background:red; /*top link persistent background color*/
    }
    .nav a.main {
        background:transparent; /*so that the top link persistent background works*/
    }
    .nav ul a.main {
        background:yellow;
    }
    .nav a.main:hover {
        background:orange;
    }
    .nav .sub ul a {
        background:#CC6;
    }
    .nav .sub ul a.main {
        background:yellow;
    }
    .nav .sub ul a.main:hover {
        background:orange;
    }
    .nav a:hover,
    .nav a:focus,
    .nav a:active{
        background:orange;
    }
    .nav .sub li a:hover,
    .nav .sub li a:focus,
    .nav .sub li a:active{
        background:#C93;
    }
     
    /*WIDTH (!IMPORTANT)*/
    /*change each width value below, else the dropdown will stop working (:hover will still work in modern browsers because of the opera fix)*/
    /*set the link width here*/
    .nav .link,
    .nav a {
        width:9em; /*same as width*/
    }
    .nav ul li {
    /*force ie8 to float-drop*/
        max-width:9em; /*same as width*/
    }
    /*set the sublink left shift width here (same as width)*/
    .nav ul ul {
    /*move the sublinks to the side, so they dont overlap*/
        left:9em; /*same as width*/
    }
    .nav li.reversed ul { /*reverse the direction of sublinks for the last dropdown*/
        left:auto;
        right:9em; /*same as width*/
    }
    /*add the negative value of "width - 1px" here (because css can't do math)*/
    /*or (width - 0.063em) where 0.063em is 1px on 16px base size*/
    .nav a {
    /*makes the links very thin, so that the sublinks can hide inside the main link*/
    /*!IMPORTANT: if you want a width of 9em, then you will have to change the value below to 8.937em (because: 9 - 0.063 = 8.973)*/
        margin-right:-8.937em; /*make this width - 1px*//*or width - 0.063em (0.063 = 1px)*/
    }
     
    /*<customized width and positioning>*/
    /*ONE*/
    .nav .link.one {
        margin-right:20px;
    }
    .nav .link.one,
    .nav .one a {
        width:11em;
    }
    .nav .one ul li {
        max-width:11em;
    }
    .nav .one ul ul {
        left:11em;
    }
    .nav .one a {
        margin-right:-10.937em; /*11 - 0.063 = 10.937em (0.063 = 1px)*/
    }
    /*TWO*/
    .nav .link.two {
        margin-right:20px;
    }
    .nav .link.two,
    .nav .two a {
        width:3em;
    }
    .nav .two ul li {
        max-width:3em;
    }
    .nav .two ul ul {
        left:3em;
    }
    .nav .two a {
        margin-right:-2.937em; /*3 - 0.063 = 2.937em (0.063 = 1px)*/
    }
    /*THREE*/
    .nav .link.three {
        margin-right:2px;
    }
    .nav .link.three,
    .nav .three a {
        width:9em;
    }
    .nav .three ul li {
        max-width:9em;
    }
    .nav li.reversed.three ul { /*this is because its reversed*/
        right:9em; /*same as width*/
    }
    .nav .three a {
        margin-right:-8.937em;
    }
    /*</customized width and positioning>*/
     
     
     
     
     
     
     
     
    /*HEIGHT*/
    .nav {
        height:1.563em; /*you could remove this and clear the float differently, but to me this makes the most sense*/
    }
    .nav a {
        padding:.2em 0; /*apply padding to links, to vertically center them, be careful with horizontal padding in IE5, correct width must be maintained*/
    }
    .nav a.main {
        height:1.563em; /*needs to be the same as the persistent background trick and so that the sublevels are properly aligned*/
        line-height:1.563em; /*not really necessary, but in this specific case it vertically centers the main link text*/
        overflow:hidden; /*making it more bulletproof*/
        padding:0; /*remove the padding that was applied above*/
    }
    .nav ul {
        padding-top:1.563em; /*persistent background trick*/
        margin-top:-1.563em; /*persistent background trick*/
    }
    .nav ul ul {
        position:relative; /*so that it can be moved top/left*/
        top:-1.563em; /*this is the sole reason why the main links must have a fixed height*/
    }
     
     
    /*Dropper Dropdown*/
    /*supports up to 4 sub-levels in IE5-7, more can be added*/
    /*modern browsers already support any amount of sublevels*/
    /*made by Timo Huovinen*/
     
    .nav li {
        float:left; /*fixes several IE related bugs, and allows for clearing*/
    }
    .nav ul {
        float:left; /*necessary for float drop*/
    }
    .nav ul li {
        clear:left; /*must clear the floated list item inside sublist*/
    }
    .nav a {
        position:relative; /*needs to have a position, to be above the rest*/
        display:inline-block; /*could be block, but i trust this more*/
    }
    .nav a.main {
        float:left; /*necessary for float drop*/
        margin-top:10000px; /*bring the links back into view*/
    }
    .nav .link,
    .nav .sub {
        margin-top:-10000px; /*hide the links and their containers, opera has low upper limits*/
    }
    .nav ul {
        margin-bottom:-5000px; /*avoid any interaction between the sub's, can be any large size*/
    }
    /*the main trick, removes the negative right-margin and causes float drop*/
    .nav a:hover,
    .nav a:focus,
    .nav a:active{
        margin-right:0;
    }
     
    /*OPERA fix*/
    .nav ul:hover {
        clear:left; /*fix for opera sublinks flickering on :hover*/
    }
    /*background no longer needed*/
    .nav ul ul {
        background:transparent;
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    /*IE5-6 + 7 bug fixes*/
    .nav .sub {
    /*add the value of "100% - 1%" here*/
        width:99%;
    }
    /*empty rule to fix occassional IE6 tabbing bug, one of the weirdest bug's i have seen.
    it seems that this indexes the links together as one? does not happen for everyone, but im leaving it just in case.*/
    a, a:hover, a:active, a:focus {}
    </style>
    <![endif]-->
    <!--I would also suggest adding some javascript to delay the closing of the sublinks, just to make it even better-->
    </head>
    <body>
    <a href="#background1">background 1</a>
    <ul class="nav">
    <li class="link one">
        <a class="main" href="#">Main</a>
        <ul>
            <li><a href="#1">test1</a></li>
            <li><a href="#2">test2</a></li>
            <li class="sub"><a class="main" href="#3">main 1 &#187;</a>
                        <ul>
                            <li><a href="#subtest1">sub test 1</a></li>
                            <li><a href="#subtest2">sub test 2</a></li>
                            <li><a href="#subtest3">sub test 3</a></li>
                            <li><a href="#subtest4">sub test 4</a></li>
                            <li><a href="#subtest5">sub test 5</a></li>
                            <li><a href="#subtest6">sub test 6</a></li>
                        </ul>
            </li>
            <li class="sub"><a class="main" href="#4">main 2 &#187;</a>
                        <ul>
                            <li><a href="#subtest1">sub test 1</a></li>
                            <li><a href="#subtest2">sub test 2</a></li>
                            <li><a href="#subtest3">sub test 3</a></li>
                            <li><a href="#subtest4">sub test 4</a></li>
                            <li><a href="#subtest5">sub test 5</a></li>
                            <li><a href="#subtest6">sub test 6</a></li>
                        </ul>
            </li>
            <li><a href="#5">test5</a></li>
            <li><a href="#6">test6</a></li>
            <li><a href="#7">long text link showing what happens</a></li>
            <li><a href="#8">test8</a></li>
            <li class="sub"><a class="main" href="#9">Everything is possible</a>
                        <ul>
                            <li><a href="#subtest1">sub test 1</a></li>
                            <li><a href="#subtest2">sub test 2</a></li>
                            <li><a href="#subtest3">sub test 3</a></li>
                            <li><a href="#subtest5">sub test 5</a></li>
                            <li><a href="#subtest6">sub test 6</a></li>
                        </ul>
            </li>
        </ul>
    </li>
    <li class="link two">
        <a class="main" href="#">Main</a>
        <ul>
            <li><a href="#1">test1</a></li>
            <li><a href="#2">test2</a></li>
            <li><a href="#3">test3</a></li>
            <li><a href="#4">test4</a></li>
            <li><a href="#5">test5</a></li>
            <li><a href="#6">test6</a></li>
            <li><a href="#7">test7</a></li>
        </ul>
    </li>
    <li class="link reversed three">
        <a class="main" href="#">Main</a>
        <ul>
            <li><a href="#1">test1</a></li>
            <li><a href="#2">test2</a></li>
            <li><a href="#3">test3</a></li>
            <li class="sub"><a class="main" href="#4">test4 &#187;</a>
                        <ul>
                            <li><a href="#subtest1">sub test 1</a></li>
                            <li><a href="#subtest2">sub test 2</a></li>
                            <li><a href="#subtest3">sub test 3</a></li>
                            <li><a href="#subtest4">sub test 4</a></li>
                            <li><a href="#subtest5">sub test 5</a></li>
                            <li><a href="#subtest6">sub test 6</a></li>
                        </ul>
            </li>
            <li><a href="#5">test5</a></li>
            <li><a href="#6">test6</a></li>
            <li class="sub"><a class="main" href="#7">test7 &#187;</a>
                        <ul>
                            <li><a href="#subtest1">sub2 test 1</a></li>
                            <li><a href="#subtest2">sub2 test 2</a></li>
                            <li><a href="#subtest3">sub2 test 3</a></li>
                            <li><a href="#subtest4">sub2 test 4</a></li>
                            <li><a href="#subtest5">sub2 test 5</a></li>
                            <li><a href="#subtest6">sub2 test 6</a></li>
                        </ul>
            </li>
        </ul>
    </li>
    </ul>
    <a href="#background2">background 2</a>
     
     
    </body>
    </html>

    now you can manually adjust the links.
    make em wider, or simply add a margin to them to space them out.

  23. #223
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    My much older fluid width version,
    it requires a set height for the flyout menu in ie5-6 (not for other browsers)
    and it is buggy if you tab and hover at the same time.

    the next challenge is getting this to work as smoothly as the fixed width versions.

    I have posted my fluid width try, not the best but it works,
    quoted from post#137

    Hi,
    Did anyone ever make a smooth working single level dropdown with fluid/auto width parent list items?

    I understand the basic function of how the menu works, just wondering if there was any trickery found for a version with content driven width top links.

    I have not kept up with all the refined versions throughout this thread as it got quite involved with all of Anton's summaries and tests.

    It looks like the code from post#137 is causing a horizontal scrollbar and obviously overflow:hidden cannot be used to kill it.

  24. #224
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    the code from post#137 is causing a horizontal scrollbar
    only in IE6
    and its causing it because of the reserved space for the dropdown, back then i didn't find a solution to this, but one could argue that the dropdown should not go below the screen size anyway (because its highly annoying) and should only be used when there is enough content to cover the scollbar area.
    so in my opinion this is not a serious problem, at least not more serious than the fact that you can break the dropdown by focusing some link and then hovering over its mainlink, this is very unlikely but i consider it a more serious problem, and this is why everyone stopped working on that version.

    after long hours of thinking and simplifying i have come to the conclusion that it is impossible to do the way that i was doing it, because a child simply cannot tell its parent what width it has if the parent has a set width, and a set width is needed to cause the float drop!

    right now im trying to do it again, but now moving the fixed width over to the dropdown container, so wish me luck that it works.

  25. #225
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good Luck!

    On another note: Is it possible to have the sub links wider than the main link on hover some how?

    Example:

    --------
    --------------
    --------------
    --------------

    And Merry Christmas all
    The more you learn.... the more you learn there is more to learn.


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
  •