Адаптивное выпадающее меню на CSS3 и jQuery
В данном уроке мы сделаем адаптивное выпадающее меню на jQuery и CSS3.
Разметка HTML
Структура HTML будет строиться с мета тегом viewport
для управления шаблоном на мобильных устройствах.
Обычно оптимизированные для мобильных приложений сайты содержат следующие команды:
<head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> </head>
CSS и JavaScript подключаются следующими строчками:
<link rel="stylesheet" type="text/css" href="/styles.css" media="all" /> <script src="/js/jquery-1.7.2.min.js"></script>
JavaScript код, который строит навигационное меню для мобильных устройств выглядит так:
<!-- javaScript --> <script> <!-- // Стрим меню для мобильных устройств --> $(function(){ // Добавляем элемент select $('<select />').appendTo('nav'); //Добавляем опции в элемент select $('<option />', { 'selected': 'selected', 'value' : '', 'text': 'Choise Page...' }).appendTo('nav select'); $('nav ul li a').each(function(){ var target = $(this); $('<option />', { 'value' : target.attr('href'), 'text': target.text() }).appendTo('nav select'); }); // Событие onclicking при нажатии на ссылку $('nav select').on('change',function(){ window.location = $(this).find('option:selected').val(); }); }); // Выводим и скрываем подменю $(function(){ $('nav ul li').hover( function () { // Выводим подменю $('ul', this).slideDown(150); }, function () { // Скрываем подменю $('ul', this).slideUp(150); } ); }); </script>
Само выпадающее меню будет иметь следующую структуру:
<div id="fdw"> <!--Навигация--> <nav> <ul> <li class="current"><a href="http://www.ruseller.com" target="_balnk">Главная<span class="arrow"></span></a> <ul style="display: none;" class="sub_menu"> <li class="arrow_top"></li> <li><a class="subCurrent" href="http://www.ruseller.com" target="_balnk">Пророчества</a></li> <li><a href="http://www.ruseller.com" target="_balnk">Откровения</a></li> </ul> </li> <li><a href="http://www.ruseller.com" target="_balnk">О нас</a></li> <li><a href="http://www.ruseller.com" target="_balnk">Услуги</a></li> <li> <a href="http://www.ruseller.com" target="_balnk">Портфолио<span class="arrow"></span></a> <ul style="display: none;" class="sub_menu"> <li class="arrow_top"></li> <li><a href="http://www.ruseller.com" target="_balnk">Портфолио 3 </a></li> <li><a href="http://www.ruseller.com" target="_balnk">Портфолио 4 </a></li> <li><a href="http://www.ruseller.com" target="_balnk">Портфолио 1 </a></li> <li><a href="http://www.ruseller.com" target="_balnk">Портфолио 2 </a></li> </ul> </li> <li> <a href="http://www.ruseller.com" target="_balnk">Блог<span class="arrow"></span></a> <ul style="display: none;" class="sub_menu"> <li class="arrow_top"></li> <li><a href="http://www.ruseller.com" target="_balnk">Дизайн</a></li> <li><a href="http://www.ruseller.com" target="_balnk">HTML5</a></li> <li><a href="http://www.ruseller.com" target="_balnk">CSS3</a> </li><li><a href="http://www.ruseller.com" target="_balnk">jQuery</a></li> </ul> </li> <li><a href="http://www.ruseller.com" target="_balnk">Контакты</a></li> </ul> </nav> </div>
CSS
Для меню используются следующие стили:
#fdw nav select { display:none; /* Для дисплеев мобильных устройств */ } #fdw nav ul { display:block; z-index:999999; } #fdw nav ul li { display:inline-block; padding:50px 3px 30px; margin-left:30px; position:relative; } #fdw nav ul li a:link, #fdw nav ul li a:visited { color:#444; font:normal 20px 'Yanone Kaffeesatz', sans-serif; text-transform:uppercase; display:inline-block; position:relative; } #fdw nav ul li a:hover, #fdw nav ul li a:active { color:#e25d29; text-decoration:none; } #fdw nav ul li span { position:absolute; right:-12px; bottom:6px; width:7px; height:8px; margin:0 0 0 3px; float:right; display:block; background:url('images/nav_arrow.png') no-repeat left -8px; font:0/0 a; } #fdw nav ul li.current { border-bottom:2px solid #e25d29; } #fdw nav ul li.current a { color:#e25d29; cursor: default; } #fdw nav ul li.current a span { background:url('../images/nav_arrow.png') no-repeat left 0; } #fdw nav ul li.current ul li a { cursor:pointer; } /*===== Стили для sub_menu =======*/ #fdw nav ul li ul.sub_menu { position:absolute; top:90px; left:0; margin:0; padding:0; background:#fff; border:1px solid #ececec; border-top:5px solid #e25d29; display:none; z-index:999999; -moz-box-shadow: 0px 6px 7px #121012; -webkit-box-shadow: 0px 6px 7px #121012; box-shadow: 0px 6px 7px #121012; } #fdw nav ul li ul.sub_menu li.arrow_top { position:absolute; top:-12px; left:12px; width:13px; height:8px; display:block; border:none; background:url('images/arrow_top.png') no-repeat left top; } #fdw nav ul li ul.sub_menu li { float:none; margin:0; padding:0; border-bottom:1px solid #ececec; } #fdw nav ul li ul.sub_menu li a { white-space: nowrap; width: 150px; padding:12px; font:13px Arial, tahoma, sans-serif; text-transform:capitalize; color:#777; } #fdw nav ul li ul.sub_menu li a:hover { background:#f9f9f9; color:#333; } #fdw nav ul li ul.sub_menu li a.subCurrent { color:#e25d29; cursor:default; } #fdw nav ul li ul.sub_menu li a.subCurrent:hover { background:none; } /*===========================================*/ @media only screen and (min-width: 768px) and (max-width: 959px) { /* nav */ #fdw nav ul li{ margin-left:12px; } } /* Для всех мобильных устройств */ @media only screen and (max-width: 767px) { /* Навигационное меню */ #fdw nav ul { display:none; } #fdw nav select { width:100%; display:block; margin-bottom:30px; cursor:pointer; padding:6px; background:#f9f9f9; border:1px solid #e3e3e3; color:#777; } }
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/jX3zfyfxT-8/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 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 контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
- 2024-01-18 » Мифический человеко-DevOps
- 2023-12-28 » Google подвел итоги 2023 года в поиске
- 2023-12-28 » 5 ошибок отдела продаж, из-за которых вы теряете клиентов
- 2023-12-28 » Американский суд признал монополию Google на рынках дистрибуции Android-приложений
- 2023-12-28 » Хостинг-провайдер GoDaddy перестанет оказывать услуги пользователям из России
Секрет быть несчастным: иметь время занудствовать на тему, счастлив ты или нет Шоу Джордж Бернард - (1856-1950) - английский писатель. В своем творчестве ниспровергал догматизм и предвзятость, традиционность представлений |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.