zone de menu

zone de menu

par abboud » Sam Août 03, 2013 5:08 pm

salut. comment faire dans la page de style pour avoir un menu du site, et qui apparaitera dans toutes les pages.merci.

Re: zone de menu

par XainPro » Jeu Août 15, 2013 12:12 pm

s'il vous plaît expliquer votre question
voici le code pour construire un menu simple

Step 1 – HTML Markup

We will create an unordered list with a list item and an anchor tag for each menu link. To create the sub menu add another unordered list inside of the list.

<ul class="menu">

<li><a href="#">My dashboard</a></li>
<li><a href="#">Likes</a></li>
<li><a href="#">Views</a>

<ul>
<li><a href="#" class="documents">Documents</a></li>
<li><a href="#" class="messages">Messages</a></li>
<li><a href="#" class="signout">Sign Out</a></li>
</ul>

</li>
<li><a href="#">Uploads</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Documents</a></li>

</ul>

Step 2 – Menu Layout

We will start to remove the margin, padding, border and outline from all the elements of the menu. Then we will add a fixed width and height to the menu, rounded corners and the CSS3 gradients. To align the links horizontally we will float the lists to left. We also need to set the position to relative because we will need that to align the sub menus.

.menu,
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}

.menu {
height: 40px;
width: 505px;

background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}