Разное

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

02.06.2023

Меню навигации с выпадающим списком на чистом 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

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

Скрипты для вебмастера » Страница 35

TinyScroller — Прокручивающийся DIV

jаvascript реализующий прокрутку div и весом в 1,92 Kb. Может быть использован в любом HTML документе. Дизайн настраивается в CSS.

Наложение информации на изображение

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

Hashslider — плагин слайдшоу

Еще один плагин слайдшоу — hashslider. Особенностью является то, что он добавляет хештег в адресную строку взависимости от положения ползунка, т. е. связать можно с любым контентом. Например, ссылка https://pcvector.net/index.html#4 установит ползунок в 4-ю позицию, на четвертый слайд.

Slides — плагин слайдшоу

Слайды (Slides) — простейший слайдшоу плагин на jQuery. C такими возможностями, как: цикличность, auto play, fade или слайд эффекты, плавность, предварительная загрузка изображений, автогенерация нумерации.

Красивое слайдшоу

Привлекательное слайдшоу. При наведении на вкладки происходит смена изображений. Но появилось похожее и более функциональное слайдшоу — ссылка.

CSS3 tooltips (подсказки)

Реализованные только на CSS всплывающие подсказки для отдельных элементов сайта.

Выпадающее CSS3 меню

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

Вертикально-горизонтальный аккордион

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

Горизонтальный аккордион c вкладками

Симпатичная панель с раздвижными вкладками использующая библиотеку jQueryTools.

Красное вертикальное меню

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

Динамические кнопки на CSS3

Вот такие динамические кнопочки можно сделать на CSS3

Меню ввиде слайдов с выпадающим списком

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

Популярные статьи

Реклама

Опрос

Используете ли вы в реальных проектах CSS Grid Layout ?

Да

Нет, из-за необходимости поддерживать старые браузеры

Нет, хватает flexbox

Нет, хватает display-table и float

Что это вообще за css grid?

Новости

Подпишись

Присоединяйся, чтобы узнать все самое интересное для frontend разработчика и анонсы статей с сайта.

Разное

Реклама

Свежие статьи

Styling CSS раскрывающееся меню при наведении курсора

TL;DR — раскрывающееся меню CSS относится к меню, которое скрывает несколько элементов или отображает дополнительную информацию. Этот контент обычно появляется при наведении курсора мыши.

Наведите курсор на меня

Это выпадающий текст!

Beautiful Travel Picture

Содержание
  • 1. Раскрывающееся меню CSS: основные советы
  • 2. Основное раскрывающееся меню
  • 3. Добавление ссылок
  • 4. Выравнивание содержимого по правому краю
  • 5. Раскрывающееся меню CSS: полезные советы

Раскрывающееся меню CSS: основные советы

  • Раскрывающееся меню CSS скрывает содержимое или параметры до тех пор, пока не произойдет определенное событие (обычно когда срабатывает :hover ).
  • HTML создает основную структуру , а CSS добавляет основные свойства к стилю кнопки или текста в виде раскрывающегося меню.
  • Раскрывающийся список  меню являются общими для добавления навигационных кнопок .

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

переключаемое меню в основном с помощью CSS и только нескольких элементов HTML.

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

Пример 

 .drop {
положение: родственник;
отображение: встроенный блок;
}

.drop-контент {
положение: абсолютное;
цвет фона: #8842d5;
минимальная ширина: 150 пикселей;
отступ: 15 пикселей;
z-индекс: 1;
дисплей: нет;
}

.drop: наведите курсор .drop-content {
дисплей: блок;
}

Попробуйте живое обучение на Udacity

  1. Первым шагом является создание HTML-элемента , который будет изначально видимым элементом
    в раскрывающемся меню. Например, может показать скрытых элементов , как только вы наведете на него курсор.
  2. Затем необходимо добавить содержимое, которое выпадающее меню скрывает . Вы делаете это, заключая скрытые элементы в
    . дисплей: встроенный блок позиций содержание.
  3. имеет относительную позицию , чтобы убедиться, что скрытое содержимое отображается на ниже видимого элемента.
  4. Необходимо включить
    position: absolute     и display: none для поля содержимого, чтобы гарантировать, что оно останется скрытым до наведения.
  5. Вы можете добавить свойства CSS для выпадающего меню: изменить фон, отступы, ширину или шрифты.
  6. Наконец, мы добавляем :hover selector to display: block для отображения скрытого содержимого при наведении курсора мыши на видимый элемент.

Примечание:   overflow:auto включает прокрутку скрытого меню на небольших экранах.

Pros

  • Простой дизайн (без лишней информации)
  • Качественные курсы (даже бесплатные)
  • Разнообразие функций

Основные функции

  • Программы NanodeGree
  • Подходящие для предприятий
  • Платные сертификаты о завершении

Эксклюзив: 75%. о своих пользователях

Основные характеристики

  • Огромное разнообразие курсов
  • 30-дневная политика возврата средств
  • Бесплатные сертификаты об окончании

до 12,99 долл. США

Pros

  • Great User Experience
  • предлагает качественное содержание
  • очень прозрачные с их ценой

9

  • Free Serticates of Complete of Ditail
  • . научные навыки
  • Гибкий график обучения

СКИДКА 75%

Выпадающее меню CSS со ссылками может служить навигационными меню для веб-сайтов.

Пример 

 .drop_btn { /* Это стилизация кнопки раскрывающегося списка */
цвет фона: #8842d5;
белый цвет;
отступ: 15 пикселей;
размер шрифта: 18px;
граница: нет;
курсор: указатель;
}

.уронить {
отображение: встроенный блок;
    положение: родственник;
}
 
.drop-content { /* Для оформления самого контента */
цвет фона: белый;
минимальная ширина: 150 пикселей;
дисплей: нет;
 положение: абсолютное;
}

.drop-content a { /* Для оформления ссылок внутри контента */
черный цвет;
отступ: 15 пикселей;
текстовое оформление: нет;
дисплей: блок;
}

.drop-content a:hover { /* Изменяем цвет выпадающих ссылок при наведении на них */
    цвет фона: светло-серый;
}

.drop:hover .drop-content { /* Показывает список выпадающего меню при наведении */
дисплей: блок;
}

. drop:hover .drop_btn { /* Также меняет цвет кнопки раскрывающегося списка при наведении курсора мыши */
цвет фона: #7300ff;
}

Попробуйте живое обучение на Udacity

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

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

Выровнять содержимое по правому краю

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

Пример 

 .drop-content {
справа: 0;
}

Попробуйте живое обучение на Udacity