Menu Bar


#1

I'm trying to make my own website, so I need some help; I've started creating a menu, but I need some help.

-How can I pull it into 2 equal sides?
-Organize it horizontally
-Add effects when being clicked and hovered on.

Thanks so much! :smile:

<ul>
        // Pull this to the left...
    <li>home</li>
    <li>about us</li>
        // Pull this to the right...
    <li>sign up</li>
    <li>log in</li>
            </ul>

This is my code so far.


#3

If you want to do two different things, then you will need two different <ul> ... </ul> elements. Put the code that you are going to pull-left in one and the code that you are going to pull-right in the other.

Have you taken the HTML/CSS course here yet? That will help you with some of the things that you are asking.

When you get to the Bootstrap unit, that is exactly what you are going to learn how to do.

For this you will be need to make your list items links so that they are clickable. Then you can add CSS code to change their appearance when you hover on them.

Something like:

a:hover {
  // all the changes you want to appear go in here
}

You will want to go searching for examples of all the things you can do when you hover, here is one example.


#4

Extremely beneficial post; thanks so much for the information, I'll make sure to check it out! :sunny:


#5

If you don't mind me asking a quick question; I want the items in the li to appear as blocks, however in line. When you hover over the block, the bottom line turns blue. I'm not asking you how to do the animation, I can probably figure that out, but right now they just look like texts, how can I make them boxes with texts?

Here's my HTML:

<div class="container">
    <div class="navigationMenu">
        <ul class="pull-left">
        <!--        Pull this to the left...-->
            <li><a href="#">home</a></li>
            <li><a href="#">about us</a></li>
                    </ul>
                    
    

        <ul class="pull-right">
            <!--        Pull this to the right...-->
        <li><a href="#">sign up</a></li>
        <li><a href="#">log in</a></li>
                    </ul>
                        </div>
                            </div>

Here's my CSS:

.navigationMenu a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

.navigationMenu li {
    display: inline;
}

#6

Give them a background-color: property.