SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast -saturn-'s Avatar
    Join Date
    Nov 2003
    Location
    Thessaloniki, Greece
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Menubar based on Web Standards

    Hi.

    We're in the process of re-building our site and having followed the Web Standards and proper structure in everything else so far, we have decided to move from proprietary Javascript to proper use of ULs, LIs and the DOM for our menubar.

    Having spent over 4:30 hours today modifying Dave Lindquist's implementation of Using Lists for DHTML Menus to bring it close to our previous, non-Standards menubar, I can safely say that I'm going to need some help with the CSS that formats the lists into menus.

    I have attached a ZIP file that besides the source of XHTML, CSS and JS it contains two GIF images that show how the previous menubar version was (proper menu.gif) and how the one rendered in CSS looks like (faulty menu.gif). Of course I'd like to simulate the "proper" one as much as possible, and I believe I've done so to a point but there are a few minor details that make the difference.

    So, I'd like you to help me in the following:
    • Although the links inside the <li>s are supposed to be displayed as block elements (and in indeed they are in Opera and Netscape), IE renders them as inline elements
    • I have inserted 3 breaking spaces before the menubar on purpose, so I can see how it works no matter where it is positioned and as you can see for your selves, IE positions the submenus where they would be if there were no <br />s
    • The menubar seems to require at least 780px of width because when I resize the browser window I get a vertical scrollbar. Why's that?
    • How can I insert a divider in the begining of the menu with CSS, like the one shown in proper menu.gif?
    • How can I eliminate the 4px space between each <li>? It makes the menus looks not uniform
    • This is Javascript related, but if someone could answer it would be of great help: how can the submenus disappear as soon as the mouse hovers out of them? Right now Dave's implementation requires you to click on the menu you clicked in order for the submenu to disappear. I've seen Mike Foster's implementation of such menus (xMenu 4) but I think he specifies an area (as large as the submenu when open) out of which the mouse hides the submenu. Can it happen more easily?
    Thank you in advance!
    Attached Files Attached Files

  2. #2
    SitePoint Enthusiast Telemakhos's Avatar
    Join Date
    Nov 2003
    Location
    wherever
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Enthusiast -saturn-'s Avatar
    Join Date
    Nov 2003
    Location
    Thessaloniki, Greece
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, Telemakhos for the links. I was already aware of the first one but I had no idea about the second.

    Yet, I think my problem is clearly defined as something very specific, so I'm going to need help with exactly those issues.

  4. #4
    SitePoint Enthusiast -saturn-'s Avatar
    Join Date
    Nov 2003
    Location
    Thessaloniki, Greece
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please tell me that this isn't a problem without a solution.

  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,
    Although the links inside the <li>s are supposed to be displayed as block elements (and in indeed they are in Opera and Netscape), IE renders them as inline elements
    Try giving "menu li a" a width of 100% (or a height of 20px). This should make it reach all the way along but you may have to tweak it a bit.
    Code:
    .menu li a {height:20px}
    I have inserted 3 breaking spaces before the menubar on purpose, so I can see how it works no matter where it is positioned and as you can see for your selves, IE positions the submenus where they would be if there were no <br />s
    You need to add position relative to your mainMenu to give IE a stacking context for the sub menus.
    Code:
    #mainMenu {
      background: url(../images/menubar.gif) repeat-x;
      height: 30px;
      color: #000;
      padding: 0;
      width: 750px;
     position:relative; 
    }
    How can I eliminate the 4px space between each <li>? It makes the menus looks not uniform
    I think that this is the browser interpreting the whit space between the list items as a space. The solution is a bit messy and involves splitting the lines so that there are no gaps between the closing list and the starting list e.g.</li><li>. This will get rid of the gap hopefully but the background will then overwrite your divider as it will be underneath the hover.

    You could change your dividers to be borders and although not as pretty they may solve the problem for you.

    here is an example using some of your code to show some of the above techniques. I have just included one nested list as an example and no javascript.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {
      font-family: verdana, helvetica, arial, sans-serif;
      margin: 0px;
      padding: 0px
    }
    #mainMenu {
      background:  url(images/menubar.gif) repeat-x;
      height: 30px;
      color: #000;
      padding: 0;
      width: 750px;
    }
    #mainMenu  p {
      display: inline;
      line-height: 25px; 
      font-size: 10px;
      padding-left: 10px;
      margin: 0;
     
    }
    ul {
     display: inline;
     margin: 0;
     padding: 0;
    }
    body>#mainMenu li {padding:8px 0;}
    li {
      display: inline;
      list-style-type: none;
      border-right:1px solid #E2E2E2;
    }
    a{
      font-weight: bold;
      font-size: 10px;
      color: #495F92;
      margin: 0;
      padding:8px 15px; 
      line-height: 25px;
      text-decoration: none;
      text-align: center;
      border-left:1px solid #999; 
    }
    html>body a{line-height:30px}
    a:hover { background: url(images/menubar_over.gif) repeat-x;}
    a#noborderleft {border-left:none;background:transparent;}
    li#noborderright {border-right:none}
    li#noborderright a{background:transparent}
    .menu {
      color: #000;
      background-color: #fefefe;
      border: 1px solid #CCC;
      position: absolute;
      visibility: hidden;
    }
    </style>
    </head>
    <body>
    <div id="mainMenu">
    <p>Hello</p>
    <ul>
    <li><a id="noborderleft" href="#">&nbsp;</a></li><li><a href="#">Menu 1
    </a>
     <ul class="menu">
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
      <li>Test</li>
     </ul>
    </li><li><a href="#">Menu 2
    </a></li>
    <li><a href="#">Menu 3
    </a></li>
    <li><a href="#">Menu 4
    </a></li><li><a href="#">Menu 5
    </a></li><li><a href="#">Menu 6
    </a></li><li id="noborderright"><a href="#">&nbsp;</a></li>
    </ul>
    
    </div>
    </body>
    </html>
    (The lists must stay in exactly the same format so that they loose the space between each item. I'm not sure whether pasting in here will loose the formatting but it looks the same.)

    That lot should get you some way towards your goal (I hope).

    Paul

  6. #6
    SitePoint Enthusiast -saturn-'s Avatar
    Join Date
    Nov 2003
    Location
    Thessaloniki, Greece
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot, Paul.

    You helped me greatly in some points and indeed you did bring me closer to my goal!

    My basic concern now is the Javascript part. I should probably redirect my question at the Javascript forum, right?

  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)
    Hi,

    Glad it helped.
    My basic concern now is the Javascript part. I should probably redirect my question at the Javascript forum, right?
    I'm afraid javascript's not my thing so you would be better off as you say drawing up another post specific to javascript in the javascript forum. (Don't just copy the above thread otherwise it'll probably get
    moved etc). I have seen the menu's that disappear after a few seconds from when the mouse leaves the area so it shouldn't be that difficult to find a script.

    Paul


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
  •