Простейшее выпадающее меню html

Простое выпадающее меню

Простое выпадающее меню может быть создано без JavaScript и/или jQuery. Для создания используются CSS-свойства display, padding, псевдокласс :hover. Работающее меню можно посмотреть сразу (Нажмите «Fork», если хотите оформить HTML-меню по-своему). Продолжительность видео ~12мин. Заметка рассчитана на начинающих верстальщиков, вебразработчиков, которые делают первые шаги по изучению основ HTML и CSS; для тех кто изучил курс «Основы HTML5 и CSS3».

Создание простого выпадающего меню

Для создания меню на сайте обычно используется структурный блочный HTML-элемент nav и ненумерованный список. В одном из пунктов списка встраивается еще один список, так, чтобы он не входил в гиперссылку. Можно было бы разместить ul и внутри a, но на мой взгляд это не очень хорошая идея, ведь псевдо-класс :hover работает и с элементами li!

В нашем случае мы не рассматриваем вариант, когда у выпадающего списка тоже есть вложенные списки — эта задача не сложна сама по себе, но вызовет трудности у начинающего верстальщика. Также заметим, что построение меню можно выполнить, если найти или написать соответствующий JavaScript.

Для удобства работы с разметкой (вдруг у нас встретится ещё один nav), добавим CSS-класс нашему структурному навигационному элементу; гиперссылки сделаем заглушками, но вы можете вместо # прописать http://htmllab.ru 🙂

HTML-разметка для меню с выпадающим подменю

Главное в CSS: чистка значений по умолчанию у HTML-элементов, входящих в меню; сокрытие будущего выпадающего подсписка (подменю) и его отображение, при наведении на родительский HTML-элемент — использование псевдо-класса :hover

CSS-правила для выпадающего меню

.menu ul li < padding: 10px; >.menu ul > li:hover < background-color: #f96; >.menu ul ul > li:hover < background-color: #69e; >.menu ul li, .menu ul < display: inline-block; >.menu ul < position: relative; margin: 0; padding: 0; background-color: #f63; >.menu ul ul < display: none; position: absolute; background-color: #369; margin-top: 10px; margin-left: -10px; >.menu ul a < color: #fff; text-decoration: none; >.menu ul ul a < color: #fff; text-decoration: none; >.menu li:hover ul < display: block; >.menu li:hover li

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

Для отправки комментария вам необходимо авторизоваться.

Источник

Создаем выпадающее меню CSS

В сегодняшней статье я хотел бы рассказать, как создать на CSS2.1 и HTML выпадающее меню. Также я покажу один небольшой трюк, при помощи которого можно будет добавлять иконку «+» к элементам навигации в том случае, если в них скрыто выпадающее меню. Для этого мы воспользуемся псевдоэлементом :only-child .

Для начала мы создадим базовую структуру навигационного меню, состоящего из шести пунктов:

Далее нам нужно добавить базовые CSS-стили для HTML горизонтального меню. Я оставил комментарии к каждому блоку кода:

/* задаем цвет фона для контейнера nav. */ nav < margin: 100px 0; background-color: #E64A19; >/* убираем отступы и поля, а также list-style для «ul», * и добавляем «position:relative» */ nav ul < padding:0; margin:0; list-style: none; position: relative; >/* применяем inline-block позиционирование к элементам навигации */ nav ul li < margin: 0px -7px 0 0; display:inline-block; background-color: #E64A19; >/* стилизуем ссылки */ nav a < display:block; padding:0 10px; color:#FFF; font-size:20px; line-height: 60px; text-decoration:none; >/* изменяем цвет фона при наведении курсора */ nav a:hover

После применения стилей у нас должно получиться нечто вроде этого:

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

Теперь добавим CSS-стили , чтобы выпадающий список был скрыт по умолчанию, и появлялся, когда посетитель наводит курсор мыши на соответствующий родительский элемент HTML меню для сайта. После приведенного выше CSS-кода добавьте следующий фрагмент:

/* скрываем выпадающие списки по умолчанию * и задаем абсолютное позиционирование */ nav ul ul < display: none; position: absolute; top: 100%; >/* отображаем выпадающий список при наведении */ nav ul li:hover > ul < display:inherit; >/* первый уровень выпадающего списка */ nav ul ul li

Если до этого момента вы все делали правильно, то при наведении курсора на пункт меню « WordPress » должны увидеть выпадающий список с тремя другими пунктами (« Themes », « Plugins », « Tutorials »):

