Как разместить элементы списка горизонтально
Рассмотрим все варианты создания горизонтального списка на примерах.
Примеры с горизонтальным списом
Пример 1. Горизонтальный список display: inline
html> head> style> ul.spisok_ver1< margin: 3px; padding: 3px; > ul.spisok_ver1 li< display: inline; margin-right: 3px; border: 1px solid #555; padding: 5px; > /style> /head> body> ul class css">spisok_ver1"> li>Элемент #1/li> li>Элемент #2/li> li>Элемент #3/li> li>Элемент #4/li> /ul> /body> /html>
Вот как это выглядит на странице:
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #4
Пример 2. Простое горизонтальное меню
Здесь мы будем применять свойство display: inline-block для задания блочности элементам.
html> head> style> ul.primer_menu< margin: 3px; padding: 3px; > ul.primer_menu li < margin: 0; padding: 0; text-align: center; background: #4876FF; display: inline-block; font-size: 18px; > ul.primer_menu li a< color: white; display: block; padding: 7px 20px; text-decoration: none; > ul.primer_menu li:hover < background: #B22222; color: #fff; > /style> /head> body> ul class css">primer_menu"> li>a href value">index.html">Главная/a>/li> li>a href value">/production/">Каталог/a>/li> li>a href value">/otzyvy/">Отзывы/a>/li> li>a href value">/about/">О компании/a>/li> li>a href value">/contact/">Контакты/a>/li> /ul> /body> /html>
Вот как это выглядит на странице:
Пример 3. Через свойство float:left
Этот способ применяется не часто. С помощью выравнивания свойством float можно сделать горизонтальное расположение списка. В примере приведено выравнивание по левому краю. Можно сделать также выравнивание по правому краю (float:right)
html> head> style> ul.spisok_ver3< overflow: hidden; > ul.spisok_ver3 li< border: 1px solid #000; display: block; float: left; padding: 3px; margin-left: 5px; > /style> /head> body> ul class css">spisok_ver3"> li>Элемент #1/li> li>Элемент #2/li> li>Элемент #3/li> li>Элемент #4/li> /ul> /body> /html>
Вот как это выглядит на странице:
- Элемент #1
- Элемент #2
- Элемент #3
- Элемент #4
Flexbox горизонтальное меню за 7 минут / CSS + HTML
В данном выпуске сделаем горизонтальное меню с эффектом при наведении. Подключим с шрифтовые иконки, задействуем режим наложения слоев при помощи mix-blend-mode: multiply , используем псевдоклассы :hover , и познакомимся с desplay:flax , все сделаем на чистом CSS3 .
See the Pen MOPbJp by Denis (@Dwstroy) on CodePen.
Каркас меню в HTML
Скачивайте архив к себе на компьютер и разархивируйте. В нем находятся три папки, css где расположены файлы стилей, fonts папка с иконками, img в ней картинка на задний фон.
Перенесите все в свою среду разработки, в которой вы работаете. Я весь код буду писать в phpstorm . Копирую все папки и файлы в него, открываю index.html и приступим к описанию каркаса меню.
Прописываем body , тег , в нем пишем div с классом .dws-menu , далее ul с классом .dws-ul ,затем списки li с классом .dws-li в количестве пяти штук. В списки вложим ссылку, затем I с классом .fa и классом fa- куда пропишем название иконок, далее атрибут aria- hidden=”true” , жмем применить.
div.dws-menu>ul.dws-ul>li.dws-li*5>a>i.fa.fa-[aria-hidden=true]
Проставляем ссылкам решетку, прописываем название, а затем отбираем наши иконки и прописываем их название в разметку index.html .
- home
- shopping-cart
- server
- folder-open
- newspaper-o
Оформление CSS стилей
После того как сделали разметку, приступаем к оформлению стилей. Открываем style.css в body задаем задний фон и шрифт Verdana .
body < background-image: url("../img/escheresque_ste.png"); font-family: Verdana; >
Блоку с меню задаем фон, с верху делаем отступы в 100 пик. и ширину на весь экран.
.dws-menu
В блоки Ul выстраиваем списки горизонтально с помощью desplay:flax , убираем отступы, и центруем наши элементы при помощи justify-content:center .
ul.dws-ul
У списков LI убираем маркер и делаем отступ со всех сторон в 10 пик.
li.dws-li
У ссылок убираем подчеркивание, увеличим текст до 18 пик. и сделаем его черным цветом.
li.dws-li a
Иконку немного сдвинем правее при помощи margin-right:10px .
li.dws-li a i
Анимация при наведении
После того как сделали основное оформление приступим к анимированию при наведении.
Создадим дополнительные псевдо элементы, которые будут при наведении подчеркивать название элемента.
Опишем левую часть, отбираем ссылки и присвоим им псевдоэлемент li.dws-li a::before , пишем пустой content:’’; , шириной в 20 пик. и высоту в 3 пик. достаточно. Зададим цвет и для того что бы блок у нас появился присвоим ссылкам position: relative; , и с позиционируем абсолютно ссылкам, спустим его в самый низ, прижмем к левому краю.
li.dws-li a < . position: relative; >li.dws-li a::before
Дублируем этот блок и присваиваем ему псевдоэлемент ::after . Меняем параметр left на right , цвет выбираем другой #ff2117 .
li.dws-li a::after
Затем делаем анимацию при наведении. Отбираем li и задаем им background чуть темнее.
li.dws-li:hover
Далее анимируем полоски при наведении, что бы он двигались.
Для этого отбираем списки при наведении и добавляем к ним псевдоэлемент с шириной в 50% и задаем трансформацию по оси Х с лева на право. Это предаст ей движение.
li.dws-li:hover a:before
Тоже самое повторим для псевдоэлементом ::after , только теперь движение зададим с права на лево.
li.dws-li:hover a:after
Добавляем к ссылкам плавный переход и изменим режим наложения слоев при помощи mix-blend-mode: multiply;
li.dws-li a::before < . transition: .5s; mix-blend-mode: multiply; >li.dws-li a::after
Получилось довольно не плохо, давайте теперь ширину поставим в ноль и при наведении ссылке добавим красный цвет.
li.dws-li a:hover
Можно еще добавить отступы к ссылкам в пять пикселей и тогда высоту отступов делаем меньше в 90% будет в самый раз.
li.dws-li a < . padding: 5px; >li.dws-li a::before < . top: 90%; >li.dws-li a::after
В принципе, что хотел, я вам показал, получилось довольно симпатичное меню.
Всем кому понравилось видео поделись им в социальных сетях.
Урок подготовил Горелов Денис.
HTML/CSS. Как создать вертикальное и горизонтальное меню
Эта инструкция продемонстрирует, как создать вертикальное и горизонтальное меню используя стили CSS. Перед началом убедитесь, что вы знакомы с HTML тэгами ненумерованного списка. Кроме того, посмотрите инструкцию как создать меню в HTML.
Для начала создадим HTML меню на основе ненумерованного списка:
Теперь необходимо создать CSS файл и подключить его к странице:
Убедитесь, что код подключающий CSS находится в разделе вашего документа.
Вы можете использовать и inline стили.
В результате у вас должен получиться следующий код:
Несортированный список обладает собственными стилями и таким образом без любых дополнительных изменений мы получаем вертикальное меню.
Для создания горизонтального меню понадобятся дополнительные изменения в HTML и CSS.
Теперь давайте сделаем меню горизонтальным с помощью CSS файла. У несортированного списка есть заданные по умолчанию параметры margin и padding. Нужно их обнулить:
ul.horizontal
Теперь сделаем список горизонтальным:
ul.horizontal li
Мы добавили значения padding по горизонтали для того, что бы элементы не слиплись. Теперь меню готово и осталось только добавить в него ссылки, фон и отредактировать цвет шрифта.
Эта запись была размещена в Работа с CSS и помечена как css, HTML, list, menu. Добавьте в закладки постоянную ссылку.