Красивое выпадающее меню на CSS3 и JQuery | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSКрасивое выпадающее меню на CSS3 и JQuery
Дата: 19.04.2013 в 20:34 | Просмотров: 11320

Красивое выпадающее меню на CSS3 и JQuery

Красивое выпадающее меню на CSS3 и JQuery
Скачатьбесплатно с сервера
Демодемонстрация

Как создать выпадающее меню? Этот вопрос наверное задавал каждый начинающий веб-мастер. И если Вы искали ответ на этот вопрос, то значит Вы попали точно по адресу! Почему? Потому, что в этом уроке мы создадим красивое выпадающее меню с использованием последних новшеств CSS3, а также библиотеку JQuery качества меню, а также правильного отображения при разных разрешениях экрана. Подобное меню, только другого дизайна, мы уже создавали в этой статье “Горизонтальное выпадающее меню на CSS3″.
При создании меню мы будем использовать следующие плагины:
- JQuery-плагин 1.7.2.
Давайте начнем с HTML разметки.

HTML структура

Обычный мобильный оптимизированный сайт содержит что-то вроде следующего:

Подключаем CSS стили и JavaScript следующим, в общем обычным способом:

JavaScript функции, чтобы выбрать nav для мобильных устройств и показывать или скрывать подменю:

Выпадающее меню будет иметь следующую структуру:

Каскадные Таблицы Стилей (CSS):

Создать красивое выпадающее меню без стилей просто невозможно, поэтому вот они (стили всмысле :) ):

Функция запроса CSS будет иметь следующий код:

Готово! У нас красивое выпадающее меню на JQuery и CSS3. Ознакомьтесь с демонстрацией, и загружайте его на свой компьютер (сейчас или в будущем оно Вам обязательно пригодится). Надеюсь, этот урок Вам понравился и был полезен!

Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://www.freshdesignweb.com
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. Здраствуйте! Скажите пожалуйста, а подчеркивание кнопок двигается в зависимо от места положения посетителя?

      1. Влад Бондаренко (Admin):
        /

        Здравствуйте! Сейчас точно сказать не могу, но если Вы решите реализовать подобное меню, то с данным моментом поможем.

        1. Да, я хочу поставить это меню на свой сайт, но получается так, что переходя по ссылкам, подчеркнутым и в красном свете остается только кнопка “главная”. К примеру, я бы хотел, чтобы при нажатии допустим на кнопку “о нас”, посетитель переходил на эту страницу и подсвечивалась с подчеркиванием именно эта кнопка (даже если нажималось подменю этой кнопки. Сайт-черновик: http://baby-good.at.ua/

          1. Влад Бондаренко (Admin):
            /

            Извините за задержку с ответом.
            Используйте следующий скрипт (пробелы в теге script удалите):

            < script type="text/javascript" >
            $(document).ready(function() {
            $(‘#fdw’).children(‘li’).each(function(index, element) {
            var url = window.location;
            if($(element).find(‘a’).attr(‘href’) == url.protocol+’//’+url.location.host+url.pathname)
            $(element).addClass(‘class’, ‘current’);
            });
            });
            < /script >

    1. Может я что то не так делаю, но ничего не происходит! Его поставить туда же где и родной скрипт или вместо него ?

      1. Влад Бондаренко (Admin):
        /

        При копировании одинарные кавычки стали отображаться неправильно (в коде они с наклоном у Вас на сайте), Вам необходимо заменить их на обычные одинарные ‘

    1. Скажите Влад, вариантов больше нет?

      1. Влад Бондаренко (Admin):
        /

        Попробуйте это (пробелы уберите, и если что, подредактируйте кавычки):

        < script >
        $(document).ready(function(){
        var str=location.href.toLowerCase();
        $(‘#fdw li a’).each(function() {
        if (str.indexOf(this.href.toLowerCase()) > -1) {
        $(“li.current”).removeClass(“current”);
        $(this).parent().addClass(“current”);
        }
        });
        });
        < /script >

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

      1. Влад Бондаренко (Admin):
        /

        Здравствуйте! Честно говоря сейчас очень загружен, очень мало времени. Чтобы удалить подчёркивание, удалите следующее из тега li

        class=”current”

        .

    1. Спасибо! Надеюсь когда-нибудь моя мечта реализируется ;-) Удачи Вам !

Добавить комментарий