SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multi-level, bi-directional navigation

    Firstly, I'd like to apologize for offending your eyes with this. I fully appreciate the inaccessibility issues this causes, not to mention it's just simply a pain to use. That said, I have a client who is stubbornly insistent this is the way they want to go, and my efforts at talking them out of it have thus far failed.

    I'm trying to create a menu with four levels:
    Level 1: horizontal
    Level 2: horizontal
    level 3: drop (vertical)
    level 4: flyout (horizontal)

    This Superfish menu comes close, but is missing the 4th level.

    This CSSPlay menu is the missing flyout, but hard-codes the width of the flyout menu options.

    Can anyone suggest a way (either pure CSS or not) of creating the freaky offspring of the two, pictured below?



    Thanks, and sorry again!
    From the English nation to a US location.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    sooooooooooo ( and trust me I am a magnet for ignorant and stubborn clients) they want the fly out to be as long (wide) as the number of links it contains, or would a fix width fly out do?

  3. #3
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like that! I'm happy if it breaks spectacularly so I can show them why it's a bad idea, but I don't think I'm going to convince them of it until I can give them something they can touch.

    My assumption would be that the links simply continue going until they hit the edge of the site, then wrap. I guess I could work out the width using JS, but it's ugly (ugly is relative at this point),
    e.g. flyout.width = site.width - (drop.left + drop.width)
    Last edited by awestmoreland; Oct 27, 2010 at 21:06. Reason: Didn't like wrapping
    From the English nation to a US location.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    well see thats why I asked:

    while "verbally" site width sounds right it would ONLY work if it's flying out from the first menu choice AND if it doesn't have that many links in the flyout UL. even if it works, it may cause a horizontal scroll bar ( since the menu might extend beyond the view port)

    That deign said and all other rules working according to plan, try this:


    Code:
    <style>
    ul{list-style:none; margin:0; padding:0}
     a {display:block; padding:5px;}
    .thrd { background:silver; position:relative; width:100px; }
    .frth {display:none;  float:right; width:1000px;  margin-right:-1000px; overflow:hidden}
    .thrd:hover .frth {display:block;}
    .thrd  a {float: left; background:silver; width:90px;  }
    .frth  a {width:auto;  }
    .frth  li {float: left;}
    .clr{display:block; clear:both;}
    </style>
    </head>
    
    <body>
    	<ul>
    		<li><a href="#"> first level</a>
                   <ul>
                        <li><a href="#"> second level</a>
                             <ul>
                                  <li class="thrd" ><a href="#"> third level</a>
                                            <ul class="frth">
                                                 <li><a href="#"> fourth level</a></li>
                                                 <li><a href="#"> for  fly out</a></li>
                                                 <li><a href="#"> links</a></li>
                                                 <li><a href="#"> links</a></li>
                                            </ul>
                                          <span class="clr"></span><!-- this is for IE, other wise you could use clearfx-->
                                  </li>
                             </ul>
                        </li>
                   </ul>
              </li>
    	</ul>

  5. #5
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. A valiant attempt. Unfortunately, I'm still seeing the fourth level menu items arranged vertically. See it in action.

    From the English nation to a US location.

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,820
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    yeah I figured there would be some specificity issues, not to mention numerical tweaks.

    replace my CSS with this and it will work better

    Code:
    ul{list-style:none; margin:0; padding:0}
     a {display:block; padding:5px;}
    .thrd { background:silver; position:relative; width:100px; }
    .thrd ul.frth {display:none;  float:right; width:800px;  margin-right:-800px; overflow:hidden}
    .thrd:hover  frth {display:block;}
    .thrd  a {float: left; background:silver; width:90px;  }
     frth  a {width:auto;  }
    .thrd ul.frth  li {float: left; width:auto}
    .clr{display:block; clear:both;}


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
  •