Простое горизонтальное меню - Сайт вебмастера
Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Как узнать погоду за окном?
Всего ответов: 1888
Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Гости Пользователи
Дополнительно
Главная » Скрипты для сайта » Меню для сайта

Простое горизонтальное меню

Хочешь сказать спасибо? Кликни на рекламный баннер.

15.08.2015, 13:36
Это простое, симпатичное горизонтальное меню располагается вверху web страницы с выплывающими пунктами при наведении. В нём используется CSS и JavaScript.

HTML разметка:

Код
<ul id="navigation">
<li class="home"><a href="ССЫЛКА"><span>Главная</span></a></li>
<li class="news"><a href="ССЫЛКА"><span>Новости</span></a></li>
<li class="auth"><a href="ССЫЛКА"><span>Вход</span></a></li>
<li class="reg"><a href="ССЫЛКА"><span>Регистрация</span></a></li>
<li class="compet"><a href="ССЫЛКА"><span>Конкурсы</span></a></li>
<li class="tos"><a href="ССЫЛКА"><span>Правила</span></a></li>
<li class="supp"><a href="ССЫЛКА"><span>Поддержка</span></a></li>
</ul>


CSS стили:

Код
ul#navigation {
  position: fixed; /* ФИКСИРОВАННОЕ позиционирование */
  margin: 0px;
  padding: 0px;
  top:102px; /* Положение от верхнего края */
  right: 300px; /* Положение от правого края */
  list-style: none;
  z-index:1; /* Позиционированние элемента */
  width:721px;
}
ul#navigation li {
  width: 103px;
  display:inline;
  float:left;  
}
ul#navigation li a {
  display: block;
  float:left;
  margin-top: -2px;
  width: 100px;
  height: 25px;
  background-color:#E7F2F9;
  background-repeat:no-repeat;
  background-position:50% 10px;
  border:1px solid #BDDCEF;
  -moz-border-radius:0px 0px 10px 10px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -khtml-border-bottom-right-radius: 10px;
  -khtml-border-bottom-left-radius: 10px;
  text-decoration:none;
  text-align:center;
  padding-top:80px;
  opacity: 0.7;
   
}
ul#navigation li a:hover {background-color:#CAE3F2;}

ul#navigation li a span {
  letter-spacing:2px;
  font-size:11px;
  color:#60ACD8;
  text-shadow: 0 -1px 1px #fff;  
}
ul#navigation .home a {background-image: url(home.png);}

ul#navigation .news a {background-image: url(news.png);}

ul#navigation .auth a {background-image: url(auth.png);}

ul#navigation .reg a {background-image: url(reg.png);}

ul#navigation .compet a {background-image: url(compet.png);}

ul#navigation .tos a {background-image: url(tos.png);}

ul#navigation .supp a {background-image: url(supp.png);}


JavaScript для выплывающих пунктов при наведении:

Код
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>


Вот и всё. Надеюсь Вам понравилось. Удачи Вам.





Если у Вас возникли вопросы по установке или работе скрипта, то задайте их в комментариях и мы постараемся вам помочь.

Источник материала: Неизвестен/Не указан
При коприровании материала просьба ставить ссылку на оригинальную статью.

Похожие материалы :
Ссылка:
BB-код:
HTML-код:
Добавил: -angel- | Просмотров: 1515 | Загрузок: 118 | Рейтинг: 5.0/2
Теги: скрипт, Простое, горизонтальное, меню
Всего комментариев: 0
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

Язык хамелеона в два раза длиннее его самого.


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта