background
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Горизонтальное выпадающее меню на jquery

Горизонтальное выпадающее меню с помощью jquery
Просмотров: 2140  Скачан: 203 раз  Комментариев в теме: 0

Горизонтальное меню с выпадающими пунктами на jquery, меню в темном стиле и хорошо подойдёт к темному дизайну сайта.

Шаг 1 - создание разметки

 

HTML

<div class="page">
    <ul id="menu_nav">
        <li><a class="first" href="#">Главная</a></li>
        <li><a class="first_center" href="#">Шаблоны</a>
            <ul class="clik_nav">
                <li><a href="#">Подменю #2</a></li>
                <li><a href="#">Подменю #3</a></li>
                <li><a href="#">Подменю #4</a></li>
            </ul>
        </li>
        <li><a class="first_center" href="#">Интересное</a></li>
        <li><a class="first_center" href="#">Дизайн сайта</a>
            <ul class="clik_nav">
                <li><a href="#">Подменю #1</a></li>
                <li><a href="#">Подменю #2</a></li>
                <li><a href="#">Подменю #3</a></li>
                <li><a href="#">Подменю #5</a></li>
                <li><a href="#">Подменю #6</a></li>
                <li><a href="#">Подменю #7</a></li>
                <li><a href="#">Подменю #8</a></li>
                <li><a href="#">Подменю #9</a></li>
                <li><a href="#">Подменю #10</a></li>
            </ul>
        </li>
        <li><a class="first_center" href="#">JavaScript и JQuery</a></li>
        <li><a class="first_center" href="#">Новичкам</a></li>
        <li><a class="first_center" href="#">CSS</a></li>  
        <li><a class="first_left" href="#">WordPress</a></li>  
    </ul>
</div>  

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function() {
    $('#menu_nav li').find('.clik_nav').hide();
    $('#menu_nav li').hover(function() {
        $(this).find('.clik_nav').fadeIn(400);
    }, function() {
        $(this).find('.clik_nav').fadeOut(100);
    });
});
</script>
Материалы по теме:

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

Меню с красивым эффектом, суть в том, когда вы перемешаете курсор мыши по навигации, ползунок будет плавно......

Горизонтальное прокручивающиеся меню «Scrollable Menu»Горизонтальное прокручивающиеся мен...

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......

Меню с фоновым изображением «Tab Menu»Меню с фоновым изображением «Tab Me...

Меню с фоновым изображением, при переходе по разделам меню, выбранный вами раздел......

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

Горизонтальное меню реализованное на css, подпункты открываются при наведении курсора......

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

Выпадающее мульти меню, как вариант вывода безграничного количества пунктов....

Оригинальное меню в виде клочка бумагиОригинальное меню в виде клочка бум...

Меню в оригинальном стиле, в виде потёртого клочка бумаги....

Горизонтальное меню с выдвигающимися иконкамиГоризонтальное меню с выдвигающимис...

Неплохое горизонтальное меню с выдвигающимися иконками. Когда вы переходите по навигации, иконки......
Интересные публикации:

HTML шаблон ImagoHTML шаблон Imago

Современный бизнес шаблон HTML с превосходным дизайном, который представлен в 16 различных шаблонах....

TanyaCMS 1.0TanyaCMS 1.0

TanyaCMS - это довольно не плохой скрипт вопросов - ответов, скрипт отвечает всем современным требованиям....

Красивые кнопки на css3Красивые кнопки на css3

Оригинальные кнопки на css3, вам дано на выбор несколько кнопок, каждая по своему привлекательна, без сомнения посетители вашего сайта не останутся ра...

Вертикальное меню с прокруткой на JQueryВертикальное меню с прокруткой на JQuery

Меню с прокруткой, реализованое с помощью jquery, главная особенность такого меню......

Новостная карусель на css и JQureyНовостная карусель на css и JQurey

Стильная новостная карусель на css и JQurey, отлично подойдут для вывода последних новостей на сайте, карусель имеет два стиля (темный и светлый)....

Сборка кнопок #3 на css3Сборка кнопок #3 на css3

Отличная сборка кнопок №3 на css3, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки, круглые кнопки, анимационные)....

Super Changer v2.1Super Changer v2.1

SuperChanger - это адаптивный журнальный шаблон для wordpress. Основным преимуществом шаблона является разнообразие цветовых стилей оформления......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.0/5( Голосов 6 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить