Posted By Doteasy

We will end this CSS Menu Series by learning how to turn this:

  • Home
  • Services
  • Products
  • Support
  • About
  • Contact

into this:

buttonmenu

1. Let's start with the HTML code for our CSS menu:

<div id=”mainmenu”>
    <ul>
        <li><a href=”#”>Home</a></li>
        <li><a href=”#”>Services</a></li>
        <li><a href=”#”>Products</a></li>
        <li><a href=”#”>Support</a></li>
        <li><a href=”#”>About</a></li>
        <li><a href=”#”>Contact</a></li>
    </ul>
</div>

2. Then, we will have to remove the bullets by creating a new CSS rule:

#mainmenu ul {
    list-style: none;

    padding: 0;
    margin: 0;
    }

3. Next, to get these menu items all on one line, we will insert this CSS rule:

#mainmenu li {
    float: left;
    margin: 0 0.15em;
    }

4. Now that we’ve got the menu items all lined up next to each other, we need to make the buttons. We will be using a background image to create the buttons.

#mainmenu li a {
    background: url(background.gif) #FFFFFF
    bottom left repeat-x;
    height: 2em;
    line-height: 2em;
    float: left;
    width: 9em;
    display: block;
    border: 0.1em solid #DCDCE9;
    color: #0D2474;
    text-decoration: none;
    text-align: center;
}


The Full CSS Code

So, to achieve the menu, you will add the following lines to your CSS code. The below example is for an internal stylesheet, if you are using an external stylesheet, simply add the lines between to your CSS file.

<head>

    <style type="text/css">

        #mainmenu {
            width:30em
            }

        # mainmenu ul{
            list-style: none;
            padding: 0;
            margin: 0;
            }

        # mainmenu li {
            float: left;
            margin: 0 0.15em;
            }

        # mainmenu li a {
            background: url(background.gif) #fff bottom left repeat-x;
            height: 2em;
            line-height: 2em;
            float: left;
            width: 7.5em;
            display: block;
            border: 0.1em solid #DCDCE9;
            color: #8CC919;
            text-decoration: none;
            text-align: center;
            }

    </style>

</head>
*NOTE: You can specify any hover effect for these menu items, including changing the background image or the text color. Simply make a copy of the entire #mainmenu li a CSS rule and change the selector to #mainmenu li a:hover

Example, as in our image above,

#mainmenu li a:hover {
    color: #333333;
}

Resources


 
Posted By Doteasy

Creating a pop out menu is very similar to creating a dropdown menu.

We'll start by adding a nested list to our basic list menu.

<ul id="mainmenu">
    <li><a href="home.html">Home</a></li>
    <li><a href="services.html">Services</a></li>
    <li>

        <ul>
            <li><a href="services1.html">Service 1</a></li>
            <li><a href="services2.html">Service 2</a></li>
            <li><a href="services3.html">Service 3</a></li>
        </ul>

    </li>
    <li><a href="products.html">Products</a></li>
    <li><a href="support.html">Support</a></li>
    <li><a href="about.html">About</a></li>
     <li>

          <ul>
            <li><a href="history.html">Company History</a></li>
            <li><a href="staff.html">Staff</a></li>
            <li><a href="press.html">Press Releases</a></li>

        </ul>
    </li>
    <li><a href="contact.html">Contact</a></li>
</ul>

With this nested list in place and without changing the CSS, the menu will display as follows:

popout menu 1

By modifying the CSS, we can move the submenus to the right and hide them until the user hovers over one of the parent menu items. Here are the steps

1. Set the position of the main menu items to relative.

    #mainmenu li {
        position:relative;
          }


2. Position the submenus absolutely and hide the submenus.

    #mainmenu li ul {
        position: absolute;
        width: 150px;
        left: 118px;
        top: 5px;
        display: none;
        }


3. Style the submenu options.

    #mainmenu li ul li {
        font-size: smaller;
        }

4. Display the submenu when the user hovers over the main option.

    #mainmenu li:hover ul {
        display: block;
        background-color: #8CC919; /*for IE7*/
        }

Note: the background-color declaration is necessary for Internal Explorer 7. Without it, the submenus can disappear while the user is hovering over them.

5. Position a tags relatively. This is another fix for Internet Explorer 7. If the a tags are left statically positioned, then they won’t fill the full width of their parent list items and the menus will only work when users hover over the text of the link.

    #mainmenu a {
        position: relative; /*for IE7*/
        }

The Full CSS Code

So, to achieve the vertical menu, you will add the following lines to your CSS code. The below example is for an internal stylesheet, if you are using an external stylesheet, simply add the lines between to your CSS file.

