Galactic Civilizations 3
Create a dynamic menu in CSS

Create a dynamic menu in CSS

Category: Javascript.
Posted by on the 29/11/2013.
Last update on the 06/12/2013.

Description

This tutorial explains how to create dynamic menu in CSS.

Introduction

This tutorial can be realized with a simple text editor like « Notepad ». This tutorial doesn't require any prerequisite.

HTML code

First of all, we will create a three level menu in HTML by using « ul » and « li » tags. Here is the code of the menu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link
rel="stylesheet" media="screen" type="text/css" title="menu" href="menu.css" />
<title>
menu in CSS</title>
</head>
<body>
<ul
class="level1">
    <li>
element level 1
        <ul class="level2">
            <li>
element level 2
                <ul class="level3">
                    <li>
element level 3</li>
                    <li>
element level 3</li>
                </ul>
            </li>
            <li>
element level 2</li>
            <li>
element level 2</li>
        </ul>

    </li><li>element level 1
    </li>
</ul>
</body>
</html>

As you can see, the creation of the menu is quite simple. Each level of the menu has a class (level1, level2 and level3). The rules that will be defined in the CSS style sheet that allow having a multi-levels menu will be applied on these classes.

The CSS file is included on the top of the file with the HTML tag « link ».

CSS style sheet

Now we can work on the visual aspect of our menu. Here is the code of the file menu.css :

.level1 li{
    position: relative;
    float: left; /*Put the level 1's elements in line.*/
    list-style-type: none;
    color:red;
    min-width: 10%;
}
.level2, .level3{
    position: absolute; /*Put the block one below the other.*/
    display: none; /*Hide the block.*/
    min-width:100%; /*The levels 2 and 3 take the width that they need.*/
}
.level2{
    padding:0%; /*Remove the right shift.*/
}
.level3{
    position: relative; /*Allow to shift the level 2 blocks.*/
}
.level1:hover .level2, .level2:hover .level3{
    display: block;
}
.level2 li{color:blue; }
.level3 li{color:green; }

We have hidden the levels with the property « display: none; ».

The pseudo-class :hover allows displaying the level 2 and 3 when the user flies over the level 1 or the level 2. I will not explain the other rules because the comments in the code are enough to understand their usage. Furthermore, they are only used to have a more beautiful menu.

You like this tutorial ?
Like this website in order to promote it on facebook !

You like this tutorial ? Share it with your friends !
Partager sur Facebook Partager sur Twitter Partager sur Myspace Partager sur Stumbleupon Soumettre sur Reddit Partager sur Digg Ajouter à vos favoris Technorati Ajouter à vos favoris Live Ajouter à vos favoris Google Ajouter sur vos favoris Yahoo