меню с вложенным списком html

Выпадающий список HTML

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

Выпадающее меню со списком элементов на HTML

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

Конечно, подобную проблему можно решить многими способами, но я бы рекомендовал обходиться без дополнительного JS-кода (и jQuery).

Я считаю так — если задачу теоретически можно решить средствами HTML и CSS без применения джейквери, нужно делать это на практике. Если вы не знаете, что писать и куда нажимать — это отдельная проблема и она не должна вас останавливать. Нужно гуглить, учиться, расти, повышать свою квалификацию как верстальщика и фронтенд-разработчика — никогда не знаешь, где эти навыки пригодятся.

Давайте покажу на примере. Помните, недавно была статья о маркированных и нумерованных списках? Сейчас эти знания пригодятся, потому что именно так мы будем делать меню. Пример кода:

Первый шаг к нашему выпадающему списку в меню сделан и вот что получилось. Результат:

Мда. Пока не очень, да? Обычный список какой-то (похож на этот), ведь классы menu и submenu я использовал, а стили не написал.

Ого! В жизни не видел ничего прекраснее этого минималистичного выпадающего списка. Без JavaScript и обращения к фрилансерам!

Выпадающий при наведении список меню на HTML

И снова мы изобретаем меню на чистом CSS, без использования JS.

Учитывая то, что вы видели в предыдущей части статьи, думаю выглядит многообещающе. А все благодаря чему? Потому что мы умеем присваивать нужным элементам стиль «display:none» и прописывать в CSS чтобы при наведении на него приоритетным было что-то типа «inline-block» взамен «none».

Давайте немного подробнее остановимся на вышеприведенном коде. В нем я присвоил «id=»menu»» основному списку, то есть всему выпадающему меню. Я сделал это для того чтобы обозначить сразу родительские элементы выпадающего списка и сделать их видимыми.

Дальше. В каждый из разделов я вложил дополнительные списки

, которые содержат в себе выпадающие ссылки (см. также как вставить ссылку в HTML). Они будут появляться при наведении.

Перейдем к CSS. Код:

/* Задаю параметры для основного, родительского блока, меню выпадающего списка. */
# menu <
display : block ;
position : absolute ;
top : 20px ;
left : 20px ;

/* Задаю стили для блоков выпадающего списка. */
# menu > li <
display : inline-block ;
height : 20px ;
/* Считаем координаты относительно исходного места. */
position : relative ;
>

/* Задаю стили, чтобы скрыть дочерние блоки выпадающего списка. Ну и немного украшаю. */
# menu > li > ul <
position : absolute ;
top : 20px ;
left : 10px ;
display : none ;
background-color : bisque ;
border-radius : 5px ;
width : 185px ;
font-size : 14px ;
padding : 10 0 10 10 ;
>

/* Так я делаю прежде скрытую часть видимой — при наведении курсора. */
# menu > li : hover > ul <
display : block ;
>
>

Что хочу отметить дополнительно.

«#menu > li» означает, что стили будут применены только к дочерним элементам по отношению к тегу «ul#menu», а не ко всем как могли подумать некоторые. Внимательнее!

«Position: relative;» — отсчитывает координаты от угла одного из разделов в главном списке, откуда выпадают дочерние элементы.

Последнее: выпадающий список по примеру выше на HTML (см. также особенности HTML) и CSS в оформлении меню сайта это удобная вещь. Для ПК и десктопов. На мобильных устройствах и планшетах нет мышки и курсоров, поэтому такой вариант не подойдет.

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

Как создать крутое выпадающее меню

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

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

Стили помогают нам скрыть элементы и сделать их выпадающими при наведении курсора.

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

Теперь давайте вооружимся магией стилей — при помощи CSS я трансформирую все серии вложенных списков

в крутое и удобное в использовании выпадающее меню с несколькими элементами.

Перейдем к CSS-коду. Что-то мне стало скучно туда-сюда бегать, поэтому я хорошенько его прокомментировал прямо в стилях. Да и вам удобнее будет, если будете пользоваться этим решением.

CSS-код, помещенный в страницы:

Готово! Финальный результат:

