Выскальзывающее меню на CSS и jQuery
В данном уроке мы создадим интересное выскальзывающее меню. Идея заключается в том, что прямоугольник с пунктом меню при выборе выскальзывает вниз, а миниатюра выскакивает наверх. В меню есть также прямоугольник для подменю, которое имеется у некоторых пунктов меню. Подменю будет выскальзывать влево или вправо в зависимости от того, какой пункт меню выбран.
Разметка
Для HTML структуры используется неупорядоченный список, который содержит в качестве пунктов ссылку на основной пункт и элемент div для подменю:
<ul id="sdt_menu" class="sdt_menu"> <li> <a href="#"> <img src="/images/1.jpg" alt=""/> <span class="sdt_active"></span> <span class="sdt_wrap"> <span class="sdt_link">Портфолио</span> <span class="sdt_descr">Мои работы</span> </span> </a> <div class="sdt_box"> <a href="#">Веб сайты</a> <a href="#">Иллюстрации</a> <a href="#">Фотографии</a> </div> </li> ... </ul>
Если подменю нет, то элемент div можно просто опустить. Изображение сначала не будет выводиться, так как мы установим для него ширину и высоту равной 0 в CSS.
CSS
Начнем задавать стили для неупорядоченного списка:
ul.sdt_menu{ margin:0; padding:0; list-style: none; font-family:"Myriad Pro", "Trebuchet MS", sans-serif; font-size:14px; width:1140px; }
Также мы сбросим свойства text-decoration и outline для всех ссылок в нашем меню:
ul.sdt_menu a{ text-decoration:none; outline:none; }
Пункт списка будет смещаться влево и позиционироваться относительно, так как элементы внутри него будут позиционироваться абсолютно. Если этого не сделать, то абсолютно позиционированные элементы будут использовать координаты относительно всей страницы:
ul.sdt_menu li{ float:left; width:190px; height:85px; position:relative; cursor:pointer; }
Стиль для основного элемента ссылки, в котором имеются два элемента span для заголовка и описания:
ul.sdt_menu li > a{ position:absolute; top:0px; left:0px; width:190px; height:85px; z-index:12; background:transparent url(../images/overlay.png) no-repeat bottom right; -moz-box-shadow:0px 0px 2px #000 inset; -webkit-box-shadow:0px 0px 2px #000 inset; box-shadow:0px 0px 2px #000 inset; }
Обратите внимание на свойство z-index: мы будем определять порядок расположения всех важных элементов, поэтому нужный всегда будет оставаться наверху.
Мы используем фоновое изображение, которое создает эффект стекла с помощью полупрозрачного градиента. При использовании какой-нибудь текстуры для фона получается отличный эффект. Попробуйте использовать различные текстуры!
Также можно изменять тени – установка значений 2px 2px 6px #000 inset создает прелестный эффект.
Изображения будут иметь следующие стили:
ul.sdt_menu li a img{ border:none; position:absolute; width:0px; height:0px; bottom:0px; left:85px; z-index:100; -moz-box-shadow:0px 0px 4px #000; -webkit-box-shadow:0px 0px 4px #000; box-shadow:0px 0px 4px #000; }
Мы будем анимировать изображения так, как будто они появляются снизу, поэтому они позиционируются абсолютно с использованием свойства “bottom” в качестве исходной точки. Также используются тени. Первые два значения 0 устанавливают равномерное распределение тени вокруг изображения. Мы используем такие тени в элементе ссылки. Такое распределение тени можно применять тогда, когда нужно организовать светлую границу. При этом не нужно беспокоиться о вычислении высоты и ширины элемента. Недостаток такого использования тени заключается в том, что CSS3 не поддерживается в IE.
Контейнер для элементов span заголовка и описания будет иметь следующий стиль:
ul.sdt_menu li span.sdt_wrap{ position:absolute; top:25px; left:0px; width:190px; height:60px; z-index:15; }
Если вы будете использовать более длинный текст, вам надо адаптировать данные значения. Также нужно скорректировать значения в анимации JavaScript.
Определим стили для серого прямоугольника, который будет выскальзывать вниз. Установим для него высоту 0 и будем позиционировать его таким образом, чтобы нужно было только увеличивать высоту при анимации.
ul.sdt_menu li span.sdt_active{ position:absolute; background:#111; top:85px; width:190px; height:0px; left:0px; z-index:14; -moz-box-shadow:0px 0px 4px #000 inset; -webkit-box-shadow:0px 0px 4px #000 inset; box-shadow:0px 0px 4px #000 inset; }
Стили для элементов span и ссылок в прямоугольниках:
ul.sdt_menu li span span.sdt_link, ul.sdt_menu li span span.sdt_descr, ul.sdt_menu li div.sdt_box a{ margin-left:15px; text-transform:uppercase; text-shadow:1px 1px 1px #000; }
Заголовок и описание будут иметь следующие стили:
ul.sdt_menu li span span.sdt_link{ color:#fff; font-size:24px; float:left; clear:both; } ul.sdt_menu li span span.sdt_descr{ color:#0B75AF; float:left; clear:both; width:155px; /*Для тупого IE7*/ font-size:10px; letter-spacing:1px; }
Прямоугольник подменю изначально скрыт под серым прямоугольником. Затем, мы анимируем его выдвижение вправо или влево в зависимости от расположения пункта меню. Если мы поместим курсор на последний пункт меню, то подменю будет выдвигаться влево, а во всех остальных случаях выдвижение будет проводиться вправо.
ul.sdt_menu li div.sdt_box{ display:block; position:absolute; width:190px; overflow:hidden; height:190px; top:85px; left:0px; display:none; background:#000; } ul.sdt_menu li div.sdt_box a{ float:left; clear:both; line-height:30px; color:#0B75AF; }
Первая ссылка в подменю должна иметь отступ сверху:
ul.sdt_menu li div.sdt_box a:first-child{ margin-top:15px; } ul.sdt_menu li div.sdt_box a:hover{ color:#fff; }
JavaScript
Когда курсор мыши заходит на элемент списка, мы увеличиваем изображение и выводим оба элемента span sdt_active и sdt_wrap. Если элемент имеет подменю (sdt_box), то его надо выдвинуть. Если элемент последний в списке, то подменю будет выдвигаться влево, а в остальных случаях вправо:
$(function() { $('#sdt_menu > li').bind('mouseenter',function(){ var $elem = $(this); $elem.find('img') .stop(true) .animate({ 'width':'190px', 'height':'190px', 'left':'0px' },400,'easeOutBack') .andSelf() .find('.sdt_wrap') .stop(true) .animate({'top':'140px'},500,'easeOutBack') .andSelf() .find('.sdt_active') .stop(true) .animate({'height':'190px'},300,function(){ var $sub_menu = $elem.find('.sdt_box'); if($sub_menu.length){ var left = '190px'; if($elem.parent().children().length == $elem.index()+1) left = '-190px'; $sub_menu.show().animate({'left':left},200); } }); }).bind('mouseleave',function(){ var $elem = $(this); var $sub_menu = $elem.find('.sdt_box'); if($sub_menu.length) $sub_menu.hide().css('left','0px'); $elem.find('.sdt_active') .stop(true) .animate({'height':'0px'},300) .andSelf().find('img') .stop(true) .animate({ 'width':'0px', 'height':'0px', 'left':'85px'},400) .andSelf() .find('.sdt_wrap') .stop(true) .animate({'top':'25px'},500); }); });
Готово!
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/mvDKf2LcMFo/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Не делай другим то, что ты хотел бы, чтобы они делали для тебя. У вас могут быть разные вкусы Шоу Джордж Бернард - (1856-1950) - английский писатель. В своем творчестве ниспровергал догматизм и предвзятость, традиционность представлений |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.