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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

Оригинальное Jquery меню для вашего сайта с анимированным фоном, меню представлено в трёх вариантах на ваш выбор....

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

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

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

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

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

Красивое раскрывающиеся горизонтальное меню, реализованное на css и jquery. Меню отлично подойдёт для сайта дизайнера или фотографа....

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....
Интересные публикации:

Black and WhiteBlack and White

Black and White - современная премиум тема для wordpress в стиле минимализм и мощным функционалом....

Форма обратной связи с админкой PHP, JS, CSS, MySQL, AJAXФорма обратной связи с админкой PHP, JS,...

Универсальная форма обратной связи написанная на PHP, JS, CSS, MySQL, AJAX. Форма довольно гибкая в возможностях, с помощью админки......

The RockThe Rock

Превосходный html шаблон рок сайта, можно также использовать его как сайт распространяющий билеты на рок концерты, на главной странице расположен слай...

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

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

DecadenceDecadence

Очень красивый универсальный шаблон Decadence на историческую тему, построенный на HTML5, в шаблоне имеется выпадающее меню......

KroftKroft

Отличный шаблон построенный на HTML5, на главной странице располагается слайдер, есть возможность менять фон сайта непосредственно на странице......

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

Отличное горизонтальное меню с большое количество пунктов....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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