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

Примеры меню с использованием только 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;
}
Продолжение следует…