БОНУС — суперкрутой выпадающий список на ХТМЛ и ЦСС

Четвертый и последний на сегодня. Я устал, вы устали — думаю четыре выпадающих меню будет достаточно для того, чтобы выбрать наиболее оптимальный вариант для себя.

ul class = «ddropdownn» >
li class = «ddropdownn-top» >
a class = «ddropdownn-top» href = «/» > Красноярский край / a >
ul class = «ddropdownn-inside» >
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 >
li > a href = «/» > Норильск / a > / li >
/ ul >
/ li >

li class = «ddropdownn-top» >
a class = «ddropdownn-top» href = «/» > Свердловская область / a >
ul class = «ddropdownn-inside» >
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 >
li > a href = «/» > Каменск-Уральский / a > / li >
/ ul >
/ li >
/ ul >

CSS-код, который я поместил в :

Результат (без наведения курсора):

Результат (при наведении курсора):

Итоги: скачать готовый html+css код выпадающего списка меню

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

Надеюсь один из списков украсит меню вашего проекта или хотя бы будет использован в качестве основы.

Я подготовил для вас архив, который вы можете скачать. Там все 4 выпадающих списка — html код и css стили прямо в файле. Там думаю разберетесь.

Превью содержимого файла:

P.S. Ну а если вы вдруг неправильно написали поисковый запрос и зашли не туда (не нашли то чего нужно), не расстраивайтесь — у меня есть пара видео, где при помощи и в HTML страницу вставляются выпадающие списки. Видео 1:

Источник

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

Горизонтальное выпадающее меню используется для упорядочения структуры навигации по сайту. Оптимальное количество уровней вложения — один-два. Чем меньше уровней вложений, тем легче посетителю сайта найти нужную информацию. Как создать обычное горизонтальное меню, подробно изложено в этом уроке.

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

1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения

Скрыть выпадающее меню можно несколькими способами:
1) display: none;
2) visibility: hidden;
3) opacity: 0;
4) transform: scaleY(0);
5) с помощью библиотеки jQuery.

See the Pen MaObbz by Elena Nazarova (@nazarelen) on CodePen.

Способ 1.

Способ 2.

Способ 3.

Способ 4.

Способ 5. С помощью jQuery

2. 3D выпадающее меню

Интересные эффекты можно создавать с помощью CSS3-трансформаций, например, заставить меню появляться из глубины экрана.

See the Pen OyjVJZ by Elena Nazarova (@nazarelen) on CodePen.

3. Разворачивающееся выпадающее меню с логотипом

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

4. Увеличивающееся выпадающее меню

See the Pen aNbGKv by Elena Nazarova (@nazarelen) on CodePen.

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

5. Подъезжающее выпадающее меню

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

See the Pen MpqypG by Elena Nazarova (@nazarelen) on CodePen.

Источник

Многоуровневый список в HTML: как создать и настроить?

Дата публикации: 2016-08-16

От автора: всех приветствую. Наверняка большинству из вас нравятся красиво оформленные списки, так как это позволяет очень легко воспринимать информацию, которая в них записана. В этой статье мы создадим многоуровневый список в html, а также немного оформим его с помощью css. Приступим!

Базовая теория

Понятно, что для создания многоуровневого списка нужно хотя бы понимать, как создать простой список. Собственно, самих видов списков в html существует два: нумерованный и маркированный. Созданы они для разных целей. Нумерованный стоит применять тогда, когда, например, какоу-то перечисление действий нужно выполнять строго в указанном порядке. Соответственно, такой список подошел бы для планирования дня или записи рецепта.

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Собственно, тег ol создает нумерованный список, а тег ul – маркированный. Это понятно. Надеюсь, вы также имеете представление о том, как создавать простейший список, поэтому мы сразу перейдем к созданию многоуровневого.

Многоуровневый список: как его делать?

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

Итак, если вы внимательно просмотрели разметку, то наверное уже уловили суть? Сначала мы открываем ol, это будет наш родительский список, в котором будут содержаться вложенные списки и все пункты. Пункты, как вы понимаете, создаются парным тегом li, внутри которого пишется содержимое.

