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

Горизонтальное меню на CSS в желтом цвете

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

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

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

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

<style type="text/css">
#menu ul { /*элемент ul идентификатора menu*/
  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; /*внешние отступы все 20px*/
  padding:0; /*внутренние отступы все 0*/
  border:4px groove #ffe430; /*граница толщиной 5px, линия - по типу содержимое выдавлено из фона, цвет*/
}
#menu ul li{ /*элемент li элемента ul идентификатора menu*/
  float:left; /*выравниваем элемент по левому краю, остальные элементы обтекают справа*/
}
#menu ul li a{ /*ссылка a элемента li элемента ul идентификатора menu*/
  display:block; /*элемент блочный*/
  text-decoration:none; /*текст без оформления*/
  padding:10px 10px 5px 10px; /*внутренние отступы сверху, справа, снизу, слева*/
  color:#fff; /*цвет*/
  background-color:#ffc730; /*цвет фоновой заливки элемента*/
  width:170px; /*ширина элемента содержательной части для браузеров, нормально понимающих блочную модель, т.е. текста в элементе*/
}
#menu ul li a span{ /*тег span ссылки a элемента li элемента ul идентификатора menu*/
  display:block; /*элемент блочный*/
}
#menu ul li a span.title{ /*элемент span класса .title ссылки a элемента li элемента ul идентификатора menu*/
  border-bottom:2px solid #ffc730; /*нижняя граница 2px, сплошная, цвет*/
}
#menu ul li a:hover{ /*при наведении курсора ссылка a элемента li элемента ul идентификатора menu*/
  background-color:#fff; /*цвет фоновой заливки элемента*/
}
#menu ul li a:hover span.title{ /*при наведении курсора на ссылку класс .title тега span ссылки a элемента li элемента ul идентификатора menu*/
  color:#ffc730; /*цвет текста*/
  border-bottom:2px solid #ffe430; /*нижняя граница 2px, сплошная, цвет*/
}
#menu ul li a span.text{ /*элемент span класса .text ссылки a элемента li элемента ul идентификатора menu*/
  padding:0px 5px; /*внутренние отступы все 0*/
  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; /*цвет*/
}
#menu ul li a:hover span.text{ /*при наведении курсора на ссылку класс .text тега span ссылки a элемента li элемента ul идентификатора menu*/
  visibility:visible;
}
</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. Так же архив содержит несколько картинок под кнопки других цветов.

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

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

Комментарии

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