Navigační menu na CSS3.

 2012-01-27 00:00:00
 Dmitry Burobin

Navigační menu je jedním z důležitých prvku každého webu. V daném článku vytvoříme atraktivní menu na CSS3.

Ukázka!

css_menu

HTML

Označení pro menu je poměrně jednoduché a vyskituje se prvek HTML5 tag nav:

<nav>
    <
ul>
        <
li><a href="">Hlavní</a></li>
        <
li><a href="">Kategorie</a></li>
        <
li><a href="">O nás</a></li>                
        <
li><a href="">Portfolio</a></li>
        <
li><a href="">Kontakt</a></li>
    </
ul>
</
nav>

CSS


nav  {
    
displayblock;
    
width100%;
    
overflowhidden;
}

nav ul {
    
margin80px 0 20px 0;
    
padding.7em;
    
floatleft;
    list-
stylenone;
    
background#444;
    
backgroundrgba(0,0,0,.2);
    -
moz-border-radius.5em;
    -
webkit-border-radius.5em;
    
border-radius.5em;    
    -
moz-box-shadow0 1px 0 rgba(255,255,255,.2), 
0 2px 1px rgba(0,0,0,.8inset;
    -
webkit-box-shadow0 1px 0 rgba(255,255,255,.2), 
0 2px 1px rgba(0,0,0,.8inset;
    
box-shadow0 1px 0 rgba(255,255,255,.2), 
0 2px 1px rgba(0,0,0,.8inset
}

nav li {
    
float:left;
}

nav a {
    
float:left;
    
padding.8em 1.5em;
    
text-decorationnone;
    
color#555;
    
text-shadow0 1px 0 rgba(255,255,255,.5);
    
fontbold 1.1em/'trebuchet MS'ArialHelvetica;
    
letter-spacing1px;
    
text-transformuppercase;
    
border-width1px;
    
border-stylesolid;
    
border-color#fff #ccc #999 #eee;
    
background#c1c1c1;
    /*Gradient pozadí*/
    
background: -moz-linear-gradient(#f5f5f5, #c1c1c1);
    
background: -webkit-gradient(linearleft topleft bottom
from(#f5f5f5), to(#c1c1c1));
    
background: -webkit-linear-gradient(#f5f5f5, #c1c1c1);
    
background: -o-linear-gradient(#f5f5f5, #c1c1c1);
    
background: -ms-linear-gradient(#f5f5f5, #c1c1c1);
    
backgroundlinear-gradient(#f5f5f5, #c1c1c1);            
 
}
 
nav a:hovernav a:focus {
    
outline0;
    
color#fff;
    
text-shadow0 1px 0 rgba(0,0,0,.2);
    
background#fac754;
    /*Gradient pozadí*/
    
background: -moz-linear-gradient(#fac754, #f8ac00);
    
background: -webkit-gradient(linearleft topleft bottom
from(#fac754), to(#f8ac00));
    
background: -webkit-linear-gradient(#fac754, #f8ac00);
    
background: -o-linear-gradient(#fac754, #f8ac00);
    
background: -ms-linear-gradient(#fac754, #f8ac00);
    
backgroundlinear-gradient(#fac754, #f8ac00);
}

nav a:active {
    
/*Odstíny*/
    
-moz-box-shadow0 0 2px 2px rgba(0,0,0,.3inset;
    -
webkit-box-shadow0 0 2px 2px rgba(0,0,0,.3inset;
    
box-shadow0 0 2px 2px rgba(0,0,0,.3inset;
}
 
nav li:first-child a {
    
border-left0;
    
/*Zaokrouhlení*/
    
-moz-border-radius4px 0 0 4px;
    -
webkit-border-radius4px 0 0 4px;
    
border-radius4px 0 0 4px;            
}

nav li:last-child a {
    
border-right0;
    
/*Zaokrouhlení*/
    
-moz-border-radius0 4px 4px 0;
    -
webkit-border-radius0 4px 4px 0;
    
border-radius0 4px 4px 0;            
}

Výsledek

css_menu

Podpora prohlížečů.

Menu by mělo fungovat ve všech prohlížečích. Ve starých verzích se odpojí některé vizualní efekty, ale to by němělo ovlivnit funkčnost.
css_menu

Zdroj: www.red-team-design.com/cool-css3-navigation-menu

Systém Orphus
Napište komentář.
Celkem komenrářů(0)