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

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

ОБСУЖДЕНИЕ

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

Горизонтальное выпадающее меню с помощью jquery
Просмотров: 3099  Скачан: 250 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

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

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

Горизонтальное меню в виде куба «Boxes Menu»Горизонтальное меню в виде куба «Bo...

Меню в виде куба с красивым эффектом трансформации....

Многоуровневое фиксированное меню на cssМногоуровневое фиксированное меню н...

Горизонтальное многоуровневое фиксированного меню в темном стиле...

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

Меню в стиле Apple, созданное полностью на css3.

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

Отличное горизонтальное меню с большое количество пунктов....

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

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

Cлайдер КарусельCлайдер Карусель

Слайдер картинок, с бесконечной прокруткой, в слайдере имеется красивый эффект......

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

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

Pack кнопок на CSS3Pack кнопок на CSS3

Pack стильных кнопок на css3, в паке представлены восемь кнопок разного размера и цвета....

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

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

Круговой слайдерКруговой слайдер css3

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

Прозрачная форма регистрации с прогресс баромПрозрачная форма регистрации с прогресс ...

Стильная прозрачная форма регистрации на css3 и JQuery. В форме имеется прогресс бар показывающий пользователю процесс заполнения формы....

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

Современный бизнес шаблон HTML с превосходным дизайном, который представлен в 16 различных шаблонах....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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