вертикальное css выпадающее меню в одной колонке?
I have created a vertical navigational menu in css with two sub-menus.
But I can’t figure out how to position them in one column so that they work properly. Is this possible?
<ul> <li><a href="#">works</a> <ul> <li><a href="#">something</a></li> <li><a href="#">something</a></li> <li><a href="#">something</a></li> <ul> <li><a href="#">Category 1</a></li> <li><a href="#">Category 2</a></li> <li><a href="#">Category 3</a></li> <li><a href="#">Category 4</a></li> <li><a href="#">Category 5</a></li> </ul> <li><a href="#">something</a></li> <li><a href="#">something</a></li> </ul> </li> <li><a href="#">photos</a> <ul> <li><a href="#">something</a></li> <li><a href="#">something</a></li> </ul> </li> <li><a href="#">friends</a></li> <li><a href="#">contact</a></li> </ul> </div></html>
#menu { font-size: 14px; font-family: "Courier New", Courier, monospace; } #menu ul { margin: 0px; list-style-type: none; } #menu ul li { position: relative; } #menu ul li a { line-height: normal; color: #000; text-decoration: none; } #menu ul li ul { display: none; position: absolute; top: 0px; left: 180px; float: left; z-index: 99999; width: 180px; } #menu ul li ul li { min-width: 180px; } #menu ul li ul ul { float: left; top: 0px; } #menu ul li:hover > ul { display:block; }
Я создал вертикальное навигационное меню в css с двумя подменю.
Но я не могу понять, как разместить их в одном столбце, чтобы они работали правильно. Возможно ли это?
<ul> <li><a href="#">works</a> <ul> <li><a href="#">something</a></li> <li><a href="#">something</a></li> <li><a href="#">something</a></li> <ul> <li><a href="#">Category 1</a></li> <li><a href="#">Category 2</a></li> <li><a href="#">Category 3</a></li> <li><a href="#">Category 4</a></li> <li><a href="#">Category 5</a></li> </ul> <li><a href="#">something</a></li> <li><a href="#">something</a></li> </ul> </li> <li><a href="#">photos</a> <ul> <li><a href="#">something</a></li> <li><a href="#">something</a></li> </ul> </li> <li><a href="#">friends</a></li> <li><a href="#">contact</a></li> </ul> </div></html>
#menu { font-size: 14px; font-family: "Courier New", Courier, monospace; } #menu ul { margin: 0px; list-style-type: none; } #menu ul li { position: relative; } #menu ul li a { line-height: normal; color: #000; text-decoration: none; } #menu ul li ul { display: none; position: absolute; top: 0px; left: 180px; float: left; z-index: 99999; width: 180px; } #menu ul li ul li { min-width: 180px; } #menu ul li ul ul { float: left; top: 0px; } #menu ul li:hover > ul { display:block; }
css html5 drop-down-menu vertical-alignment2,711
Многоуровневое вертикальное меню HTML и CSS
18 ноября, 2015 11 283 1На днях быстро нужно было сделать простое многоуровневое меню при помощи только css и html. Потратил на поиски минут 15, чего то подходящего что б не переделывать так и не нашел. По этому решил быстрее написать новое чем чистить чужой код. Вот что получилось
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | ul{
list-style: none;
background-color: #484f61;
width: 200px;
border: 1px solid #2a323f;
border-bottom: none;
color: #fff;
}
ul li{
border-bottom: 1px solid #2a323f;
position: relative;
}
ul li:hover{
background-color: #2a323f;
}
ul li:hover ul{
display: block;
}
ul li:hover ul li ul{
display: none;
}
ul li a{
color: #fff;
padding: 10px 20px;
display: block;
text-decoration: none;
font-weight: bold;
}
ul li a:hover{
background-color: #5d99cf;
color: #fff;
}
ul li ul li:hover ul{
display: block;
}
ul li ul{
position: absolute;
left: 200px;
top: 0px;
display: none;
} |
ul{ list-style: none; background-color: #484f61; width: 200px; border: 1px solid #2a323f; border-bottom: none; color: #fff; } ul li{ border-bottom: 1px solid #2a323f; position: relative; } ul li:hover{ background-color: #2a323f; } ul li:hover ul{ display: block; } ul li:hover ul li ul{ display: none; } ul li a{ color: #fff; padding: 10px 20px; display: block; text-decoration: none; font-weight: bold; } ul li a:hover{ background-color: #5d99cf; color: #fff; } ul li ul li:hover ul{ display: block; } ul li ul{ position: absolute; left: 200px; top: 0px; display: none; }
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <ul> <li><a href="#">Главная</a></li> <li><a href="#">Новости</a></li> <li><a href="#">Прайс</a></li> <li><a href="#">Услуги</a> <ul> <li><a href="#">Услуга 1</a></li> <li><a href="#">Услуга 2</a></li> <li><a href="#">Услуга 3</a> <ul> <li><a href="#">Услуга 1</a></li> <li><a href="#">Услуга 2</a></li> <li><a href="#">Услуга 3</a></li> <li><a href="#">Услуга 4</a></li> <li><a href="#">Услуга 5</a></li> </ul> </li> <li><a href="#">Услуга 4</a></li> <li><a href="#">Услуга 5</a></li> </ul> </li> <li><a href="#">Контакты</a></li> </ul> |
<ul> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Новости</a></li> <li><a href=»#»>Прайс</a></li> <li><a href=»#»>Услуги</a> <ul> <li><a href=»#»>Услуга 1</a></li> <li><a href=»#»>Услуга 2</a></li> <li><a href=»#»>Услуга 3</a> <ul> <li><a href=»#»>Услуга 1</a></li> <li><a href=»#»>Услуга 2</a></li> <li><a href=»#»>Услуга 3</a></li> <li><a href=»#»>Услуга 4</a></li> <li><a href=»#»>Услуга 5</a></li> </ul> </li> <li><a href=»#»>Услуга 4</a></li> <li><a href=»#»>Услуга 5</a></li> </ul> </li> <li><a href=»#»>Контакты</a></li> </ul>
Вам также может понравиться
Как сделать плавное выпадающее меню на CSS. Вертикальное выпадающее меню на css: как его сделать
Осуществим нашу задумку с помощью самого обычного CSS . В следующей статье, если не забуду, то опишу этот же эффект с помощью jQuery . Но а пока, давайте приступим к разбору данного метода. Но, сначала предложу посмотреть, что получится в итоге:
Первым делом, давайте напишем HTML код нашего меню. Меню будет простейшим. Для примера у него будет 2 пункта у каждого из которых будет выпадающий список с подпунктами.
- пункт 1
- Выпадающий пункт 1
- Выпадающий пункт 2
- Выпадающий пункт 3
- пункт 2
- Выпадающий пункт 1
- Выпадающий пункт 2
- Выпадающий пункт 3
Думаю тут все понятно, самое простое 2-х уровневое меню. Как и говорил, меню имеет два главных пункта, можете добавить сколько угодно, если нужно. Дальше нужно просто добавить стили, которые и сделают всю магию 🙂
#slow_nav > ul{ width: 500px; margin:25px auto 0; } #slow_nav > ul > li{ list-style: none; display: inline-block; position:relative; padding:0; } #slow_nav a{text-decoration:none;} #slow_nav > ul > li > a{ font-size:18px; padding:5px; background-color:#333; color:#fff; } #slow_nav li ul{ position:absolute; list-style:none; text-align:center; top:15px; font-size:15px; left:0; margin:0; padding:0; /* Данные строки нужны для правильной работы анимации */ max-height:0px; overflow:hidden; -webkit-transition:max-height 0.4s linear; -moz-transition:max-height 0.4s linear; transition:max-height 0.4s linear; /* конец */ } #slow_nav li:hover ul{ max-height:300px; } #slow_nav li ul li{ background-color:#333; border-bottom:1px solid #888; } #slow_nav li ul li:last-child{ border-bottom:none; } #slow_nav li ul li a{ padding:5px 12px; color:#fff; display:block; } #slow_nav li ul li:hover{ background-color:#444; } #slow_nav li ul li:first-child{ margin-top:25px; position:relative; } #slow_nav li ul li:first-child:before{ content:»»; position:absolute; width:1px; height:1px; border:5px solid transparent; border-bottom-color:#333; left:10px; top:-10px; }
Код CSS не маленький., но по своей сути не сложный. Если Вы владеете навыками верстки, то запросто разберетесь что и как. Я лишь остановлюсь на некоторых моментах, которые являются важными.
Первым делом это сама анимация. Нужный код выделен комментариев в коде — /* Данные строки нужны для правильной работы анимации */ . Удалять из нельзя, в противном случаи анимация перестанет работать. В данном отрезке кода, изначально мы задаем высоту в ноль пикселей —
max-height:0px; и прописываем свойство overflow:hidden; , чтобы скрыть наше дочернее меню, то есть выпадающее. Дальше уже прописываем кроссбраузерное свойство transition , которое совершит анимацию.
Webkit-transition:max-height 0.4s linear; -moz-transition:max-height 0.4s linear; transition:max-height 0.4s linear;
Тут можете изменить разве что время анимации. В данный момент время задано 0.4 секунды. Сразу после того как задали анимацию, добавлено свойство, для задания новой высоты при наведении на главные пункты меню:
#slow_nav li:hover ul{ max-height:300px; }
Тут такая картинка. Высота задается максимальная фиксированная, если у Вас высота выпадающего меню будет побольше, то и значение меняйте на больше. В противном случаи Ваше меню обрежет по высоте 300 пикселей.
Данный способ можно применять не только к самописным меню но и к тем же динамическим меню, которые создаются системами управления сайтом, например WordPress . Для этого нужно немного подправить стили и все. То есть первый HTML код использовать не нужно, только стили. В стилях нужно заменить имя айди #slow_nav на то что будет у Вас, ну и возможно подправить еще что-то по мелочам. Подробно останавливаться не буду. Для каждого случая нужен персональный подход, так что уж извините 🙂 Я дал идею и способ, а Вам решать, применять его или нет.
На этом все, спасибо за внимание. 🙂
Задача
Создать выпадающее меню инструментами CSS и HTML.
Решение
Для начала давайте создадим список, разместим его горизонтально и оформим его внешний вид. Это будет основное меню, а потом сделаем для его пунктов выпадающее меню.
Выпадающее менюУ нас получился список такого вида:
Рисунок 1. Подготовительные работы.
Обратите внимание: стиль ссылки меняется при наведении на неё курсора. Это реализовывается с помощью псевдокласса :hover . Этот псевдокласс задаёт стиль элемента при наведении на него курсора, при этом кнопка мыши не нажата. Если есть нажатие кнопки — это уже другой псевдокласс.
Теперь перейдём к решению нашей задачи. Сделаем выпадающее меню для пункта «Услуги», добавим выпадающие разделы: «Купить», «Продать», «Обменять». Эти пункты — это отдельный список, который вложен в тег
Создадим этот список и добавим стили, описывающие его внешний вид.
Выпадающее менюТеперь у нас получился такой список:
Рисунок 2. Подготовительные работы.Безусловно, это не то, что нам нужно. По умолчанию этот список должен быть скрыт и становиться видимым только при наведении мыши. Скрыть элемент можно при помощи правила правила {display : none }. А при наведении курсора его нужно активировать сделав снова видимым правила {display : inline-block }.
Выпадающее менюТеперь наше меню исчезает и появляется, но нам нужно чтобы оно появлялось поверх существующих элементов, не меняя уже установленные границы существующих блоков.
Чтобы элемент отображался не влияя на отображение других элементов, его нужно спозиционировать со значением absolute .
Выпадающее менюЧто мы тут сделали:
- правило позиционирования {position : relative ;}. Это сделано для того, чтобы отчёт координат абсолютного позиционирования вложенного списка начался с верхнего левого угла этого блока, а не угла экрана.
- Добавили в родительский элемент
- правило {height : 20px ;}. Задали ему высоту, чтобы удобней было позиционировать выпадающий список.
- Установили абсолютное позиционирование {position : absolute ;} выпадающему списку и установили координаты: top и left .
Теперь выпадающее меню работает корректно.
Рисунок 3. Окончательный вариант.Конечно, тут можно сделать более красивый внешний вид выпадающего меню, но в рамках нашей задачи и этого достаточно.
Учебная задача решена. Пока.
Горизонтальное выпадающее меню написано на HTML и CSS. Код HTML и стили CSS лаконичны, просты и понятны. Всего строк CSS стилей, не считая пробельные, меньше 50. В HTML удобно добавлять новые пункты и подпункты. Немного изменив CSS стили можно сделать несколько тем и изменить вид или способ появления подпунктов (темы оранжевая, сиреневая, коричневая).
Основное отличие моего решения в том, что я не использую списки – теги
- и
- , заменив их на простые , а применение CSS3 flexbox — нового элемента CSS3 — значительно упростило написание и читаемость HTML кода и CSS стилей, сократив при этом их объём.
Ниже приведён рабочий пример горизонтального выпадающего меню на CSS.
Идея заключается в следующем: горизонтальное выпадающее меню создаётся как набор колонок. Колонка представляет собой стопку подпунктов.
Непосредственно горизонтальное меню складывается из верхних элементов стопки. Схематично это выглядит так:Первые (верхние) пункты образуют верхний уровень горизонтального меню; остальные, пока на колонку не навели курсор, скрыты. При наведении курсора скрытая часть плавно разворачивается вниз.
Как это работает:В обёртку
Рекомендуем почитать
меню » Скрипты для сайтов
4 890 CodepenБоковое выезжающее меню
При клике на иконку стрелки выезжает боковая панель с навигацией. Анимация сделана с помощью GSAP.
7 584 Скрипты / Menu & NavЭффект зачеркивания при наведении в меню
Эффект зачеркивания при наведении на пункт в горизонтальном меню. Наиболее эффектно будет смотреться на лендингах, где горизонтальное меню расположено поверх фонового изображения.
16 912 Скрипты / Menu & NavSlinky — адаптивное многоуровневое меню
Легкий адаптивный плагин многоуровневого меню. Меню больше подходит для отображений на мобильных устройствах.
5 313 Скрипты / Menu & NavГибкое горизонтальное меню
Небольшой скрипт, который поможет в создании более эстетического адаптивного горизонтального меню. Если размер экрана не позволяет отобразить все пункты горизонтального меню, то данный скрипт перемещает эти пункты в выпадающее меню — «три точки». Использование этого скрипта, позволит отображать адаптивную иконку (гамбургер), тогда, когда вы сами это решите, так как меню теперь будет всегда смотреться аккуратно.
8 929 Скрипты / Menu & NavSlide out sidebar меню
Плавно выдвигающееся меню боковой панели. Реализации данного меню уже несколько лет, однако мы решили вспомнить о нём и прикрутить иконки font-awesome, шрифт roboto и обновить modernizr.
6 939 Скрипты / Menu & NavMega dropdown меню
Mega dropdown меню — jQuery плагин для реализации большого выпадающего меню с множеством подкатегорий для сайтов с большим количеством контента.
12 876 Скрипты / AccordionВертикальное accordion меню
Вертикальное многоуровневое меню типа аккордеон, раскрывающееся по клику на стрелке.
4 718 Скрипты / AccordionВертикальное раскрывающееся меню типа аккордеон в стиле flat design. Простое в понимании и стилизации.
5 679 Скрипты / Menu & NavДиагональное меню на CSS
Используя возможности CSS3 в этом уроке сделаем диагональное меню, и напишем media queries, чтобы придать ему адаптивности.
3 826 Скрипты / Menu & NavLavalamp меню на CSS3
Скользящий эффект для меню при наведении, который более известен, как lavalamp эффект. Эффект реализован только на CSS с помощью transitions и селектора ~.
4 400 Скрипты / Menu & NavАнимированный border с меню
Создание off-canvas (вне основной страницы) навигации с анимированным border эффектом.
14 693 Скрипты / Menu & NavАдаптивное много-уровневое меню
Сегодня сделаем адаптивное много-уровневое меню. Для мобильной версии добавим несколько строчек jаvascript кода. Для лучшего восприятия пунктов навигации, добавим для каждого иконки, воспользовавшись уже знакомым нам по предыдущим урокам — font-awesome.css
Видеоурок 1. Выпадающее меню для сайта с помощь html и css на WordPress
Не так давно, на одном из рабочих сайтов, мне нужно было сделать выпадающее меню. Ну дело вроде пустяковое, думал по быстрому сделаю и получу оплату, но не тут то было =) Сначала я решил взять код html и css из каких ни будь подобных уроков и все скопировать, то есть сделать по шаблону. Но после того, как я обнаружил что на многих блогах код дают не правильный — не рабочий, я решил все сделать сам… И все оказалось достаточно просто и быстро. Покажу вам html и css код выпадающего меню — рабочий 🙂 Также рекомендую узнать, как сделать выпадающее меню на WordPress сайте.
html код выпадающего меню — скилет
html код выпадающего меню одинаков, как для вертикального, так и для горизонтального меню. Вы можете увеличить количество пунктов меню, копируя часть кода и вставляя в нужное место.
<ul> <li><a href="/">Подменю 1</a> <ul> <li><a href="/" >Пункт подменю 1</a></li> <li><a href="/">Пункт подменю 2</a></li> <li><a href="/">Пункт подменю 3</a></li> </ul> </li> <li><a href="/">Подменю 2</a> <ul> <li><a href="/">Пункт подменю 1</a></li> <li><a href="/">Пункт подменю 2</a></li> <li><a href="/">Пункт подменю 3</a></li> </ul> </li> </ul>
CSS код горизонтального выпадающего меню
Вот такое меню можно сделать моим способом…
Далее, я привожу вам css код горизонтального меню. Внешний вид меню достаточно прост, но при начальных знаниях css вы сможете придать этому меню тот стиль, который подойдет к дизайну вашего сайта.
#mymenu {
float: left;
width: 100%;
margin: 20px 10px;
list-style: none;
}
#mymenu li {
float: left;
width: auto;
padding: 0 10px;
font-size: 18px;
}
#mymenu li ul {
display: none;
width: 200px;
}
#mymenu li:hover ul {
display: block;
position: absolute;
list-style: none;
margin: 0;
padding: 0;
}
#mymenu li ul li {
float: left;
width: 200px;
padding: 5px 0;
font-size: 14px;
}CSS код вертикального выпадающего меню
А вот и вертикальное выпадающее меню для вашего сайта
#mymenu {
float: left;
width: 150px;
height: auto;
margin: 20px 10px;
list-style: none;
}
#mymenu li {
display: block !important;
width: auto;
padding: 0 10px;
font-size: 18px;
}
#mymenu li ul {
display: none;
width: 200px;
}
#mymenu li:hover ul {
display: block;
list-style: none;
margin: 0 0 0 0px;
padding: 0;
}
#mymenu li ul li {
float: left;
width: 200px;
padding: 5px 0;
font-size: 14px;
}В данном случае меню выпадает вертикально вниз. Но если в CSS стилях заменить вот этот код, подменю выпадает вправо:
#mymenu li:hover ul {
display: block;
list-style: none;
margin: 0 0 0px 100px;
position: absolute;
padding: 0;
}Выпадающее меню для сайта
Выпадающее меню будет полезным для сайта, где планируется меню с большим количеством внутренних пунктов. Преимущества выпадающего меню — это экономия места, удобство использования и простота изготовления 😉 В данном примере меню я не использовал ничего, кроме HTML и CSS, что дает определенные плюсы. Это меню можно сделать многоуровневым — хотя, возможно будет не аккуратно смотреться, но бывают случаи, что это просто необходимо.
Если у вас код откажется работать — пишите в комментарии, подправлю вам лично 🙂
Удачной работы! 😉
Вертикальное выпадающее меню на css — Модули и дополнения ShopCMS — ShopCMS, DataLife Engine, XenForo и другие CMS
Доброго времени суток всем!можно сделать вертикальное меню с категориями вот так:
блок big_category_tree.tpl
скриншот Untitled-1.jpg 132.14К 93 Количество загрузок:
<ul>
{section name=h loop=$big_categories_tree}
{if $big_categories_tree[h].categoryID != 1}
{if $big_categories_tree[h].level > $oldnumber}<ul>{/if}
{if $big_categories_tree[h].level < $oldnumber}{section name=w loop=$oldnumber-$big_categories_tree[h].level}</ul>{/section}{/if}
{if $big_categories_tree[h].subcount > 0}
{if $categoryID != $big_categories_tree[h].categoryID}<li>{else}<li>{/if}{else}<li>{/if}
<a href="{if $smarty.const.CONF_MOD_REWRITE eq 1}category_{$big_categories_tree[h].categoryID}.html{else}index.php?categoryID={$big_categories_tree[h].categoryID}{/if}" {if $categoryID == $big_categories_tree[h].categoryID}class="bf"{/if}>{$big_categories_tree[h].name}</a>
{if $categoryID == $big_categories_tree[h].categoryID}
{/if}
{assign var="oldnumber" value=$big_categories_tree[h].level}
{assign var="oldcat" value=$big_categories_tree[h].categoryID}
{/if}
{/section}
</ul>
</div>
</div>
{else}
<div align="center">{$smarty.const.STRING_NO_CATEGORIES}</div>
{/if}
CSS
ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
margin: 0;
border: 0 none;
padding: 0;
width: 232px;
list-style: none;
}
ul#navmenu-v:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}
ul#navmenu-v li {
float: left;
display: block !important;
display: inline;
position: relative;
}
ul#navmenu-v a {
border: 1px solid #FFF;
border-bottom-color: #ccc;
padding: 0 6px;
display: block;
background: #d2d2d2;
color: #000;
font-family: Trebuchet MS;font-size: 16px;
text-decoration: none;
height: auto !important;
height: 1%;
}
ul#navmenu-v a:hover,
ul#navmenu-v li:hover a,
ul#navmenu-v li.iehover a {
background: #d2d2d2;
color: #000;
}
ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a {
background: #d2d2d2;
color: #000;
}
ul#navmenu-v li:hover li a:hover,
ul#navmenu-v li:hover li:hover a,
ul#navmenu-v li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover a {
background: #f7f8f9;
color: #000;
}
ul#navmenu-v li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li a {
background: #f7f8f9;
color: #000;
}
ul#navmenu-v li:hover li:hover li a:hover,
ul#navmenu-v li:hover li:hover li:hover a,
ul#navmenu-v li.iehover li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover a {
background: #d2d2d2;
color: #000;
}
ul#navmenu-v li:hover li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li.iehover li a {
background: #d2d2d2;
color: #000;
}
ul#navmenu-v li:hover li:hover li:hover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover li a:hover {
background: #648B43;
color: #FFF;
}
ul#navmenu-v ul,
ul#navmenu-v ul ul,
ul#navmenu-v ul ul ul {
display: none;
position: absolute;
top: 0;
left: 230px;
}
ul#navmenu-v li:hover ul ul,
ul#navmenu-v li:hover ul ul ul,
ul#navmenu-v li.iehover ul ul,
ul#navmenu-v li.iehover ul ul ul {
display: none;
}
ul#navmenu-v li:hover ul,
ul#navmenu-v ul li:hover ul,
ul#navmenu-v ul ul li:hover ul,
ul#navmenu-v li.iehover ul,
ul#navmenu-v ul li.iehover ul,
ul#navmenu-v ul ul li.iehover ul {
display: block;
}
правка для ослика:
<!--[if gte IE 5.5]> <script language="JavaScript" src="data/ваш шаблон/menu.js" type="text/JavaScript"></script> <![endif]-->
menu.rar 326байт 36 Количество загрузок:
Прикрепленные файлы
- menu.rar 326байт 36 Количество загрузок:
Вертикальное выпадающее меню | PHPClub
Вертикальное выпадающее менюЗдравствуйте, всем
Пока хочу обсудить проблему создания меню в общем виде, т.к. не уверен, правильно ли я эту проблему представляю, поскольку считаю себя еще новичком, хотя копал эту тему в интернете довольно много. Хотелось бы, чтобы содержание меню было каким-то образом задано в виде, например, массива, а его вид в HTML-тэгах был бы создан автоматически. И еще — имею ввиду именно вертикальное меню и именно раздвигающееся при раскрытии подменю (подменю,раскрывающееся под родительским пунктом с некоторым смещением). Вариант меню, подменю которого выстраивается справа от меню (выпадающее подменю), я не рассматриваю, т.к. для многоуровневые подменю будут занимать много места на странице по горизонтали. Итак, меню с раскрывающимися подменю.
В основном вопрос построения меню на странице сайта в интернете решается средствами сложных CSS с привлечением небольшого кода на JavaScript для поодержки IE 6. Есть варианты решений с простыми CSS, но объемным и сложным кодом на JavaScript. Оба этих подхода на мой взгляд имеют свои недостатки. В решениях со сложными CSS динамическое сворачивание или раскрытие подменю задается псевдоклассом hover и оно довольно сложно выглядит для многоуровневых меню и не очень понятно, как автоматически создать эти CSS. Вообще то CSS должны отвечать только за визуальное оформление элементов страницы, а управлять их видимостью, их перепостроением при различных действиях пользователя удобнее в соответсвующих обработчиках событий на JavaScript.
Вариант со сложным кодом JavaScript плох тем, что весь этот код принимается клиентским браузером и визуальное отображение меню строится скриптом после загрузки всей страницы. При этом скрипту надо каким-то образом передать информацию о том какая ветка подменю должна быть показана, а остальные скрыты.
Я прихожу к выводу, что должно быть комбинированное решение — основное построение HTML-тэгов меню надо выполнить на стороне сервера PHP-кодом, а на JavaScript надо реализовать только обработку событий от мышки пользователя. Задача обработчика состоит в скрытии одного подменю и в отображении другого.
И последнее соображение. Хоть в интернете все примеры используют меню на основе списков <ul>, я прихожу к выводу, что надо использовать таблицы, т.к. у них больше возможностей дизайнерского оформления.
Прошу прощения за длинный опус, но если мои доводы правильны, то готов делиться своими разработками по мере их реализации.
html — вертикальное выпадающее меню css в один столбец?
Я создал вертикальное навигационное меню в css с двумя подменю.
Но я не могу понять, как разместить их в одном столбце, чтобы они работали правильно. Это возможно?