Ваше меню можно сделать используя только HTML и CSS.
|
Цитата:
|
|
Как лучше сделать при написании стилей: присвоить всем подменю отдельные селекторы ( типа .sub-menu, .sub-sub-menu) или прописывать свойства, используя .menu ul li ul… и тому подобное?
|
Оба варианта работоспособны! Первый вариант лучше подходит, когда вы по разному хотите сочетать элементы на странице, ну а меню имеет определённую структуру, и чтобы легче было менять местами пункты меню, лучше подходит второй вариант! (Вам не придётся переименовывать классы!)
|
Цитата:
|
|
Как лучше: вложить подменю в div или чтобы оно просто выпадало?
|
Элементы подменю так и так находятся в контейнере (элемент ul), так что особого смысла этот div не добавляет.
|
Цитата:
|
|
Название пункта меню (например «ВОПРОСЫ») заключить лучше в <span></span> или в <div></div>?
|
Лучше, чтобы это была ссылка или кнопка, поскольку это элементы, которые могут принимать фокус по умолчанию, и соответственно вы сможете в CSS написать, что если пользователь взаимодействует с кнопкой, то открыть подменю!
|
Цитата:
|
|
Что лучше прописать тегу li основного меню: просто float: left; или display: inline; float: left; ?
|
Можно просто...
display: inline-block;
или...
display: flex; flex-wrap: wrap;
Вот я попробовал сделать такое меню, в широком окне оно как полоска и подменю появляется сбоку, а в узком окне подменю появляется снизу, а само меню сворачивается в гамбургер.
|
Сообщение от uliana-new
|
|
Один из пунктов меню должен содержать третий уровень вложенности и открываться как меню-аккордеон, то есть вниз, а не вбок от второго уровня.
|
Посмотрите в примере: Вопросы -> Кабинет администации -> Полезная информация
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
<title>Document</title>
</head>
<body>
<nav tabindex="0">
<ul>
<li>
<a href="#1">Вопросы</a>
<ul>
<li>
<a href="#1">Кабинет администации</a>
<ul>
<li>
<a href="#1">Полезная информация</a>
<ul>
<li><a href="#1">Полезная информация</a></li>
<li><a href="#1">Встреча дембеля</a></li>
<li><a href="#1">Стихи, юморные рассказы...</a></li>
<li><a href="#1">Служба по контракту</a></li>
<li><a href="#1">Военные сборы</a></li>
</ul>
</li>
<li>
<a href="#1">Встреча дембеля</a>
<ul>
<li><a href="#1">Полезная информация</a></li>
<li><a href="#1">Встреча дембеля</a></li>
<li><a href="#1">Стихи, юморные рассказы...</a></li>
<li><a href="#1">Служба по контракту</a></li>
<li><a href="#1">Военные сборы</a></li>
</ul>
</li>
<li><a href="#1">Стихи, юморные рассказы...</a></li>
<li><a href="#1">Служба по контракту</a></li>
<li><a href="#1">Военные сборы</a></li>
</ul>
</li>
<li>
<a href="#2">Горячая линия</a>
<ul>
<li><a href="#1">Полезная информация</a></li>
<li><a href="#1">Встреча дембеля</a></li>
<li><a href="#1">Стихи, юморные рассказы...</a></li>
<li><a href="#1">Служба по контракту</a></li>
<li><a href="#1">Военные сборы</a></li>
</ul>
</li><li>
<a href="#2">Ваши вопросы</a>
<ul>
<li><a href="#1">Полезная информация</a></li>
<li><a href="#1">Встреча дембеля</a></li>
<li><a href="#1">Стихи, юморные рассказы...</a></li>
<li><a href="#1">Служба по контракту</a></li>
<li><a href="#1">Военные сборы</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#1">Поиск</a>
<ul>
<li><a href="#1">Поиск части</a></li>
<li><a href="#2">Поиск по слову</a></li>
</ul>
</li>
<li>
<a href="#1">Правила</a>
<ul>
<li><a href="#1">Правила</a></li>
<li><a href="#2">Правила на форуме</a></li>
<li><a href="#3">Правила сетевого этикета</a></li>
<li><a href="#3">Наведение порядка</a></li>
<li><a href="#3">Запрещается</a></li>
<li><a href="#3">Ваши данные</a></li>
</ul>
</li>
<li>
<a href="#about">Мой форум</a>
<ul>
<li><a href="#1">Участники</a></li>
<li><a href="#2">Профиль</a></li>
<li><a href="#3">Сообщения</a></li>
<li><a href="#3">Подписка</a></li>
<li><a href="#3">Мои посты</a></li>
</ul>
</li>
<li>
<a href="#about">Отдохнём</a>
<ul>
<li><a href="#1">Клубы по интересам</a></li>
<li><a href="#2">Комната отдыха</a></li>
</ul>
</li>
<li>
<a href="#about">Главная</a>
</li>
<li>
<a href="#about">Каталог частей</a>
</li>
</ul>
</nav>
<style>
@import url("https://fonts.googleapis.com/css?family=Russo+One&subset=cyrillic");
nav {
font-family: "Russo One", sans-serif;
}
nav li {
position: relative;
list-style: none;
}
nav ul {
padding: 0;
margin: 0;
background: linear-gradient(45deg, #46332c, #364533, #3c4e36, #495437, #575b40);
text-shadow: 0 1px rgba(0, 0, 0, .5), 0 0 1px rgba(0, 0, 0, .7);
}
nav > ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
nav li ul {
display: none;
position: absolute;
margin: -5px 0 0 5px;
box-shadow:
0 .1em 1em rgba(0, 0, 0, 0.3),
inset 0 0 1px rgba(255, 255, 255, 0.5)
;
}
nav li > ul > li > ul {
left: 100%;
top: 0;
margin: 5px 0 0 -5px;
}
nav li > ul > li > ul > li > ul {
position: static;
margin: 5px;
}
nav ul {
border-radius: 5px;
}
nav li:focus-within > ul {
display: block;
display: flow-root;
z-index: 1;
}
nav li a, nav > ul:before {
color: white;
text-decoration: none;
display: block;
padding: 1em;
border-radius: 5px;
white-space: nowrap;
}
nav li a:focus {
background: rgba(0, 0, 0, .5);
color: white;
}
@media (max-width: 840px) {
nav > ul:before {
content: "☰";
}
nav > ul {
flex-direction: column;
display: inline-block;
}
nav:focus-within > ul {
display: block;
}
nav li {
flex: 1;
display: none;
}
nav:focus-within li {
display: block;
}
nav li ul,
nav li > ul > li > ul {
position: static;
margin: 10px;
}
nav > ul:before,
nav li a {
white-space: normal;
text-align: center;
}
}
</style>
</body>
</html>
Структура меню однородная, вы без проблем можете переставлять пункты меню...
Вы можете открыть этот пример в отдельном окне, чтобы изменять его размеры, и смотреть, как оно изменяется...
https://codepen.io/Malleys/pen/KYKmpZ?editors=1000
Ещё тот же пример, если я вдруг не так понял...
https://codepen.io/Malleys/pen/EJxWJd?editors=1000
https://codepen.io/Malleys/pen/vMYxoY?editors=1000