На нашем сайте собраны самые лучшие, самые разнообразные меню для Вашего сайта с примерами, с подробным описанием и инструкциями по установке.

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

опубликовал admin | дата публикации : 29,12,2011 | просмотров 2124

картинка меню

Теперь будем создавать горизонтальное меню на CSS с рваными краями. Используем теги span для оформления, которые будут изменять свои свойства при наведении курсора, а так же пунктирную линия, изменив толщину которой, создаем рваный эффект. Это меню также очень просто настроить под любой дизайн. Изначально цвет у нас красно-розовый, но вы можете легко отредактировать цвета под свой дизайн.

Итак приступим, снова сначала создадим код CSS и вставим его в теге head страницы.

<style type="text/css">
#menu ul { /*элемент ul идентификатора menu*/
  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 #FF0000; /*граница толщиной 2px, сплошная линия, цвет*/
  border-left:none; /*граница справа отсутствует, т.к. она будет в элементе li a*/
  float:left; /*выравниваем элемент по левому краю, остальные элементы обтекают справа*/
  clear:both; /*обтекание запрещено с обоих сторон*/
  margin:20px; /*внешние отступы все 20px*/
  padding:0; /*внутренние отступы все 0*/
  border:5px dashed #FF0000; /*граница толщиной 5px, пунктирная линия, цвет*/
}
#menu ul li{ /*элемент li элемента ul идентификатора menu*/
  float:left; /*выравниваем элемент по левому краю, остальные элементы обтекают справа*/
}
#menu ul li a{ /*ссылка a элемента li элемента ul идентификатора menu*/
  display:block; /*элемент блочный*/
  text-decoration:none; /*текст без оформления*/
  background-color:#FF6347; /*цвет фоновой заливки элемента*/
  padding:5px 10px; /*внутренние отступы сверху-снизу, справа-слева*/
  color:#666; /*цвет*/
  width:140px; /*ширина элемента содержательной части для браузеров, нормально понимающих блочную модель, т.е. текста в элементе*/
}
#menu ul li a span{ /*тег span ссылки a элемента li элемента ul идентификатора menu*/
  display:block; /*элемент блочный*/
  text-align:center; /*выравнивание текста по центру*/
}
#menu ul li a:hover span.title{ /*при наведении курсора на ссылку класса .title тега span ссылки a элемента li элемента ul идентификатора menu*/
  color:#000; /*цвет текста*/
}
#menu ul li a span.text{ /*класс .text тега span ссылки a элемента li элемента ul идентификатора menu*/
  font-size:12px; /*размер шрифта*/
  font-style:italic; /*начертание шрифта*/
  padding:0px 5px; /*внутренние отступы верх-низ, право-лево*/
  border:1px solid #FF6347; /*граница толщиной 1px, сплошная линия, цвет*/
}
#menu ul li a:hover span.text{   border:1px inset #FF0000; /*граница толщиной 1px, сплошная линия -вид нажатой кнопки, цвет*/
  background-color:#FA8072; /*цвет фоновой заливки элемента*/
}
</style>

Поэкспериментировать с кодом и посмотрите, что получится. Поменяйте толщину линий, границы, цвета при наведении.

Далее создадим код HTML самого меню, он будет в виде списка. При необходимости title выставите сами. Замените # на свои ссылки.

<div id="menu">
 <ul>
  <li><a href="">
   <span class="title">Главная</span>
   <span class="text">переход на главную</span>
      </a>   </li>
  <li><a href="">
   <span class="title">Ссылка2</span>
   <span class="text">о разделе 2</span>
      </a>
  </li>
  <li><a href="">
   <span class="title">Ссылка3</span>
   <span class="text">о разделе 3</span>
      </a>
  </li>
  <li><a href="">
   <span class="title">Ссылка4</span>
   <span class="text">о разделе 4</span>
      </a>
  </li>
 </ul>
</div>

В этом примере все достаточно просто, при вставке в страницу следите за кодировкой, в архиве - utf-8. Так же архив содержит несколько картинок под кнопки других цветов.

ДЕМО ПРИМЕРА | СКАЧАТЬ АРХИВ (загрузок 331 )

теги: меню для сайта | горизонтальное меню

Комментарии

Ваш комментарий