Выпадающее меню без js
Навигация - один из важнейших факторов на сайте. Меню навигации помогает перемещаться по страницам, благодаря меню посетитель может ориентироваться на вашем сайте, находить нужные разделы.
Навигация сайта - важный параметр при общей оценке юзабилити, поэтому создание основного меню это очень важный шаг. В данном уроке мы создадим html меню, добавим к нему стили css.
На выходе должно получиться меню навигации с выпадающими при наведении подпунктами. Особенностью данного вида меню будет отсутствие js, нам не понадобится ничего, только html и css. Итак приступим:
Для создания нашего меню будем использовать списки html, которые идеально подходят для подобных задач. Присвоим идентификатор нашему ul контейнеру, например id=nav, и создадим 5 пунктов, после чего начальный код html будет выглядеть так:
<ul id="nav"> <li><a href="/">Главная</a></li> <li><a href="/">Услуги</a></li> <li><a href="/">Витрина</a></li> <li><a href="/">Стол заказов</a></li> <li><a href="/about">О нас</a></li> </ul>
У нас есть html меню на пять пунктов, начало положено. Теперь давайте добавим в наше меню выпадающие подпункты. Главная и О нас оставим без выпадающих пунктов, а для остальных создадим их.
Окажу помощь в разработках или сайты под ключ, пишите запросы в комменты или контакты. Большое количество готовых сайтов, контент на разные тематики: интересно, качественно, недорого.
Для примера наше меню будет иметь по три подпункта. Подпункты будут находиться в контейнере ul. Добавим его в основной пункт меню , перед закрывающим li.
<ul id="nav"> <li><a href="/">Главная</a></li> <li><a href="/">Услуги</a> <ul> <li><a href="#">Подпункт первый</a></li> <li><a href="#">Подпункт второй</a></li> <li><a href="#">Подпункт третий</a></li> <li><a href="#">Подпункт четвертый</a></li> <li><a href="#">Подпункт пятый</a></li> </ul> </li> <li><a href="/">Витрина</a> <ul> <li><a href="#">Подпункт первый</a></li> <li><a href="#">Подпункт второй</a></li> <li><a href="#">Подпункт третий</a></li> <li><a href="#">Подпункт четвертый</a></li> <li><a href="#">Подпункт пятый</a></li> </ul> </li> <li><a href="/">Стол заказов</a> <ul> <li><a href="#">Подпункт первый</a></li> <li><a href="#">Подпункт второй</a></li> <li><a href="#">Подпункт третий</a></li> <li><a href="#">Подпункт четвертый</a></li> <li><a href="#">Подпункт пятый</a></li> </ul> </li> <li><a href="/about">О нас</a></li> </ul>
Теперь наше html меню практически готово, но еще впереди работа с css стилями, без них все подпункты будут видны, и вообще навигацией сайта его будет назвать трудно в таком виде.
Поэтому давайте добавим юзабилити в само html меню, например, разместив закрашенный треугольник, показывающий выпадающие подпункты. Чтобы не использовать лишнее обращение к изображению, выведем треугольник в меню навигации с помощью символьного кода ▼ и заключим его в контейнер span.
Так как выше было указано, что пунктов с выпадающим меню будет всего три, значит в них и добавим наш span. В итоге конечный вариант html меню навигации по сайту будет выглядеть так:
<ul id="nav"> <li><a href="/">Главная</a></li> <li><a href="/">Услуги<span>▼</span></a> <ul> <li><a href="#">Подпункт первый</a></li> <li><a href="#">Подпункт второй</a></li> <li><a href="#">Подпункт третий</a></li> <li><a href="#">Подпункт четвертый</a></li> <li><a href="#">Подпункт пятый</a></li> </ul> </li> <li><a href="/">Витрина<span>▼</span></a> <ul> <li><a href="#">Подпункт первый</a></li> <li><a href="#">Подпункт второй</a></li> <li><a href="#">Подпункт третий</a></li> <li><a href="#">Подпункт четвертый</a></li> <li><a href="#">Подпункт пятый</a></li> </ul> </li> <li><a href="/">Стол заказов<span>▼</span></a> <ul> <li><a href="#">Подпункт первый</a></li> <li><a href="#">Подпункт второй</a></li> <li><a href="#">Подпункт третий</a></li> <li><a href="#">Подпункт четвертый</a></li> <li><a href="#">Подпункт пятый</a></li> </ul> </li> <li><a href="/about">О нас</a></li> </ul>
Меню готово, но пока работать не будет. Нужно еще в css стили соответствующие создать, поэтому можно сказать что навигация сайта готова на 50%, а еще точнее можно сказать что меню на стадии разработки.
Для того чтобы меню навигации было готово на 100% , допишем такие стили. Первым делом сброс отступов для списков, если у вас они уже прописаны, то этот пункт можно пропустить, но так как пример меню строится с нуля, в нашем коде сброс обязателен.
Далее стилизуем видимую часть меню, выпадающие подпункты, смещаем за пределы экрана ту часть, которая должна выводиться только при наведении, и делаем ее прозрачной полностью, то есть невидимой.
Окажу помощь в разработках или сайты под ключ, пишите запросы в комменты или контакты. Большое количество готовых сайтов, контент на разные тематики: интересно, качественно, недорого.
В результате этих действий, видимая часть меню будет состоять из пяти пунктов, а подпункты в трех из пяти будут выводиться при наведении. В коде приведены подробные объяснения некоторых ключевых селекторов в виде комментария. Готовый css код будет выглядеть так:
/*Сбросим отступы*/ ul,ol,li{margin:0;padding:0} /*Стили меню*/ #nav{ float:left; width:100%; font-weight:bold; box-shadow:0 0 4px #222; border:3px ridge #fff } /*Стили пунктов меню*/ #nav li{ float:left; margin-right:10px; position:relative; display:block; } #nav li a{ display:block; padding:5px; color:#fff; text-decoration:none; text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */ } /*Стили треугольника для пунктов с выпадающим списком*/ #nav li a span{font-size:10px;margin-left:3px} /*//////////// ВЫПАДАЮЩИЕ ПОДПУНКТЫ //////////////*/ #nav ul{ list-style:none; position:absolute; left:-9999px; /* Выводим за пределы экрана */ opacity:0; /* Прозрачность полная */ -webkit-transition:0.35s linear opacity; -moz-transition:0.35s linear opacity; -o-transition:0.35s linear opacity; transition:0.35s linear opacity; /* Украшаем, пункты будут проявляться */ } #nav ul li{ border-top:1px solid #fff; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */ float:none; } #nav ul a{ white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */ display:block; } #nav li:hover ul{ /*Выпадающий пункт при наведении курсора */ left:0; /* Приносим его обратно на экран, когда нужно */ opacity:1; /* Делаем непрозрачным */ } #nav li:hover a{ /*Стили для верхнего уровня, когда выводится выпадающий список */ background:#f00; } #nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */ text-decoration:none; -webkit-transition:-webkit-transform 0.075s linear; } #nav li:hover ul li a:hover{ /* Стили для выпадающих пунктов, когда курсор находится на пункт*/ background:rgba(255,0,0,0.75); /* Будет красным полупрозрачным */ } /*Градиент и фон для меню*/ #nav,#nav li:hover ul li a{background:#060078;background-image: linear-gradient(bottom, #060078 22%, #1026A3 61%, #165CAB 81%); background-image: -o-linear-gradient(bottom, #060078 22%, #1026A3 61%, #165CAB 81%); background-image: -moz-linear-gradient(bottom, #060078 22%, #1026A3 61%, #165CAB 81%); background-image: -webkit-linear-gradient(bottom, #060078 22%, #1026A3 61%, #165CAB 81%); background-image: -ms-linear-gradient(bottom, #060078 22%, #1026A3 61%, #165CAB 81%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.22, #060078), color-stop(0.61, #1026A3), color-stop(0.81, #165CAB) );}
Теперь меню навигации по сайту можно считать готовым на 100%. Наша задача была создать меню средствами html css, что и было сделано. Дальше уже каждый может под свои нужды модернизировать его так как захочет.
Навигационное меню не использует js, не использует изображений. Фон меню и подпунктов выводится через стили обыкновенным фоновым цветом, поверх него накладывается градиент.
Изменить их можно в любой момент, подобрать градиент можно в нашем онлайн генераторе градиентов. Каждый может настроить меню под себя.
Окажу помощь в разработках или сайты под ключ, пишите запросы в комменты или контакты. Большое количество готовых сайтов, контент на разные тематики: интересно, качественно, недорого.
Скачивания
![]() | dropmenu-nojs.rar 1 kB (Скачивания: 227) |
Пожалуйста, включите JavaScript!
Выпадающее Меню , Горизонтальное , Меню
«Выпадающее меню без js» - Похожие страницы
