Как сделать выпадающее меню в html css: Как создать выпадающее меню

Меню навигации с выпадающим списком на чистом CSS

Чтобы сделать меню навигации с выпадающим списком на чистом CSS, мы воспользуемся возможностями CSS3, а именно, псевдоклассом :checked.

Этот псевдосласс применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение “включено”. Переключение элементов в такое состояние происходит с помощью атрибута checked тега <input> или пользователем.

Разметка

<nav>
	<div>Website</div>
	<ul>
		<li>
			<input type="radio" name="nav-group">
			<label for="home">Home</label>
			<label for="nav-close"></label>
			<div>
				<div>
					<ul>
						<li><a href="#">More about us 1</a></li>
						<li><a href="#">More about us 2</a></li>
						<li><a href="#">More about us 3</a></li>
					</ul>
				</div>
			</div>
		</li>
		<li>
			<input type="radio" name="nav-group">
			<label for="css">CSS</label>
			<label for="nav-close"></label>
			<div>
				<div>
					<ul>
						<li><a href="#">More about us 1</a></li>
						<li><a href="#">More about us 2</a></li>
						<li><a href="#">More about us 3</a></li>
					</ul>
				</div>
			</div>
		</li>
		<li>
			<input type="radio" name="nav-group">
			<label for="dropdown">Dropdown</label>
			<label for="nav-close"></label>
			<div>
				<div>
					<ul>
						<li><a href="#">More about us 1</a></li>
						<li><a href="#">More about us 2</a></li>
						<li><a href="#">More about us 3</a></li>
					</ul>
				</div>
			</div>
		</li>
	</ul>
	
	<input type="radio" name="nav-group">
</nav>

Стили

. nav-main {
	width: 100%;
	background-color: #222;
	height: 70px;
	color: #fff;
}
.nav-main .logo {
	float: left;
	height: 40px;
	padding: 15px 30px;
	font-size: 1.4em;
	line-height: 40px;
}
.nav-main > ul {
	margin: 0;
	padding: 0;
	float: left;
	list-style-type: none;
}
.nav-main > ul > li {
	float: left;
}
.nav-option {
	display: none;
}
.nav-option:checked ~ .nav-content {
	max-height: 400px;
	-webkit-transition: max-height 0.4s ease-in;
	-moz-transition: max-height 0.4s ease-in;
	transition: max-height 0.4s ease-in;
}
.nav-option:checked + label {
	background-color: #444;
}
.nav-option:checked ~ .nav-close {
	display: block;
}
.nav-item {
	display: inline-block;
	padding: 15px 20px;
	height: 40px;
	line-height: 40px;
	margin: 0;
}
.nav-item:hover {
	background-color: #444;
	cursor: pointer;
}
.nav-content {
	position: absolute;
	top: 70px;
	overflow: hidden;
	max-height: 0;
	background-color: #222;
	color: #fff;
}
.nav-content a {
	color: #fff;
	text-decoration: none;
}
.nav-content a:hover {
	text-decoration: underline;
}
. 

  
 nav-sub {
	padding: 20px;
}
.nav-sub ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
.nav-sub ul a {
	display: inline-block;
	padding: 5px 0;
}
.nav-close {
	display: none;
	position: absolute;
	top: 70px;
	left: 0;
	height: 100%;
	width: 100%;
}
.nav-close-option {
	display: none;
}

Результат:

Смотреть результат

Теги: css

Редактировать

Как сделать выпадающее меню html?

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

Инструкция

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

Укажите свойства для списка, расположенного в элементе другого списка: #vmenu li ul { position:absolute; left:250px; top:0; display:none; }. Присвойте параметру позиционирования position значение absolute, чтобы осуществлять абсолютное позиционирование подменю относительно пункта меню. Задайте расположение с помощью отступа пространства слева left и сверху top. Определите параметр отображения элемента display как none, поскольку изначально выпадающий список не должен быть виден.

Совет добавлен 23 января 2012 Совет 2: Как сделать вертикальное выпадающее меню Вертикальное выпадающее меню очень удобно — оно позволяет сэкономить место на веб-странице, в то же время помогает легко ориентироваться на сайте. Попробуйте сделать выпадающее меню на основе CSS — каскадных таблиц стилей. Если вы пока не специалист в создании кода CSS, то воспользуйтесь сервисом purecssmenu.com. От вас требуется выбрать тип меню, настроить его внешний вид, а затем адаптировать к собственному сайту. Сервис сам сгенерирует необходимый код, который вы затем вставите в файлы своего сайта.

Инструкция

Настройте шрифт и цвет меню: для используйте вкладку Parameters. В поле Font выберите шрифт, размер шрифта, если нужно, — подчеркивание (underline) и выделение жирным (bold). В поле Colors настройте фон меню (background), цвет шрифта (font), а также цвет шрифта (font hover) и цвет фона (background hover) при наведении курсора.

Обратите внимание на поле Item Parameters (параметры пункта) внизу сайта. В строке Text укажите название пункта меню, в строке Link — url страницы, на которую будет вести данный пункт. В строке Tip вы можете оставить описание пункта, которое будет показываться при наведении курсора на ссылку. Строка Target предназначена для определения способа открытия страницы, на которую ведет ссылка. Параметр _self в этой строке открывает страницу в том же окне браузера, что и текущая.

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

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

Как сделать вертикальное выпадающее меню — версия для печати Оцените статью!