Примеры меню с использованием только CSS
На этот сайт заходит достаточно много посетителей, которые ищут для своего сайта подходящее меню. В этой статье я покажу примеры меню, для создания которых не нужно никаких дополнительных навыков. Не нужно уметь рисовать. Не нужна знать какие-то особенные свойства CSS. Достаточно просто со вкусом подобрать стиль рамки и цвет фона. HTML- код всех представленных меню одинаков и имеет следующий вид:Code <div id=»menu1″>
<ul>
<li><a href=»»>
<span class=»title»>Главная</span>
<span class=»text»>Добро пожаловать!</span>
</a>
</li>
<li><a href=»»>
<span class=»title»>О нас</span>
<span class=»text»>Кто мы?</span>
</a>
</li>
<li><a href=»»>
<span class=»title»>Наши услуги</span>
<span class=»text»>Что мы делаем</span>
</a>
</li>
<li><a href=»»>
<span class=»title»>Контакты</span>
<span class=»text»>Как с нами связаться</span>
</a>
</li>
</ul>
</div>
Меняются лишь стили CSS
Меню 1
- ГлавнаяДобро пожаловать!
- О насКто мы?
- Наши услугиЧто мы делаем
- КонтактыКак с нами связаться
Код CSS:
Code #menu1 ul {
list-style:none;
font-family: Georgia, serif;
font-size: 20px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.4em;
border:2px solid #000;
border-left:none;
float:left;
clear:both;
margin:20px;
}
#menu1 ul li{
float:left;
}
#menu1 ul li a{
display:block;
text-decoration:none;
background-color:#444;
padding:5px 10px;
color:#fff;
width:140px;
border-right:1px solid #666;
border-left:1px solid #000;
}
#menu1 ul li a span{
display:block;
}
#menu1 ul li a span.title{
border-bottom:1px solid #444;
}
#menu1 ul li a:hover span.title{
border-bottom:1px dashed #f0f0f0;
color:#ef0000;
}
#menu1 ul li a span.text{
visibility:hidden;
font-size:12px;
text-align:right;
}
#menu1 ul li a:hover span.text{
visibility:visible;
}
Меню 2
- ГлавнаяДобро пожаловать!
- О насКто мы?
- Наши услугиЧто мы делаем
- КонтактыКак с нами связаться
Код CSS:
Code #menu2 ul {
list-style:none;
font-family: «Trebuchet MS», sans-serif;
font-size: 24px;
font-style: normal;
font-weight: bold;
letter-spacing: -1px;
line-height: 1.2em;
border:1px solid #000;
border-left:none;
float:left;
clear:both;
margin:20px;
border:5px dashed #fff;
}
#menu2 ul li{
float:left;
}
#menu2 ul li a{
display:block;
text-decoration:none;
background-color:#f0f0f0;
padding:5px 10px;
color:#666;
width:140px;
}
#menu2 ul li a span{
display:block;
text-align:center;
}
#menu2 ul li a span.title{
}
#menu2 ul li a:hover span.title{
color:#000;
}
#menu2 ul li a span.text{
font-size:12px;
font-style:italic;
padding:0px 5px;
border:1px solid #f0f0f0;
}
#menu2 ul li a:hover span.text{
}
#menu2 ul li a:hover span.text{
border:1px inset #ccc;
background-color:#fff;
}
Меню 3
- ГлавнаяДобро пожаловать!
- О насКто мы?
- Наши услугиЧто мы делаем
- КонтактыКак с нами связаться
Код CSS:
Code #menu3 ul {
list-style:none;
font-family: Helvetica, Arial, sans-serif;
font-size: 30px;
font-weight: bold;
letter-spacing: -2px;
line-height: 1.2em;
border-top:4px solid #000;
border-bottom:4px solid #666;
float:left;
clear:both;
margin:20px;
}
#menu3 ul li{
float:left;
}
#menu3 ul li a{
display:block;
text-decoration:none;
background-color:#ccc;
padding:10px 10px 5px 10px;
color:#666;
width:170px;
}
#menu3 ul li a span{
display:block;
text-align:center;
}
#menu3 ul li a span.title{
}
#menu3 ul li a:hover span.title{
color:#000;
}
#menu3 ul li a span.text{
padding:0px 5px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: -1px;
line-height: 2em;
text-align:right;
margin-top:-5px;
color:#f0f0f0;
font-weight:bold;
background-color:#000;
visibility:hidden;
}
#menu3 ul li a:hover span.text{
visibility:visible;
}
Меню 4
- ГлавнаяДобро пожаловать!
- О насКто мы?
- Наши услугиЧто мы делаем
- КонтактыКак с нами связаться
Код CSS:
Code #menu4 ul {
list-style:none;
font-family: Helvetica, Arial, sans-serif;
font-size: 30px;
letter-spacing: -3px;
line-height: 1.2em;
border-top:5px dotted #c7e7f3;
border-bottom:5px dotted #c7e7f3;
float:left;
clear:both;
margin:20px;
}
#menu4 ul li{
float:left;
}
#menu4 ul li a{
display:block;
text-decoration:none;
padding:10px 10px 5px 10px;
color:#66b8d8;
width:170px;
}
#menu4 ul li a span{
display:block;
}
#menu4 ul li a span.title{
}
#menu4 ul li a:hover span.title{
color:#00adef;
}
#menu4 ul li a span.text{
padding:0px 5px;
font-family: Georgia, serif;
font-size: 13px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.6em;
color:#c7e7f3;
visibility:hidden;
}
#menu4 ul li a:hover span.text{
visibility:visible;
}
Меню 5
- ГлавнаяДобро пожаловать!
- О насКто мы?
- Наши услугиЧто мы делаем
- КонтактыКак с нами связаться
Код CSS:
Code #menu5 ul {
list-style:none;
font-family: Georgia, serif;
font-size: 30px;
letter-spacing: -3px;
line-height: 1.2em;
float:left;
clear:both;
margin:20px;
border:4px double #ccc;
}
#menu5 ul li{
float:left;
}
#menu5 ul li a{
display:block;
text-decoration:none;
padding:10px 10px 5px 10px;
color:#555;
background-color:#fff;
width:170px;
}
#menu5 ul li a span{
display:block;
}
#menu5 ul li a span.title{
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}
#menu5 ul li a:hover span.title{
color:#ccc;
}
#menu5 ul li a span.text{
padding:0px 5px;
font-family: Georgia, serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.7em;
color:#444;
visibility:hidden;
}
#menu5 ul li a:hover span.text{
visibility:visible;
}
Меню 6
- ГлавнаяДобро пожаловать!
- О насКто мы?
- Наши услугиЧто мы делаем
- КонтактыКак с нами связаться
Код CSS:
Code#menu6 ul {
list-style:none;
font-family: «Trebuchet MS», sans-serif;
font-size: 28px;
font-weight: bold;
letter-spacing: -1px;
line-height: 1.1em;
float:left;
clear:both;
margin:20px;
border:4px groove #ffe430;
}
#menu6 ul li{
float:left;
}
#menu6 ul li a{
display:block;
text-decoration:none;
padding:10px 10px 5px 10px;
color:#fff;
background-color:#ffc730;
width:170px;
}
#menu6 ul li a span{
display:block;
}
#menu6 ul li a span.title{
border-bottom:2px solid #ffc730;
}
#menu6 ul li a:hover{
background-color:#fff;
}
#menu6 ul li a:hover span.title{
color:#ffc730;
border-bottom:2px solid #ffe430;
}
#menu6 ul li a span.text{
padding:0px 5px;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.4em;
background-color:#ffc730;
visibility:hidden;
color:#fff;
}
#menu6 ul li a:hover span.text{
visibility:visible;
}
Продолжение следует…