Within DIV, Links Are Overlapping After Overflow To A New Line

Question

I'm still trying to get the whole jQuery concept down with CSS and such. I'm in the process of trying to make a simple navigation bar in which there's a hidden DIV. I would start with what looks like a start button, which when clicked would set off a toggle() to show or hide the hidden DIV above it, in which case, would make the menu bar appear from the top of the page. MY problem is that I'm trying to make the links set so that they will fill up horizonally, and then when there's no more room, they will fill up underneath making a new row within the DIV. When this happens, they go to a new row, but it's slightly sitting on top of the row above it, and not lined up. If someone can show me how to make this more organized I'd appreciate it, and I'd even be willing to settle for the alternate way of placing them, i.e. Having the links fill up a column and then when it hits the bottom of the div, start a new colum and fill that from top to bottom, etc. I've tried with and without URL's so far, so this is what I currently have:

the HTML:

    <div id="hidden-bar">

       <ul id="hidden-bar">

        <li><a href="##">Admin Menu</a></li>
        <li><a href="##">Home</a></li>
        <li><a href="##">Report Menu</a></li>
        <li><a href="##">Alt. Report Menu</a></li>
        <li><a href="##">Summary Menu</a></li>
        <li><a href="##">Comparison Menu</a></li>
        <li><a href="##">Editor Menu</a></li>
        <li><a href="##">Hourly Reports Menu</a></li>
        <li><a href="##">Constants Menu</a></li>

       </ul>
    </div>

    <div id="pull-down"></div>

The CSS:

    #hidden-bar {
    background-color: #323232;
    height: 110px;
    width: 100%;
    display: inline-block;
    overflow:auto;
    padding-top: 12px;
    color: #FFFFFF;
    clear:both;
    }

    #hidden-bar ul {
    list-style-type:none;
    display:block;
    }
    #hidden-bar li {
    display:inline;

    }

    #hidden-bar a {
    background-color:#AAAAAA;
    font:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#323232;
    display:inline;
    padding: 5px 10px 5px 10px;
    border: 3px solid #000000;
    margin-bottom: 4px;
    width: 105px;
    }

    #hidden-bar a:hover {
    background-color:#FEFADE

    }

    #pull-down {
    background-image:url('./images/pull_down.jpg');
    background-repeat:no-repeat;
    height: 20px;       
    }

the jQuery works so far so I won't include that code, it's basically just an onclick() coded to run a toggle of id="hidden-bar".

A few notes:

1. This is running within a .cfm file (I use coldfusion primarily, incase this will affect any judgment calls, but that's what I have to use for my job). I mention this incase anything runs into conflict, but so far, a lot of other jquery features have worked just fine so I doubt it being a cfm file is an issue.

2. I have all those different Style Sheets because I was just tinkering sometimes without UL/LI tags and sometimes with, so thats why there may be a few of them in there, like one for UL, one for LI, and one for "a" tags.

My problem is that although there are a lot of tuts out there for these jquery nav bars, noone really goes into explaining how to make all the buttons separate and what to do incase of them overlapping each other, or don't explain how the functionality works in concept/english terms. Thanks in advance.

Answer 1

your code is a bit overlapping and messy. What you need is a bit of a better understanding of what your CSS is doing. You can achieve your result without using any Javascript.

I simplified your code a bit for you but you can change it later if you want.

First off, you have 2 elements with the ID hidden-bar. So when your stylesheet is rendering the page it's actually assigning the same #hidden-bar style to both your div and the ul underneath it.

What you can do is just remove the ID from the ul and refer to it as a child of the div later.

<div id="hidden-bar">    
    <ul>        
        <li><a href="##">Admin Menu</a></li>
        ...

You can now the div style will be applied through this:

#hidden-bar
{
    background-color: #323232;
    height: auto;
    width: 650px;
    float: left;
}

And its child ul will be styled through this:

#hidden-bar ul
{
    list-style: none;
    float: left;
    padding: 0;
    margin: 0;
}

Couple things to note here. First of all, div and ul elements are already block-level elements so there is no need to declare them as display: inline-block. Secondly, the ul element defaults to having padding and margins, so you should reset them to 0 before adding content.

The rest of the code looks like this:

#hidden-bar li
{
    display: block;
    float: left;
    margin: 5px 5px;
    text-align: center;
    width: 120px;           
}

#hidden-bar li a
{
    background-color: #AAAAAA;
    font: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #323232;
    border: 1px solid #000000;
    display: block;
}

#hidden-bar a:hover
{
    background-color: #FEFADE;
}

Floating them to the left basically means push everything to the left inside the next parent block element. So in order for this work correctly, all the block elements have to be floated.

li and a elements are inline by default not block, so I specify I want the li's to be block so I can float them.

I set the margin and width properties on the li's rather than the a's since they are the outermost elements. They are all set to 120px because the largest of them fills just about 120px so now they all look the same.

The total width of the menu should be close to a multiple of the amount of menu items you want on it for it to look good. If I want 5 menu items:

5 * (120px width + 5px left margin + 5px right margin) = 5 * 130px = 650px total width

If you set the div to be 649px you will get this:

Hopefully that helps clear things up for you and helps you solve your problem.