Соответственно, вложенный список мы обязательно должны вложить в один из наших пунктов. То есть открыли тег li, написали в нем нужный контент, но после этого не закрываем тег. Закрывать будем только после того, как создадим внутри точно такой же список.

В нашем случае получается такой себе план на день. Не забудьте правильно закрыть все теги. Вообще минус многоуровневых списков, как и таблиц, это громоздкая разметка. Представьте, что мы были дописали сюда еще списки для 19-го и 20-го чисел, а пункты разбили на подпункты, которые вынесли бы в отдельные перечни, которые, в свою очередь, располагались бы уже внутри вложенных. То есть была бы уже вложенность 2-го уровня. Итого все это заняло бы 30-60 строк кода.

Кстати, вот так это выглядит:

Как видите, браузер автоматически проставляет отступы для вложенного списка, чтобы визуально было понятно, что он относится к первому пункту. Единственная проблема в том, что внутренний перечень получает такой же нумератор – числа, а это не совсем правильно.

Чтобы изменить нумератор, необходимо уже использовать css. Обратимся к вложенным спискам так:

Источник

Вывод многоуровневого меню с неограниченным уровнем вложенности

Дата публикации: 2013-03-08

От автора: при создании сайтов практически всегда необходимо выводить меню, то есть определенный блок с навигацией либо по страницам, либо по категориям веб-приложения. И очень часто данное меню необходимо отобразить в виде многоуровневого дерева. И хорошо, если предусматривается только второй уровень вложенности. А если третий? Или, вообще, неограниченный уровень вложенности? Как быть в этом случае? Поэтому в данном уроке мы с Вами научимся выводить на экран многоуровневое меню с неограниченным уровнем вложенности.

1. Создание базы данных.

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

Итак, вот такая структура таблицы (таблицу назовем categories) нам понадобится для вывода, и хранения данных многоуровневого меню:

Бесплатный курс по PHP программированию

Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC

В курсе 39 уроков | 15 часов видео | исходники для каждого урока

Теперь описание полей таблицы:

id – идентификатор таблицы (как обычно идентификаторы AUTO_INCREMENT и PRIMARY KEY)

title – заголовок категорий

parent_id – идентификатор родительской категории. По умолчанию и если категория родительская, значит значение данного поля 0, для определенной записи. Если же категория дочерняя, то в данном поле указываем идентификатор категории родителя (то есть поля id).

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

Теперь, когда база данных создана, начнем создавать скрипт.

2. Основные настройки и подключение к базу данных.

Итак, давайте определимся с файловой структурой будущего скрипта. В данном уроке мы с Вами только лишь выведем блок с многоуровневым меню, поэтому нам понадобится, вот такой набор файлов и папок:

functions
— functions.php
config.php
index.php

Смотрите папка functions, содержит в себе один файл – functions.php, в котором будут описаны все функции необходимые для нормальной работы скрипта. Далее в файле config.php мы опишем все основные настройки и конечно index.php – основная точка входа.

Хочу сразу сказать, что все файлы, которые мы будем создавать, необходимо сохранять в кодировке UTF-8.

Итак, давайте посмотрим, какие основные настройки нам потребуются, вот код файла config.php:

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

Далее давайте создадим новый файл functions.php (сохраним его в папку functions) и создадим в нем первую функцию, которая будет выполнять подключение к базе данных:

Как Вы видите, очень простая функция, которая принимает четыре параметра: адрес сервера, базы данных, имя пользователя, пароль и название базы данных. Вначале выполняем соединение с сервером базы данных, используя функцию mysql_connect($host,$user,$pass), затем выбираем базу данных для работы — mysql_select_db($database,$db) и в конце определяем кодировку для работы с базой данных.

Теперь давайте создадим файл index.php и добавим в него первые строки кода:

Итак, первым делом, отправляем заголовок с кодировкой – функция header(«Content-Type:text/html;charset=utf8″). Затем подключаем два ранее созданных файла: файл конфигураций config.php и файл functions.php. И наконец, вызываем функцию db(), для подключения к серверу базы данных. Теперь давайте проверим в браузере, что у нас получилось. Если на экране, на данном этапе ничего не вывелось, то есть, нет сообщений об ошибках, значит мы на верном пути.