<head>

        <style type="text/css">

            ol, ul {
                 list-style: none;
                }

             #mainmenu {
                margin: 10px;
                width: 120px;
                font-family: Tahoma;
                }
 
            #mainmenu li {
                position:relative;
                display: block;
                border: 1px solid #333333;
                border-top: 0px;
                }
           
            #mainmenu li:first-child {
                border-top: 1px solid #333333;
                }

             #mainmenu a {
                  display:block;
                  padding:3px;
                  text-decoration:none;
                  background-color:#333333;
                  color:#FFFFFF;
                position: relative; /*for IE7*/
                }
 
             #mainmenu a:hover {
                  background-color:#8CC919;
                  color:#FFFFFF;
                 }

            #mainmenu li ul {
                position: absolute;
                width: 130px;
                left: 79px;
                top: 5px;
                display: none;
                }

            #mainmenu li ul li {
                font-size: smaller;
                }

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

        </style>

    </head>

And your pop-out menu now looks like this:

popout menu 2

Resources:

Next week, we will end the CSS Navigation Menu series with "Menus with Background Images"


 
Posted By Doteasy

There was a time with it was necessary to use JavaScript to create dynamic menus. But, the wide support of the :hover pseudo-class has changed that.

To create the dropdown menu, we will first need to add a nested list to our basic list menu.

<ul id="mainmenu">
    <li><a href="home.html">Home</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="support.html">Support</a></li>
    <li><a href="about.html">About</a>
        <ul>
        <li><a href="history.html">Company History</a></li>
        <li><a href="staff.html">Staff</a></li>
        <li><a href="press.html">Press Releases</a></li>
        </ul>

    </li>
    <li><a href="contact.html">Contact</a></li>
</ul>

With this nested list in place and without changing the CSS, the menu will display as follows:

dropdown menu 1

By modifying the CSS, we can hide the submenus until the user hovers over one of the parent menu items. Here are the steps:

1. Set the position of the main menu item to relative.

#mainmenu li {
    position: relative;
    }

2. We will also need to set the position of the submenus to absolute. Submenus are contained in the ul elements within the li element.

#mainmenu li ul {
    position: absolute;
    margin: 0px;
    padding: 0px;
    left: -3px;
    top: 22px;
    }

3. Hide the submenus by adding the display:none; to the submenu rule.

#mainmenu li ul {
    position: absolute;
    margin: 0px;
    padding: 0px;
    left: -3px;
    top: 22px;
    display: none;
    }

4. Style the submenu options. We can turn the top border off for all but the first submenu item with the :first-class pseudo-class.

#mainmenu li ul li {
    width: 150px;
    font-size: smaller;
    border-top: none;
    }

#mainmenu li ul li:first-child {
    border-top: 1px solid #333333;
    }

5. Display the submenu when the user hovers over the main option. Modern browsers allow the :hover pseudo-class for almost all elements, including list items.

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

The Full CSS Code

So, to achieve the vertical menu, you will add the following lines to your CSS code. The below example is for an internal stylesheet, if you are using an external stylesheet, simply add the lines between <style type="text/css"> and </style> to your CSS file.

<head>

        <style type="text/css">

            ol, ul {
                 list-style: none;
                }

             #mainmenu li {
                position:relative;
                  display:block;
                  width:120px;
                  float:left;
                  margin-left:2px;
                  border:1px solid #333333;
                 }

            #mainmenu li {
                  display:block;
                  width:120px;
                  float:left;
                  margin-left:2px;
                  border:1px solid #333333;
                 }
 
             #mainmenu a {
                  display:block;
                  padding:3px;
                  text-decoration:none;
                  background-color:#333333;
                  color:#FFFFFF;
                 }
 
             #mainmenu a:hover {
                  background-color:#8CC919;
                  color:#FFFFFF;
                 }

            #mainmenu li ul {
                position: absolute;
                margin: 0px;
                padding: 0px;
                left: -3px;
                top: 25px;
                display: none;
                }
           
            #mainmenu li ul li {
                width: 150px;
                font-size: smaller;
                border-top: none;
                }

            #mainmenu li ul li:first-child {
                border-top: 1px solid #333333;
                }

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

        </style>

    </head>

And your dropdown menu now looks like this:

dropdown menu 2

Resources:

Next time, we will take a look at pop-out menus.


 
Posted By Doteasy

Vertical menus are created in much the same way as horizontal menus, but they are even easier.

vertical menu

This menu:

  • items aligned vertically
  • items are displayed as blocks
  • block background color changes upon hover

To create the above menu, we will use CSS to style our basic list menu:

1. Remove all the default list styling.

