Примеры меню с использованием только CSS. Продолжение

Продолжаю выкладывать стили CSS для Вашего меню.Начало смотрите тут: Примеры меню с использованием только CSS

Меню 7

  • ГлавнаяДобро пожаловать!
  • О насКто мы?
  • Наши услугиЧто мы делаем
  • КонтактыКак с нами связаться

Код CSS:

Code#menu7 ul {
  list-style:none;
  font-family: Cambria, serif;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1.1em;
  float:left;
  clear:both;
  margin:20px;
  border-top:2px dotted #555;
}
#menu7 ul li{
  float:left;
}
#menu7 ul li a{
  display:block;
  text-decoration:none;
  padding:10px 10px 5px 10px;
  color:#888;
  background-color:#000;
  width:170px;
}
#menu7 ul li a span{
  display:block;
}
#menu7 ul li a span.title{
  border-bottom:2px dotted #888;
}
#menu7 ul li a:hover{
  background-color:#fff;
}
#menu7 ul li a:hover span.title{
  color:#000;
  border-bottom:2px dotted #555;
}
#menu7 ul li a span.text{
  padding:0px 5px;
  font-size: 14px;
  font-style: italic;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1.4em;
  background-color:#666;
  visibility:hidden;
  color:#fff;
  text-align:right;
}
#menu7 ul li a:hover span.text{
  visibility:visible;
}

Меню 8

  • ГлавнаяДобро пожаловать!
  • О насКто мы?
  • Наши услугиЧто мы делаем
  • КонтактыКак с нами связаться

Код CSS:

Code  #menu8 ul {
list-style:none;
font-family: Helvetica, Arial, sans-serif;
font-size: 44px;
letter-spacing: -2px;
line-height: 1.2em;
float:left;
clear:both;
margin:20px;
border:5px solid #fff;
}
#menu8 ul li{
float:left;
}
#menu8 ul li a{
display:block;
text-decoration:none;
padding:5px 10px 5px 10px;
background-color:#fff;
width:170px;
border-left:6px solid #888;
}
#menu8 ul li a span{
display:block;
}
#menu8 ul li a span.title{
color:#888;
}
#menu8 ul li a:hover{
border-left:6px solid #000;
}
#menu8 ul li a:hover span.title{
color:#df246f;

}
#menu8 ul li a span.text{
padding:0px 5px;
font-size: 14px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.4em;
visibility:hidden;
color:#df246f;
text-align:right;
border-top:5px solid #000;
}
#menu8 ul li a:hover span.text{
visibility:visible; }  

Меню 9

  • ГлавнаяДобро пожаловать!
  • О насКто мы?
  • Наши услугиЧто мы делаем
  • КонтактыКак с нами связаться

Код CSS:

Code  #menu9 ul {
list-style:none;
font-family: «Lucida Sans Unicode», sans-serif;
font-size: 40px;
letter-spacing: -3px;
line-height: 1.2em;
float:left;
clear:both;
margin:20px;
}
#menu9 ul li{
float:left;
}
#menu9 ul li a{
display:block;
text-decoration:none;
padding:5px 10px 5px 10px;
background-color:#00adef;
width:170px;
text-align:center;
}
#menu9 ul li a span{
display:block;
}
#menu9 ul li a span.title{
color:#fff;
border-bottom:2px solid #fff;
padding-bottom:5px;
}
#menu9 ul li a:hover{

}
#menu9 ul li a:hover span.title{
color:#074a64;
border-bottom:2px solid #0b6f95;
}
#menu9 ul li a span.text{
padding:0px 5px;
font-size: 14px;
font-weight: bold;
letter-spacing: normal;
line-height: 1.4em;
color:#fff;
background-color:#074a64;
visibility:hidden;
}
#menu9 ul li a:hover span.text{
line-height: 3.4em;
visibility:visible; }  

