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

Горизонтальное меню на чистом CSS

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

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

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

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

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

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

Далее создаем код HTML самого меню, он будет у нас в виде списка, вложенного в div, которому присвоим идентификатор menu. При необходимости title выставите сами. Замените # на свои ссылки, можете сменить имя идентификатора, сменив его и в коде CSS. Не забывайте следить за кодировкой.

<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>

На этом все.

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

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

Комментарии

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