ol, ul {
    list-style: none;
    }

2. Set the width and margin of the menu.

#mainmenu {
    margin: 10px;
    width: 120px;
    font-family: Tahoma;
    }

This time, the width will be much narrower as we are creating a vertical menu.

3. Set the list items to display as blocks. We will set the border properties by adding borders to the left, right and bottom edges. We will also add a border to the top of the first list item only. We will use the :first-child pseudo-class to do this.

#mainmenu li {
    display: block;
    border: 1px solid #333333;
    border-top: 0px;
    }

#mainmenu li:first-child {
    border-top: 1px solid #333333;
    }

4. Change the a element to block-level elements. We will also add some formatting styles and remove the underline with text-decoration: none.

#mainmenu a {
          display:block;
          padding:3px;
          text-decoration:none;
          color:#FFFFFF;
         }

5. Finally, we will change the hover state of the links so that they highlight when a user points to them.

#mainmenu a:hover {
          background-color:#8CC919;
          color:#FFFFFF;
         }

The Full CSS Code

So, to achieve the vertical menu, you will add the following lines to your CSS code. The below example is for an internal stylesheet, if you are using an external stylesheet, simply add the lines between <style type="text/css"> and </style> to your CSS file.

<head>
<style type="text/css">

            ol, ul {
                 list -style: none;
                }

             #mainmenu {
                margin: 10px;
                width: 120px;
                font- family: Tahoma;
                }

            #mainmenu li {
                display: block;
                border: 1px solid #333333;
                border-top: 0px;
                }
           
            #mainmenu li:first-child {
                border-top: 1px solid #333333;
                }

             #mainmenu a {
                  display:block;
                  padding:3px;
                  text-decoration:none;
                  background-color:#333333;
                  color:#FFFFFF;
                 }
 
             #mainmenu a:hover {
                  background-color:#8CC919;
                  color:#FFFFFF;
                 }
    </style>

</head>

Resources:

> Next time, we will try our hands on the dropdown menu.


 
Posted By Doteasy

horizontal_menu

This menu:

  • items aligned horizontally
  • items are displayed as blocks
  • block background color changes upon hover

To create the above menu, we will use CSS to style our basic list menu:

1. Remove all the default list styling.

ol, ul {
    list-style: none;
    }

2. Set the width and margin of the menu.

#mainmenu {
    margin: 10px;
    width: 750px;
    font-family: Tahoma;
    }

Setting the width prevents the menu from wrapping when the user shrinks the browser window.

3. Set the list items to display as blocks. We will also give them a width and float them to the left so they will be displayed to the right of the preceding item. We will also give them a margin border.

#mainmenu li {
    display: block;
    width: 120px;
    float: left;
    margin-left: 2px;
    border: 1px solid #333333;
    }

4. Change the a element to block-level elements. We will also add some formatting styles and remove the underline with text-decoration: none.

#mainmenu a {
          display:block;
          padding:3px;
          text-decoration:none;
          background-color:#333333;
          color:#FFFFFF;
         }

5. Finally, we will change the hover state of the links so that they highlight when a user points to them.

#mainmenu a:hover {
          background-color:#8CC919;
          color:#FFFFFF;
         }

 

The Full CSS Code

So, to achieve the horizontal menu, you will add the following lines to your CSS code. The below example is for an internal stylesheet, if you are using an external stylesheet, simply add the lines between <style type="text/css"> and </style> to your CSS file.

<head>
<style type="text/css">

            ol, ul {
                 list-style: none;
                }

             #mainmenu {
                 margin:10px;
                 width:750px;
                 font-family: Tahoma;
                 }
 
            #mainmenu li {
                  display:block;
                  width:120px;
                  float:left;
                  margin-left:2px;
                  border:1px solid #333333;
                 }
 
             #mainmenu a {
                  display:block;
                  padding:3px;
                  text-decoration:none;
                  background-color:#333333;
                  color:#FFFFFF;
                 }
 
             #mainmenu a:hover {
                  background-color:#8CC919;
                  color:#FFFFFF;
                 }
        </style>
</head
>


Resources:

>> Stay tuned as next time, we will be creating a vertical menu.


 


 
Google

Recent Entries
 
Category
 
Latest Comments
 
Archives
 
Free Tools and Applications
 
Doteasy Knowledge Base
 
 
Links
 
Doteasy Reviews
 
Visitors

You have 2014633 hits.

 
$0 Web Hosting

$0 Web Hosting
 
 

Add to Technorati Favorites



Add to Google Reader or Homepage

Add to My AOL

Add to netvibes

Subscribe in Bloglines

Powered by FeedBurner