Взгляните на приведенный ниже HTML-код , в котором мы добавляем второй уровень выпадающего списка к пункту меню « Tutorial », который находится внутри пункта « WordPress »:

Чтобы вертикальное меню HTML отображалось корректно, нужно добавить еще пару строк CSS кода :

/* второй, третий и последующие уровни * смещаем 2 и 3 уровни влево * на значение длины первого уровня. */ nav ul ul ul

Если все сделано правильно, у вас должно получиться нечто вроде этого:

Этот процесс можно повторять, и добавлять новые уровни. Но не следует добавлять их к последнему элементу выпадающего списка, так как я сделал это лишь для примера.

Добавляем индикатор выпадающего списка

Перед тем, как сделать выпадающее меню в HTML до конца, разберемся с индикатором, который указывает на наличие выпадающего списка, прикрепленного к тому или иному пункту меню (знак «+» ):

/* измените ‘ +’ на любой другой символ, если нужно */ li > a:after < content: ' +'; >li > a:only-child:after

Значит, вы все сделали правильно.

В завершение

Многие для достижения подобного эффекта используют jQuery или другие библиотеки. Я считаю, что в этой статье приведен самый простой и легкий вариант. Но выбор за вами.

А как вы сделали меню на HTML ? Пожалуйста, расскажите об этом в комментариях.

Источник

Создаем выпадающее меню на чистом CSS

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

Концепция

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

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

Разметка

Большинство выпадающих меню основано на использовании громоздкой разметки и Javascript. Наш вариант будет использовать простую структуру HTML кода и 19 строк CSS, с небольшим вкраплением CSS3 для придания внешнего лоска.

. Нет никаких ID, классов и элементов. Простой ясный код.

содержит серию элементов
. Все пункты, которые нуждаются в выпадающих подпунктах, содержат другой элемент
. Обратите внимание, что элемент
выпадающих подпунктов не имеет класса. Мы используем каскадные стили, сохраняя разметку как можно более чистой.

CSS

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

/*------------------------------------*\ НАВИГАЦИЯ \*------------------------------------*/ #nav < float:left; width:100%; list-style:none; font-weight:bold; margin-bottom:10px; >#nav li < float:left; margin-right:10px; position:relative; display:block; >#nav li a < display:block; padding:5px; color:#fff; background:#333; text-decoration:none; text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */ -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; >#nav li a:hover < color:#fff; background:#6b0c36; background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */ text-decoration:underline; >/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/ #nav ul < list-style:none; position:absolute; left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */ opacity:0; /* Устанавливаем начальное состояние прозрачности */ -webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */ >#nav ul li < padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */ float:none; background:url(dot.gif); >#nav ul a < white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */ display:block; >#nav li:hover ul < /* Выводим выпадающий пункт при наведении курсора */ left:0; /* Приносим его обратно на экран, когда нужно */ opacity:1; /* Делаем непрозрачным */ >#nav li:hover a < /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */ background:#6b0c36; background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */ text-decoration:underline; >#nav li:hover ul a < /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */ text-decoration:none; -webkit-transition:-webkit-transform 0.075s linear; >#nav li:hover ul li a:hover < /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */ background:#333; background:rgba(51,51,51,0.75); /* Будет полупрозрачным */ text-decoration:underline; -moz-transform:scale(1.05); -webkit-transform:scale(1.05); >

Первый раздел кода весьма простой — мы устанавливаем обычное горизонтальное меню. Но, обратите внимание, что селекторы #nav li и #nav li a выделяют все элементы списка и ссылки в выпадающих пунктах тоже. Использование каскадов.

Вложенные списки

в пункт верхнего уровня. Очевидно, что нужно удалить метки пунктов списка с помощью list-style:none; , и установить position:absolute; для позиционирования выпадающих подпунктов под пунктом списка, который их содержит.

для помещения его в позицию -9999px за пределами экрана, когда он не используется.

, и декларация для браузеров Webkit, для плавного вывода элемента
при наведении курсора мыши.

#nav ul li < padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */ float:none; background:url(dot.gif); >#nav ul a < white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */ display:block; >#nav li:hover ul < /* Выводим выпадающий пункт при наведении курсора */ left:0; /* Приносим его обратно на экран, когда нужно */ opacity:1; /* Делаем непрозрачным */ >

