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



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


Маленькое интересное меню



Это меню я нашла на просторах интернета. Небольшое, но интересное и красивое небольшое меню.

.menu { font:15pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Размер и семейство шрифта */ font-weight:bold; /* Делаем шрифт толстым */ } .menu a{ /* Округления START */ border-radius: 10px;/*Закругляем углы*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; /* Округления END */ text-decoration:none; /* Убираем нижнюю линию под ссылкой */ color:#2277B0; /* Цвет ссылки */ padding:9px; /* Внутренний отступ */ } .menu a:hover{ border:1px solid #E7E7E7; /* Обводка */ /* Градиент START */ background: rgb(249,249,249); background: -moz-linear-gradient(top, rgba(249,249,249,1) 1%, rgba(237,237,237,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(249,249,249,1)), color-stop(100%,rgba(237,237,237,1))); background: -webkit-linear-gradient(top, rgba(249,249,249,1) 1%,rgba(237,237,237,1) 100%); background: -o-linear-gradient(top, rgba(249,249,249,1) 1%,rgba(237,237,237,1) 100%); background: -ms-linear-gradient(top, rgba(249,249,249,1) 1%,rgba(237,237,237,1) 100%); background: linear-gradient(top, rgba(249,249,249,1) 1%,rgba(237,237,237,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ededed',GradientType=0 ); /* Градиент END */ }

На странице размещаем блок с классом "menu"

<div class="menu"> <a href="http://www.valvas.ru/">Главная</a><a href="#">BlueCode</a><a href="#">Главная</a> <a href="#">BlueCode</a> </div>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР      СКАЧАТЬ ИСХОДНИКИ


Маленькое меню для сайта


Немного поработав с ним, я сделала меню для своего сайта


.menu { float:right; /* обтекание текста справа */ position:absolute; /* позиционирование блока */ font:15px "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Размер и семейство шрифта */ font-weight:bold; /* Делаем насыщенность шрифта */ z-index:5; /*расположение элемента при позиционировании*/ left: 454px; /* центрируем меню */ top: 20px; /* делаем отступ от верха */ } .menu a{ /* Округления START */ border:3px solid #FFF; /* толщина, вид и цвет рамки */ background:#D6D6D6; /* фон */ -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;/*радиус скругления уголков рамки*/ /* Округления END */ text-decoration:none; /* Убираем нижнюю линию под ссылкой */ color:#CC3300; /* Цвет ссылки */ padding:9px; /* Внутренний отступ */ } .menu a:hover{ border:1px solid #A3A3A3; /* Обводка */ /* Градиент START */ background: rgb(249,249,249); background: -moz-linear-gradient(top, rgba(249,249,249,1) 1%, rgba(237,237,237,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(249,249,249,1)), color-stop(100%,rgba(237,237,237,1))); background: -webkit-linear-gradient(top, rgba(249,249,249,1) 1%,rgba(237,237,237,1) 100%); background: -o-linear-gradient(top, rgba(249,249,249,1) 1%,rgba(237,237,237,1) 100%); background: -ms-linear-gradient(top, rgba(249,249,249,1) 1%,rgba(237,237,237,1) 100%); background: linear-gradient(top, rgba(249,249,249,1) 1%,rgba(237,237,237,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ededed',GradientType=0 ); /* Градиент END */

На странице размещаем блок с классом "menu"

<div class="menu"><a href="http://www.valvas.ru/">Главная</a> <a href="#"onclick="return !window.open(this.href)">Новости</a> <a href="#" onclick="return !window.open(this.href)">Статьи</a> <a href="#">Карта</a> <a href="#" onclick="return !window.open(this.href)">О себе</a> <a href="#" onclick="return !window.open(this.href)">Гостевая</a></div>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР      СКАЧАТЬ ИСХОДНИКИ


Все изменения указаны в комментариях. Вы можете сделать свои изменения под свой сайт. Для этого достаточно изменить размер и семейство шрифта, насыщенность шрифта; толщину, вид и цвет рамки; цвет ссылки. Не бойтесь экспериментировать.

24.06.2013

Далее рассмотрим: Красивое горизонтальное меню для сайта на jQuery и HTML5