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

Горизонтальное меню на CSS в виде кнопок магнитофона со свечением текста

опубликовал admin | дата публикации : 02.01.2012 | просмотров 2858

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

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

Создадим код CSS и вставим его в теге head страницы.

<style type="text/css">
div.menu { /*контейнер div класса menu*/
  background: url("fon.png") repeat-x 0 0; /* фон меню , укажите свой, правильный путь */
  height:80px; /*высота 80px */
  overflow: hidden; /* задаем область и что произойдет с содержимым, которое выйдет за границы заданной области -т.е. скрыть (не отображается) */
}
div.menu div#menu{ /*контейнер div с идентификатором menuforsite контейнерa div класса menu*/
  float: left; /*выравниваем по левой стороне, остальные элементы обтекают справа*/
  padding:0; /*внутренние отступы все 0*/
  height:80px; /*высота 80px*/
  margin: 0 10px; /*внешние отступы сверху-снизу 0, справа-лева 10px*/
}
div.menu a{ /*ссылка контейнера div класса menu*/
  background: url("img.png") repeat-x 0 0; /*фоновое изображение и путь к изображению, размножаем фоновое изображение горизонтально*/
  color: #bbb; /*цвет ссылки*/
  display: block; /*блочный элемент - элементы начинаются с новой строки. После элемента также добавляется перенос строки*/
  float: left; /*выравниваем по левой стороне, остальные элементы обтекают справа*/
  font: 17px/63px Impact; /* высота шрифта (ДЛЯ КОРРЕКТНОГО ОТОБРАЖЕНИЯ ЖЕЛАТЕЛЬНО НЕ МЕНЯТЬ!), семейство шрифтов */
  height:65px; /*высота 65px*/
  text-decoration: none; /*подчеркивание - отсутствует*/
  text-align: center; /*выравнивание текста по центру*/
  width: 147px; /*ширина элемента*/
  overflow: hidden; /* задаем область и что произойдет с содержимым, которое выйдет за границы заданной области -т.е. скрыть (не отображается) */
  margin: 10px 0 0 0; /*внешние отступы сверху, снизу, справа, слева*/
  text-shadow: #000 0 0 1px; /*задаем эффект тени тексту элемента. При этом размер элемента не меняется, цвет, смещение по осям x и y, радиус тени*/
}
div.menu a:hover, div.menu a.active{ /*ссылка контейнера div класса menu при наведении и активная*/
  background: url("img.png") repeat-x 0 100%; /*фоновое изображение и путь к изображению, по размеру элемента*/
  color: #0ada00; /*цвет ссылки*/
  text-shadow: #ffff00 0 0 20px; /*задаем эффект тени тексту элемента. При этом размер элемента не меняется, цвет, смещение по осям x и y, радиус тени*/
}
</style>

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

<div class="menu"> <!--/*контейнер div класса menu*/-->
  <div id="menu"> <!--/*контейнер div с идентификатором menu*/-->
    <a href="http://www.menuforsite.ru/">Главная</a>
    <a class="active" href="#">Ссылка 2</a>
    <a href="#">Ссылка 3</a>
    <a href="#">Ссылка 4</a>
    <a href="#">Ссылка 5</a>
  </div>
</div>

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

Ну и еще один момент, если необходимо выровнять меню по центру, скопируйте следующий javascript код и вставьте его в начале страницы.

<script type="text/javascript">
if (window.attachEvent){
   window.attachEvent('onresize',center);
   window.attachEvent('onload',center);
}else if(window.addEventListener){
   window.addEventListener('resize',center, false);
   window.addEventListener('load',center, false);
};
function center(){
   var i = document.getElementById('menu');
   i.style.marginLeft = parseInt(document.body.offsetWidth-i.offsetWidth)/2+'px';
};
</script>
ДЕМО ПРИМЕРА | СКАЧАТЬ АРХИВ (загрузок 418 )

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

Комментарии

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