Для элемента #nav ul a мы устанавливаем свойство white-space:nowrap; для предотвращения переноса строк на другую строку.

Последняя часть кода выводит выпадающие подпункты, когда курсор мыши оказывается над соответствующим пунктом меню. Так как псевдо класс :hover не работает в IE6, выпадающее меню не работает в данном браузере. Проблему можно обойти множеством способов.

#nav li:hover a определяет, что произойдет со ссылкой верхнего уровня, когда наследник будет иметь состояние hover:

• Выпадающий список
  расположен внутри элемента
  • .
  • Если навести курсор мыши на ссылку ( ) в выпадающем списке (
    ), то одновременно пункт списка верхнего уровня (
    • ) тоже будет иметь состояние hover, так как выделен контент внутри него.
    • Так как технически используется состояние hover для элемента списка верхнего уровня, то #nav li:hover a действует, задавая стиля для ссылки.

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

    Также добавляется правило для браузеров Webkit -webkit-transition:-webkit-transform 0.075s linear; , которое анимирует -webkit-transform с помощью затухания/появления в течение 0.075 секунды.

    В последней части определяются стили для выделения определенного пункта в выпадающем списке при наведении курсора мыши.

    Вначале мы определяем два свойства background:; . Определение background:rgba(51,51,51,0.75); устанавливает умеренно серый фон для пункта с прозрачностью 0.75. Те браузеры, которые не распознают такое определение цвета (например, IE) будут использовать определение цвета в старом стиле в предыдущей строке.

    Готово!

    Простая структура HTML разметки и несколько строк CSS создают замечательное выпадающее меню без использования всемогущего JavaScript. Наверняка найдется немало проектов, в которых такое решение найдет свое место.

    Данный урок подготовлен для вас командой сайта ruseller.com
    Источник урока: csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
    Перевел: Сергей Фастунов
    Урок создан: 23 Февраля 2011
    Просмотров: 476212
    Правила перепечатки

    5 последних уроков рубрики «CSS»

    • 

    Забавные эффекты для букв

    

    Реализация забавных подсказок

    Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

    

    Анимированные буквы

    

    Солнцезащитные очки от первого лица

    Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

    Источник

    Простое и красивое горизонтальное выпадающее меню на CSS и HTML

    Предлагаю, вашему вниманию простое и при этом красивое двухуровневое выпадающее горизонтальное меню на чистых CSS и HTML. Его код я собрал по крупицам и лично адаптировал при подготовке новой темы WordPress.

    У меня на сайте оно выглядит так, при наведении мыши на пункт меню «О блоге» выпадает вертикальное подменю:

    

    HTML код горизонтального выпадающего меню

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

    Это классический вариант по структуре меню из комбинаций тегов UL и LI. Который встречается на большинстве сайтов в интернете, в том числе и WordPress.

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

    /*| Navigation |*/ nav < background: #334; /* Задаем основной фон меню */ padding: 0 3%; /* Задаем внутренние отступы */ >nav ul < list-style: none; /* Убираем маркер для элементов списка */ >nav ul li < display:inline-block;/*Выстраиваем пункты меню в ряд по горизонтали */ >nav ul li a < display:block; /* Настраиваем оформление пунктов меню */ padding: 15px 20px; font-size: .9em; color: #eee; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; border-top: 1px solid #445; >nav ul li:hover < background: #445; /* Меняем фон пункта меню при наведении указателя мыши */ >nav ul li ul < display: none; /* Прячем пункты выпадающего блока меню */ position:absolute; background: #334; /* Задаем фон выпадающего блока меню */ >nav ul li:hover ul < display:block; /* Отображаем подменю при наведении мыши */ >nav ul li ul li < display:block; /* Выстраиваем по вертикали пункты выпадающего меню */ >

    Выводы о реализации меню на CSS и HTML

    Вот так легко и непринужденно можно сделать горизонтальное выпадающее меню на голом CSS и HTML. К недостаткам решения можно отнести то, что приведенный пример реализует двухуровневое выпадающее меню, то есть когда из горизонтального блока выпадает вертикальный. Если же вам нужно трехуровневое меню, когда из выпавшего вертикального меню необходимо появление еще одного подменю, то предложенное мною решение необходимо доработать.

    Так же предложенное решение содержит минимум оформления и требует доработки под дизайн сайта, где оно будет внедряться.

    Источник