Бесплатный курс по PHP программированию

Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC

В курсе 39 уроков | 15 часов видео | исходники для каждого урока

3. Получение массива категорий.

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

Рекурсия — это обращение функции к самой себе, другими словами вызов функции внутри кода функции самой себя.

Теперь поговорим о том, по какому принципу мы будем выводить многоуровневое меню. Данная задача (как и любая в программировании) имеет несколько решений. К примеру, одно из таких решений состоит в том, чтобы создать функцию (принимающая параметром идентификатор родительской категории), которая в своем коде формировала SQL запрос по выборке данных меню, по полю parent_id. То есть, при первом вызове функции, выбираются все записи, у которых поле parent_id = 0, затем parent_id = 1, далее parent_id = 2 и т.д. Далее в цикле вытягиваем данные из результата отработки SQL запроса и в этом же цикле вызываем данную функцию (рекурсивно саму на себя) и передаем ей идентификатор родительской категории, полученный у записи, вытащенной на данной итерации цикла. То есть на первой итерации мы с Вами вытаскиваем в переменную ассоциативный массив, в этом массиве есть ячейка с ключом parent_id, вот ее значение и передаем при вызове функции.

Данный метод, казалось бы, очень неплохой, во-первых, он отлично работает, а во-вторых, имеет очень красивую и краткую реализацию. Но есть существенный недостаток – происходит многократное обращение к базе данных и выполнение запросов по выборке данных. А это не очень хорошо.

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

Итак, давайте в файле functions.php создадим функцию get_cat():

Теперь давайте в файле index.php вызовем данную функцию:

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

4. Вывод категорий в виде многоуровневого дерева.

Итак, давайте откроем файл functions.php и создадим функцию view_cat(), которая и будет выводить многоуровневое меню:

Итак, данная функция принимает два параметра: первый – это собственно массив, который необходимо обработать, и второй идентификатор родительской категории, то есть той категории, данные которой, мы будем отображать. Замете, что если не передать второй параметр, то по умолчанию он равен нулю, то есть вначале отображаем родительскую категорию.

Так как данная функция будет рекурсивно вызываться, то первым делом необходимо описать условие выхода из рекурсии, что мы с Вами и делаем. А именно, проверяем, существует ли ячейка массива с ключом ($arr[$parent_id]) — идентификатором родительской категории – который передается параметром при вызове функции.

Источник

Выпадающее меню на HTML и CSS

Выпадающее меню можно сделать на CSS не используя скрипты и модули. Просто дописываем несколько строк в CSS файл и готово. Несмотря на простоту меню будет достаточно универсальным. Стили подходить под произвольное количество уровней вложенности. Хоть два хоть десять уровней. Код при этом остаётся тем же. В статье описаны три вида меню, но если вы только начинаете разбираться в вёрстке советую читать сначала. Так будет проще понять.

Сначала сделаем HTML разметку для меню. Принято делать меню списком. Это не стандарт просто так сложилось.

Ещё нужно убрать маркеры но это дело вкуса.

Чтобы вложенные пункты появлялись при наведении на родительский пункт используем псевдокласс :hover, при этом нужно сделать так что бы появлялись только пункты первого уровня вложенности. Для этого используем знак >

В этой строчке заключается вся магия нашего выпадающего меню, поэтому разберём её подробнее. Благодаря псевдоклассу :hover, при наведении курсора на пункт меню, он же элемент списка li, для первого вложенного списка ul значение display станет block. Так открывается первый уровень вложенности. Если на этом уровне есть пункты содержащие подпункты, то при наведении на них также откроется только один вложенный уровень.

С основной механикой разобрались. Осталось переопределить место где будут появляться вложенные пункты. Для этого воспользуемся свойством position: absolute. При таком позиционировании отсчёт координат ведётся от края окна браузера если только для родительского элемента не задано свойство position с значением fixed, relative или absolute. В этом случае отсчёт ведётся от края родительского элемента.

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