Меню 10

  • ГлавнаяДобро пожаловать!
  • О насКто мы?
  • Наши услугиЧто мы делаем
  • КонтактыКак с нами связаться

Код CSS:

Code  #menu10 ul {
list-style:none;
font-family: Georgia, serif;
font-size: 40px;
letter-spacing: -3px;
line-height: 1.2em;
float:left;
clear:both;
margin:20px;
border:3px solid #5F3B2F;
}
#menu10 ul li{
float:left;
}
#menu10 ul li a{
display:block;
text-decoration:none;
padding:5px 10px 5px 10px;
background-color:#955542;
width:170px;
text-align:center;
}
#menu10 ul li a span{
display:block;
}
#menu10 ul li a span.title{
color:#fff;
padding-bottom:5px;
}
#menu10 ul li a:hover{

}
#menu10 ul li a:hover span.title{
font-family: Georgia, serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 2em;
color:#fff;
border:1px dashed #fff;
padding-bottom:3px;
background-color:#AF6C57;
}
#menu10 ul li a span.text{
padding:0px 5px;
font-size: 14px;
font-weight: bold;
letter-spacing: normal;
line-height: 1.4em;
color:#fff;
background-color:#5F3B2F;
visibility:hidden;
border-bottom:1px groove #AF6C57;
}
#menu10 ul li a:hover span.text{
line-height: 3.4em;
visibility:visible; }  

Меню 11

  • ГлавнаяДобро пожаловать!
  • О насКто мы?
  • Наши услугиЧто мы делаем
  • КонтактыКак с нами связаться

Код CSS:

Code  #menu11 ul {
list-style:none;
font-family:’Gill Sans’,’Gill Sans MT’;
text-transform:uppercase;
font-size: 28px;
line-height: 1.2em;
float:left;
clear:both;
margin:20px;
}
#menu11 ul li{
float:left;
}
#menu11 ul li a{
display:block;
text-decoration:none;
padding:0px 10px 0px 10px;
width:170px;
height:55px;
border-left:8px dotted #fff;
}
#menu11 ul li a span{
display:block;
}
#menu11 ul li a span.title{
color:#fff;
}
#menu11 ul li a:hover{
border-left:8px dotted #fb0303;
}
#menu11 ul li a:hover span.title{
}
#menu11 ul li a span.text{
color:#fb0303;
font-size:12px;
letter-spacing:0px;
visibility:hidden;
border-left:16px dotted #fb0303;
line-height:0px;
padding-top:4px;
margin:10px 0px 12px 0px;
}
#menu11 ul li a:hover span.text{
visibility:visible; } 

Меню 12

  • ГлавнаяДобро пожаловать!
  • О насКто мы?
  • Наши услугиЧто мы делаем
  • КонтактыКак с нами связаться

Код CSS:

Code  #menu12 ul {
list-style:none;
font-family: ‘palatino linotype’,palatino;
font-size: 30px;
letter-spacing: -1px;
line-height: 1.2em;
float:left;
clear:both;
margin:20px;
border:5px solid #ccc;
}
#menu12 ul li{
float:left;
}
#menu12 ul li a{
display:block;
text-decoration:none;
padding:5px 10px 5px 10px;
background-color:#ddd;
width:170px;
text-align:center;
border:4px double #ddd;
}
#menu12 ul li a span{
display:block;
}
#menu12 ul li a span.title{
color:#fff;
padding-bottom:5px;
border-bottom:1px solid #fff;
}
#menu12 ul li a:hover{
background-color:#fff;
border:4px double #ddd;
}
#menu12 ul li a:hover span.title{
color:#333;
border-bottom:1px solid #ddd;
text-transform:uppercase;
}
#menu12 ul li a span.text{
color:#999;
font-size:12px;
letter-spacing:0px;
visibility:hidden
}
#menu12 ul li a:hover span.text{
visibility:visible; }  

Вот и все. а в следующих статьях я постараюсь рассказать, как их внедрить в разные CMS.

Комментарии на Facebook