SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Flyout Menu

  1. #1
    SitePoint Wizard
    Join Date
    Apr 2004
    Location
    dublin
    Posts
    2,036
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Flyout Menu

    Hi all,

    I am trying to design a css only flyout menu.

    When I mouseover the top link then the inner links should 'flyout'. Tried it using ul:hover but not working.

    Any ideas?

    Thanks.

    HTML:
    Code:
     <ul id="menu">
       <li><a href="#">Set Up</a>
     	  <ul>
     		   <li><a href="#">Groups</a></li>
     			 <li><a href="#">Portfolio IDs</a></li>
     			 <li><a href="#">Folders</a></li>
     		</ul>
     	</li>
     </ul>
    CSS:
    Code:
     ul#menu { 
     		margin:0; 
     		padding: 0;
     		font-family: Verdana, sans-serif;;
     		width: 150px;
     }
     
     #menu li {/*float: left;*/
     				 list-style: none; /* REMOVE BULLETS */
     				 
     }
     
     
     #menu li a {
     		 display: block;
     				 width: 150px;
     				 /** TEXT STYLING **/
     				 text-decoration: none;
     				 font-size: 0.6em;
     				 text-align: center;
     				 color: #646464;
     				 background: #ccc;
     				 padding: 7px 13px;
     				 border-left: 1px solid #000;
     				 border-bottom: 1px solid #000;
     				 position: relative;
     }
     
     #menu li ul {
     		display: none;
     				position: absolute;
     				top: 0;
     				left: 150px;
     }
     
     #menu li ul:hover {
     	  display:block; 
     			width:150px; 
     }

  2. #2
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you made a mistake in the last rule, you have to hover the li to get to the nested ul. Try changing the last rule to:

    Code:
    #menu li:hover ul {
       display:block; width:150px; 
    }

    you can examine some great flyout menu examples here (rightmost column) Menus - Multi-Level CSS Only

    this example has helpful comments embedded, just view source http://www.cssplay.co.uk/menus/flyout2.html

  3. #3
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A lot of Stu's flyout menus use tables to achieve the effect which, while being quite innovative, isn't really the best approach semantic speaking.

  4. #4
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    are you sure? I only saw <ul>s there, they seem ok semantically

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The ones he's been working on more recently like this one: http://www.cssplay.co.uk/menus/flyout2.html

  6. #6
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    youre right, i assumed it was similar to the previous ones

    thanx for the heads up

  7. #7
    SitePoint Wizard
    Join Date
    Apr 2004
    Location
    dublin
    Posts
    2,036
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey guys,

    Using this works fine in FF except the sublinks are set one link down...

    #menu li:hover ul {
    display:block;
    }

    Still not working in IE6 though.

    Any ideas?

    Thanks.

  8. #8
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in ie6 hover only works on links, not on other elements. For ie hover youll have to use javascript to fix it, or some kind of special ie treatment, like the one here http://www.cssplay.co.uk/menus/dd_valid.html

    for weird extra space youll probably have to play with margins padding and borders Uncollapsing Margins

  9. #9
    SitePoint Wizard
    Join Date
    Apr 2004
    Location
    dublin
    Posts
    2,036
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi all,

    My menu works fine in IE6 but in FF the submenus appear partly over the top level menu.

    Why is this?

    Code:
     ul#menu { 
     		margin:0; 
     		padding: 10px 0 0 0;
     		font-family: Verdana, sans-serif;
     		list-style: none; /* REMOVE BULLETS */
     		/*** Used for Centering   ***/
     		width: 100%;
     }
     
     ul#menu li {
     				 position: relative;
     }
     
     
     ul#menu li ul {
     		position: absolute;
     			left: 100%;
     			top: 0;
     			display: none;
     		  width: 100%; /* Width of Menu Items */
     		   list-style: none; /* REMOVE SUBMENU BULLETS */
     		  margin: 0;
     		  padding: 0;
     }
     
     ul#menu li a {
     				 display: block;
     				 width: 100%;
     				 /** TEXT STYLING **/
     				 text-decoration: none;
     				 font-size: 0.6em;
     				 color: #646464;
     				 background: url('../images/sidenav_off.gif');
     				 padding: 7px 13px;
     				 border-right: 1px solid #bbb;
     				 border-bottom: 1px solid #000;
     }
     
     #menu a:hover
     {
     			 color: #000;
     			 background: url('../images/sidenav_on.gif');
     }
     
     
     /* Holly Hack. IE Requirement \*/
     * html ul#menu li { float: left; height: 1%; }
     * html ul#menu li a { height: 1%; }
     /* End */
     
     /*li:hover ul, li.over ul { display: block; }  The magic */
     
     
     ul#menu li:hover ul ul,
     ul#menu li:hover ul ul ul,
     ul#menu li.over ul ul,
     ul#menu li.over ul ul ul
     {
        display:none;
     }
     
     ul#menu li:hover ul, 
     ul#menu li li:hover ul,
     ul#menu li li li:hover ul,
     ul#menu li.over ul,
     ul#menu li li.over ul,
     ul#menu li li li.over ul
     {
        display: block;
     }
    Code:
     	<ul id="menu">
        <li><a href="#">Set Up</a>
     	   <ul>
     			<li><a href="#">Groups</a></li>
     			  <li><a href="#">Portfolio IDs</a></li>
     			  <li><a href="#">Folders</a></li>
     		 </ul>
     	 </li>
     </ul>


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
  •