Используя свойство position мы переместим вложенные пункты в право на расстояние равное ширине меню. В рассматриваемом способе есть одно ограничение. При позиционировании нам придётся жёстко задать ширину. С другой стороны вертикальное меню размещается в сайдбаре ширина которого заранее определена, поэтому привязка к ширине не должна вызвать проблем.

Вот что должно получиться в результате. демка

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

Для горизонтального меню мы будем так же применять позиционирование но есть несколько нюансов. Что бы сделать меню горизонтальным используем свойство float. Меню будет раскрываться вниз значит при позиционировании нужно учитывать высоту. Для начала сделаем меню с одним уровнем вложенности. Вложенное меню также будет горизонтальным. Для этого вложенное меню позиционируем относительно списка а не родительского пункта и задаём для него ширину.

Вот что получиться в итоге демка.

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

Вот так будет выглядеть наше многоуровневое меню демка.

Спасибо огромное! Задолбался

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

Интересно, а для Вордпресс

Интересно, а для Вордпресс такое решение не подходит? Довольно просто все изложено, сделать сможет любой. Отличные советы, без лишней «шелухи»!

HTML + CSS в чистом виде,

HTML + CSS в чистом виде, поэтому должно подойти для любого сайта. Специально писал с минимумом оформления, чтобы не перегружать CSS.

Очень полезная информация.

Очень полезная информация. Когда такое меню хотела реализовать у себя на блоге, то пришлось обращаться к веб-мастеру. А теперь могу сесть и потихоньку реализовать такую задумку сама. Подписалась на Ваш блог. Буду изучать.

Возникнут вопросы обращайтесь

Возникнут вопросы обращайтесь. Чем смогу помогу.

Что-то мой комментарий не

===========
Спасибо, но у меня (под Инт.Экспл-8) меню не выпадает. Т.е. не работает строка «ul. nav li:hover ul «
Подскажите, в чем дело?

Есть пожедания по изложению материала:

-хорошо бы в примерах каждую строку снабжать комментарием, что она делает.

-в частности, неясно, зачем нужна строка «

-перед этой строкой стоят 2 строки, видимо, не относящиеся к делу (Домой
и Посмотреть вертикальное меню). У человека, незнакомого с новым материалом (то есть, как раз для того, для которого вы писали), уходит время на осознание того, что эти строки для выпадающего меню не нужны. Или все-таки нужны?

Короче говоря, хотелось бы, чтобы в примерах было только то, что имеет отношение к делу, причем, чтобы про неясные по контексту строки было бы написано, какое именно «отношение к делу» они имеют.

Самый объёмный коммент.

Самый объёмный коммент.
Коментарии проходят только после модерации поэтому вы и не увидели свой коммент сразу.
Постараюсь ответить на всё. Начнём с вопросов зачем здесь это. Таки да две ссылки просочились с рабочего варианта.
Насчёт не корректного отображения текста. Вы смогли прочитать и откоментить эту страницу при том что кодировка у неё такая же как и у примера в посте.
Данный пост не предназначен для абсолютных новичков и был написан по желанию подписчиков. Если объяснять абсолютно всё то нужно будет рассказать про классы и идентификаторы, блоки, позиционирование, псевдоселекторы, каскад и прочее. Довольно большая статья получиться и что самое главное бесполезная.
ul.nav li:hover > ul будет показывать ранее скрытый пункт. Если разбирать по буквам то(здесь параллельно смотрим на код ) при наведении на пункт меню(ul.nav li) сработает :hover и первый вложенный список >ul будет виден за счёт того что значение display сменит значение с none на block.

Поправил статью с учётом

Поправил статью с учётом ваших замечаний. Про кодировку честно говоря забыл что виндовс сохраняеи файлы в windows-1251 Тут два варианта или как вы заметили указать форточную кодировку в файле или изменить кдировку файла например в Notepad++.

Спасибо за критику приходите к нам ещё

Меню некоректно отображается

Меню некоректно отображается в safari IE Mozila Firefox не подскажите в чем может быть проблема?

Только что проверил в IE и

Только что проверил в IE и FireFox всё работает как надо. Можно подробнее в чём проблема

попробуйте заменить в head

попробуйте заменить в head полностью строчку с meta на

Источник