Html меню горизонтальное: Как разместить элементы списка горизонтально?

Разное 

Содержание

Как сделать горизонтальное меню в HTML

Горизонтальное меню сделать достаточно легко, нужно лишь немного воображения и знания html и css.

Для начала попробуем сделать простое горизонтальное меню. Вот пример как оно будет выглядеть:

Самое главное понять принцип, потом самостоятельно сможете сделать более сложное. Само меню размечается следующим фрагментом html кода:


<div>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">SEO</a></li>
</ul>
</div>

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

# — URL ссылки.

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

#menu ul li {display: inline;}

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

#menu ul {border-bottom:1px solid #000000; margin-left:0; padding:3px 0;}

Далее создаем сами прямоугольники, куда будут помещены пункты и внутреннее расстояние в них.

#menu ul li a {text-decoration:none; margin-left:3px; border:1px solid #000000; padding: 3px 4px; border-bottom:0; background:#CEDEFF;}

Задаем, как будут выглядеть посещённые, не посещённые и пункты меню под указателем мыши.

#menu ul li a:link {color:#493;}
#menu ul li a:visited {color:#647;}
#menu ul li a:hover {color:#000; background:#6699FF; border-color:#227}

И, наконец, указываем вид пункта текущей страницы.

#menu ul li a#nowopen {background:#fff; border-bottom: 1px solid #fff;}

Выровнять меню по центру можно, задав #menu {margin:0 25% 0 25%;}

Используя вместо однотонных фонов изображения, можно получить самые разнообразные по дизайну меню.

Подключаем CSS к HTML, меню готово. Файл таблицы стилей.

Применяя различные изображения, мы получим вполне серьезные меню.

 

Скачать меню 1

 

Скачать меню 2

Скачать меню 3

Скачать меню 4

Скачать меню 5

Если для каждого пункта меню фон разный, нужно будет присвоить свой класс каждому пункту меню и для каждого класса прописать правила CSS, как сделано в следующем примере для второго пункта меню: Пример с разными фонами пунктов меню, или по аналогии сделать через id. Если фоном у вас являются изображения, заменяем соответствующие значения background: #цвет на background: url(путь до картинки.gif)

Скачать меню 6

Как сделать горизонтальное меню на CSS

Простое горизонтальное меню

HTML

Cписку меню присвоен стилевой идентификатор, например, [glavnoeMenu] — уникальное имя, которое используется для изменения его стиля.

<ul>
 <li><a title="" href="#">Пункт один</a></li>
 <li><a title="" href="#">Пункт два</a></li>
 <li><a title="" href="#">Пункт три</a></li>
 <li><a title="" href="#">Пункт четыре</a></li>
 <li><a title="" href="#">Пункт пять</a></li>
</ul>

CSS

#glavnoeMenu,
#glavnoeMenu ul
{
 list-style: none; /* Убираем маркеры списка меню */
}
#glavnoeMenu
{
 float: left; /* Выравниваем по левой стороне */
}
#glavnoeMenu > li
{
 float: left; /* Выравниваем по левой стороне */
}
#glavnoeMenu li a
{
 display: block; /* Меню — блочный элемент */
 margin: 0 1em; /* Отделяем пункты меню отступами слева-справа */
 padding: 0; /* Нулевые значения полей вокруг ссылки */
}

Горизонтальное меню с вложенным списком подпунктов

1. Создаем HTML структуру меню — список пунктов с ссылками. Один из пунктов основного меню, например, третий, имеет вложенный список подпунктов.

Основному списку присвоен стилевой идентификатор [glavnoeMenu] — уникальное имя, которое используется для изменения его стиля.

HTML

<ul>
 <li><a title="" href="#">Пункт один</a></li>
 <li><a title="" href="#">Пункт два</a></li>
 <li><a title="" href="#">Пункт три</a>
 <ul>
 <li><a title="" href="#">Подпункт один</a></li>
 <li><a title="" href="#">Подпункт два</a></li>
 <li><a title="" href="#">Подпункт три</a></li>
 </ul>
 </li>
 <li><a title="" href="#">Пункт четыре</a></li>
 <li><a title="" href="#">Пункт пять</a></li>
</ul>

CSS

#glavnoeMenu,
#glavnoeMenu ul
{
 list-style: none; /* Убираем маркеры списка меню */
}
#glavnoeMenu
{
 float: left; /* Выравниваем по левой стороне */
}
#glavnoeMenu > li
{
 float: left; /* Выравниваем по левой стороне */
}
#glavnoeMenu li a
{
 display: block; /* Меню — блочный элемент */
 margin: 0 1em; /* Отделяем пункты меню отступами слева-справа */
 padding: 0; /* Нулевые значения полей вокруг ссылки */
}
#glavnoeMenu li ul
{
 background: none repeat scroll 0 0 #FFFFFF; /* Фон списка с
 
подпунктами, белый */
 display: none; /* Вложенный список с подпунктами не отображается */
 position: absolute; /* Имеет абсолютное позиционирование */
 z-index: 9999999; /* Список с подпунктами перекрывает
 
другие объекты веб-страницы */
}
#glavnoeMenu li ul li a
{
 margin: 0; /* Нулевой отступ */
 padding: 0.
 
 3em 1em; /* Внутренние поля ссылки подпункта*/
}
#glavnoeMenu li:hover ul
{
 display: block; /* Отображение списка с
 
подпунктами при наведении — блочный элемент */
 margin: 0;
 padding: 0.1em 0;
}

Дальнейшее оформление — по вкусу.

Демонстрация меню

 

В случаях размещения меню слева или справа страницы, отступ от края (левого или правого) может нарушить сетку. Для исправления необходимо, в левом варианте, присвоить класс [first] первому пункту и [last] последнему в правом варианте. В стили добавить описание варианта класса:

#glavnoeMenu li a.first
{
 display: block;
 margin: 0 1em 0 0; /* Убираем левый отступ */
 padding: 0;
}
или
#glavnoeMenu li a.last 
{
 display: block;
 margin: 0 0 0 1em; /* Убираем правый отступ */
 padding: 0;
}

Можно ограничить ширину блока вложенного списка. Для этого нужно прописать стиль, указав точную ширину, например 150px.

#glavnoeMenu ul li a 
{
 width: 150px;
}

Как сделать меню навигации в HTML и CSS для сайта

Автор статьи: admin

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

Также, перед тем как начать читать эту статью, рекомендуется сначала прочитать наш учебник по HTML и учебник по CSS.

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

Для начала разберём как сделать вертикальное меню в HTML и CSS, это самый просто тип, на подобие того что есть во ВКонтакте. Но для начала нужно сделать не большую HTML страницу.

<header>

    <h4>Header</h4>

</header>

<main>

    <nav>

        <ul>

            <li><a href=»#»>Главная</a></li>

            <li><a href=»#»>Новости</a></li>

            <li><a href=»#»>Игры</a></li>

            <li><a href=»#»>Продукты</a></li>

        </ul>

    </nav>

    <div>

        <h2>Content</h2>

    </div>

</main>

Тут всё понятно, единственное, что смущает, это тег <nav>, он нужен для обозначения, что внутри него будет меню навигации.

Примечание:

Тег <nav> нужно использовать для навигации, что бы лучше индексировался ваш сайт.

Теперь добавим в тег <nav> список <ul>, что бы сделать меню.

<ul>

    <li><a href=»#»>Главная</a></li>

    <li><a href=»#»>Новости</a></li>

    <li><a href=»#»>Игры</a></li>

    <li><a href=»#»>Продукты</a></li>

</ul>

Здесь не чего интересного нет, единственно, вместо решётки в атрибуте href, надо использовать ссылку на страницу, вот результат.

Как видите всё работает не так как нам надо, теперь с помощью 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

header {

  border: black 2px solid;

}

 

main nav {

  display: inline-block;

  width: 200px;

  border: black 2px solid;

  margin-right: 10px;

  padding: 10px 20px;

  float: left;

}

 

main nav ul {

  padding: 0;

}

 

main nav ul li {

  list-style-type: none;

}

 

main . content {

  display: inline-block;

  width: 500px;

  border: black 2px solid;

  float: left;

}

Как можете заметить для тега <nav> и <div> с классом «content», используем свойство display со значение «inline-block», то есть эти два блока принимают свойства как строчных, так и блочных элементов.

Также, каждый из этих блоков использует свойство float, оно нужно для выравнивания блоков, блочно строчного типа, более подробно по ссылки.

Примечание:

В современных проектах не используется блочно строчные элементы и float, сейчас используются FlexBox или Grid, но новичкам это стоит знать, поэтому в статье используются именно это.

Вот результат.

Конечно, выглядит это не очень, но главное здесь передать саму суть, как сделать вертикальное меню, вам просто надо использовать блочно строчные элементы и float.

Как сделать горизонтальное меню:

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

Сначала надо внести изменения в HTML, мы просто перетащим навигацию в header.

<header>

    <h4>Header</h4>

    <nav>

        <ul>

            <li><a href=»#»>Главная</a></li>

            <li><a href=»#»>Новости</a></li>

            <li><a href=»#»>Игры</a></li>

            <li><a href=»#»>Продукты</a></li>

        </ul>

    </nav>

</header>

<main>

    <div>

        <h2>Content</h2>

    </div>

</main>

Просто перенесли всё навигацию на верх, теперь изменим 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

header {

  border: black 2px solid;

}

 

header nav {

  width: 600px;

  border: black 2px solid;

  margin-right: 10px;

  padding: 10px 20px;

}

 

header nav ul {

  display: flex;

  justify-content: space-around;

  padding: 0;

}

 

header nav ul li {

  list-style-type: none;

}

 

main . content {

  border: black 2px solid;

}

Тут самое важное, это то, что для работы с FlexBox, нужно сделать значение свойства display, «flex», что и сделали для тега <ul>.

Дальше, после этого идёт свойство justify-content, которое нужно для определения пространства между дочерними блоками, в нашем случае принимает значение «space-around», что означает равномерное распределение пространства, вот результат.

Как видите всё работает так как надо, единственное, выглядит не очень, но суть этой статье была в том, чтобы показать как со всем этим работать, а красивый дизайн, вы уже и сами сделаете.

Вывод:

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

Подписываетесь на соц-сети:

Оценка:

Количество оценивших: 2
Средняя оценка: 3,00

Загрузка. ..

Поделится:

Пока кнопок поделиться нет

Также рекомендую:

Меню в html

Списки в HTML

Чтобы создать меню на веб странице, используются теги списка <ul> и <li>

Синтаксис тегов списка 
<ul>Название списка
<li> Первый пункт списка </li>
<li> Второй пункт списка </li>
…
</ul>
Пример списка HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset=»utf-8″>
<title>Список</title>
</head>
<body>
<ul>Список
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
</body>
</html>
 


Горизонтальное меню в HTML

Чтобы создать горизонтальное меню на HTML странице, необходимо для списка создать специальный стиль горизонтального меню
ul {
list-style: none;  /* Убираем маркеры списка */
margin: 0; /* Убираем отступ */
padding-left: 0; /* Убираем отступ слева*/
}
a {
text-decoration: none;  /* Убираем подчеркивание ссылок */
}
li {
float:left;  /* Чтобы пункты списка были горизонтальными */
margin-right:7px;  /* Отступ */
}
В HTML документе для меню создаем свой блок div со своим id и внутри этого блока размещаем список меню.

  Для каждого пункта меню делаем ссылку на нужную страницу с помощью тега <a>. Например
<div><ul>
<li><a href=»http://itrobo.ru/»>Главная</a></li>
<li><a href=»http://itrobo.ru/code»>Программирование</a></li>
<li><a href=»http://itrobo.ru/robot»>Робототехника</a></li>
</ul>
</div>
В файле таблицы стилей style.css прописываем для блока menu необходимые свойства. При этом перед каждым тегом нужно написать id.
#menu ul {
list-style: none;  /* Убираем маркеры списка */
margin: 0; /* Убираем отступ */
padding-left: 0; /* Убираем отступ слева*/
}
#menu a {
text-decoration: none;  /* Убираем подчеркивание ссылок */
font-size: 32pt;
}
#menu li {
float:left;  /* Чтобы пункты списка были горизонтальными */
margin-right:7px;  /* Отступ */
}
Пример горизонтального меню HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset=»utf-8″>
<link rel=»stylesheet» href=»style. css»>
<title>Шаблон простейшего сайта</title>
</head>
<body>
<div><ul>
<li><a href=»http://itrobo.ru/»>Главная</a></li>
<li><a href=»http://itrobo.ru/code»>Программирование</a></li>
<li><a href=»http://itrobo.ru/robot»>Робототехника</a></li>
</ul>
</div>
</body>
</html>
 


Вертикальное меню в HTML

В статье Блочная вёрстка мы разобрали, как задавать основные области веб страницы, такие как шапка, основное содержание и футер. Чтобы создать вертикальное меню, необходимо создать область сайдбара слева или справа. Для сайдбара необходимо создать свой блок <div>. Внутри блока сайдбара задается меню с помощью тегов списка <ul> и <li>. Для каждого пункта меню размещается ссылка на нужную страницу
<!DOCTYPE HTML>
<html>
<head>
<meta charset=»utf-8″>
<link rel=»stylesheet» href=»style. css»>
<title>Шаблон простейшего сайта</title>
</head>
<body>
<div>Шапка сайта</div>
<div>Меню
<ul>
<li><a href=»http://itrobo.ru/»>Главная</a></li>
<li><a href=»http://itrobo.ru/code»>Программирование</a></li>
<li><a href=»http://itrobo.ru/robot»>Робототехника</a></li>
</ul>
</div>
<div> Основное содержимое</div>
<div>Футер</div>
</body>
</html>
В файле таблицы стилей style.css необходимо прописать стиль для сайдбара и в свойстве float необходимо указать left, чтобы колонка меню была слева, если укажем  right, то колонка меню будет справа.
body{
background:#D3D3D3;
}
div{
margin: 5px;
border: 1px solid black;
font-size: 30px;
margin-right: 10%; 
margin-left: 10%; 
}
#header{ 
background-color: #0000CD;
color: #FFFFFF;
height: 100px;
}
#sidebar{
background-color: #ddd;
float: left;
width: 300px;
height: 800px;
}
#main{
background-color: #FFFFFF;
height: 800px;
}
#footer{ 
background-color: #000000;
color: #FFFFFF;
height: 400px; }

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

Полезно : Регистрация домена и размещение сайта на хостинге

Поделиться 

 

 

CSS: создание горизонтального меню | СХОСТ блог

Для того, чтобы создать горизонтальное меню, вам нужно добавить в HTML-документ блок <div> с нумерованным списком внутри. При этом одному из пунктов необходимо присвоить id. Уточним, что символ “#” означает адрес ссылки. Например:

<html>

<head>

<meta charset=»utf-8″>

<title>Горизонтальное меню</title>

<link rel=»stylesheet» type=»text/css» href=»style.css»>

</head>

<body>

<div>

<ul>

<li><a href=»#»>О компании</a></li>

<li><a href=»#»>Продукция</a></li>

<li><a href=»#»>Каталог товаров</a></li>

<li><a href=»#»>Видеогалерея</a></li>

<li><a href=»#»>Контакты</a></li>

</ul>

</div>

</body>

</html>

Поле этого нужно сделать несколько действий:

#menu ul li {

display: inline;

}

  • Создать горизонтальную линию на странице, где будут отображаться пункты горизонтального меню. Обязательно укажите расстояние от края страницы:

#menu ul {

border-bottom:2px solid #000000;

margin-left:0;

padding:4px 0;

}

  • Создать прямоугольные “окошки”, в которых будут размещены пункты меню. Кроме того нужно указать внутреннее растояние:

#menu ul li a {

text-decoration:none;

margin-left:3px;

border:1px solid #000000;

padding: 3px 4px;

border-bottom:0;

background:#CEDEFF;

}

#menu ul li a:link {

color:#493;

}

#menu ul li a:visited {

color:#647;

}

#menu ul li a:hover {

color:#000;

background:#6699FF;

border-color:#227

}

#menu ul li a#nowopen {

background:#fff;

border-bottom: 1px solid #fff;

}

При необходимости вы можете выровнять горизонтальное меню по центру, использовав соответствующее правило CSS:

#menu {

margin:0 25% 0 25%;

}

Горизонтальное меню в браузере:

Создание горизонтальной панели меню с использованием HTML и CSS

Создание горизонтальной панели меню с использованием HTML и CSS

Автор: TechOneStop

Для любого веб-разработчика почти обязательно знать, как создать горизонтальную или вертикальную строку меню с помощью HTML и CSS. Строка меню помогает категоризировать содержимое и повышает удобочитаемость веб-сайта. В этой статье мы обсудим, как создать горизонтальную строку меню с помощью HTML / CSS, шаг за шагом, а в следующей статье — как создать вертикальную строку меню с помощью HTML / CSS.Это самый простой способ создать строку раскрывающегося меню css, но лучше всего подходит для начинающих веб-разработчиков. Чтобы получить более интерактивную панель меню, вы можете использовать JQuery, HTML 5 и CSS3.

Чтобы написать сценарий, вы можете использовать любое программное обеспечение для редактирования HTML CSS, но не забудьте сохранить файл с расширением .HTML. Здесь я использовал Notepad ++ для написания скрипта.

Шаг 1: Откройте любой редактор HTML и напишите сценарий HTML в порядке ul-li без сценария CSS и сохраните файл с расширением .html.




Горизонтальная панель меню CSS





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

Шаг 2: Здесь мы напишем CSS-скрипт внутри html файла. Этот тип сценария CSS называется внутренним CSS, а другой — внешним. Во внешнем CSS мы пишем скрипт в отдельном файле, сохраняем его как .css и включаем этот файл в html-страницу. Преимущество использования внешнего CSS заключается в возможности повторного использования, один файл CSS может использоваться для нескольких веб-страниц. Чтобы упростить задачу, мы добавили внутренний CSS. Чтобы добавить внутренний CSS, создайте тег «Style» в разделе HEAD HTML и напишите сценарий CSS внутри блока

После добавления CSS:


Шаг 3: Теперь добавьте угол кривой, чтобы придать ему красивый вид. Для этого используйте команду css border-radius . установите его на 50 пикселей.
#menu {
width: 100%;
маржа: 0;
отступ: 10 пикселей 0 0 0;
стиль списка: нет;
фон: # 111;
радиус границы: 50 пикселей;
}

После добавления CSS:


Выглядит лучше, правда! Что ж, как только мы завершим css-скрипт, он будет хорошо выглядеть.

Шаг 4: Теперь придайте красивый плавающий вид, где все элементы «li» будут в одной строке, а все элементы «ul» будут ниже этой строки.
#menu li {
float: left;
отступ: 0 0 10px 0;
позиция: относительная; }

После добавления CSS:

Шаг 5: Задайте свойства для тега «A» (при наведении), например цвет, оформление текста, шрифт
#menu a {

поплавок: левый;
высота: 25 пикселей;
отступ: 0 25 пикселей;
цвет: # CC6600;
шрифт: жирный 12px / 25px Arial, Helvetica;
оформление текста: нет;
тень текста: 0 1px 0 # 000; }

После добавления CSS:


Шаг 6: Добавьте еще одно свойство для изменения цвета при удерживании указателя мыши на этих ссылках
#menu li: hover> a {
color: # CC3333; }

Шаг 7: Теперь добавьте два блока css для элементов ul.Первый блок скроет все элементы ul, а также задаст свойства отображения, такие как цвет, отступ, положение. Второй блок предназначен для отображения всех элементов «ul» при наведении курсора на элементы «li».
#menu ul {
стиль списка: нет;
маржа: 0;
отступ: 0;
дисплей: нет;
позиция: абсолютная;
сверху: 35 пикселей;
осталось: 0;
фон: # 222; }
#menu li: hover> ul {
display: block; }

После добавления CSS:


Шаг 8: Задайте для заполнения 0, поля 0 для всех элементов, чтобы они выглядели лучше
#menu ul li {
float: none;
маржа: 0;
отступ: 0;
дисплей: блочный; }

Шаг 9: Задайте свойства для всех элементов «a», которые подпадают под тег «ul»
#menu ul a {
padding: 10px;
высота: авто;
line-height: 1;
дисплей: блочный;
белое пространство: nowrap;
float: нет;
преобразование текста: нет; }

Шаг 9: Теперь добавьте еще несколько строк для улучшения визуальных эффектов, установите правильный размер для черного фона, отображение всех элементов
#menu: after {
visibility: hidden;
дисплей: блочный;
font-size: 0;
содержание: »«;
ясно: оба;
высота: 0; }

После добавления CSS:


Вот и все. Мы успешно создали горизонтальную строку меню CSS. Теперь мы добавим еще несколько строк, чтобы наша панель меню css выглядела более профессионально.

Дополнительный шаг 1 : Чтобы отобразить указатель под наведенной ссылкой, добавьте следующий скрипт
#menu ul li: first-child a: after {
content: ”;
позиция: абсолютная;
слева: 30 пикселей;
верх: -8 пикселей;
ширина: 0;
высота: 0;
border-left: 5 пикселей сплошной прозрачный;
border-right: 5 пикселей сплошная прозрачная;
нижняя граница: сплошной 8 пикселей # FF0000;
}


После добавления CSS:


Дополнительный шаг 2: Установите для свойства border-radius значение 5px в элементе «#menu ul», который даст небольшой вырез для всех тегов ul.
border-radius: 5px;

После добавления CSS:


Как хорошо !!! прост в создании, но великолепен по внешнему виду.Мы могли бы добавить еще много свойств, чтобы придать ему более профессиональный вид. Но поскольку это наша первая горизонтальная строка меню, не хочу усложнять ее. Обо всех остальных свойствах мы поговорим в следующих статьях.
Если у вас есть сомнения или вопросы, не стесняйтесь обращаться к нам. Чтобы получать больше обновлений о последних действиях, подписывайтесь на «TechOneStop» в Facebook / Twitter / LinkedIn или присоединяйтесь к нашему сайту в качестве подписчиков.
Как создать вертикальную строку меню с помощью HTML и CSS >>

Создайте вертикальную панель меню с помощью HTML и CSS

Простая горизонтальная навигация | CSS-фрагменты

Примечание: Этот пост был написан более трех лет назад, а это были годы веб-разработки, то есть вечность.Я переделал фрагмент, чтобы использовать лучший CSS.

В этом уроке я исследую два разных метода горизонтальной навигации на больших экранах. Фрагмент адаптивный. Он создаст вертикальное меню на маленьких экранах и горизонтальное меню на больших экранах.

См. Простую адаптивную горизонтальную навигацию Pen от Лизы (@lisa_c) на CodePen.

Предпочитаемый метод обучения?

Фрагменты кода
Если вам просто нужен код и не нужно описание.

Просмотр видео
Если вам нравится, как что-то работает, с пояснением, посмотрите видео.

Чтение описания
Если вы научитесь лучше читать, я включаю расшифровку видео с соответствующими встроенными фрагментами кода.

Только код

См. Простую адаптивную горизонтальную навигацию Pen от Лизы (@lisa_c) на CodePen.

См. Простую адаптивную горизонтальную навигацию Pen от Лизы (@lisa_c) на CodePen.

Видео

Выписка

Начнем с HTML. У меня простой неупорядоченный список ссылок. Каждый элемент списка имеет имя класса, связанное с его именем.

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

Я убираю поля и отступы и сначала задаю цвет фона для тела.

  body {
      маржа: 0;
      отступ: 0;
      фон: #ccc;
    }

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

Я нацелен на ul внутри .nav , потому что мне, вероятно, нужен другой стиль для неупорядоченных списков без навигации.

  .nav ul {
      стиль списка: нет;
      цвет фона: # 444;
      выравнивание текста: центр;
      отступ: 0;
      маржа: 0;
    }

В элементах списка внутри nav ( .nav li ) я установлю типографику.

  .nav li {
      семейство шрифтов: «Освальд», без засечек;
      размер шрифта: 1.2em;
      высота строки: 40 пикселей;
      высота: 40 пикселей;
      нижняя граница: 1px solid # 888;
    }

Я устанавливаю высоту строки и высоту на 40 пикселей , чтобы текст был центрирован по вертикали в каждой строке.Я также даю тонкую границу, чтобы различать линии.

Наконец, я отключу подчеркивание и сделаю текст в ссылках белым.

  nav a {
      текстовое оформление: нет;
      цвет: #fff;
    }

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

Ссылки доступны только тогда, когда я нахожусь над словами в ссылке. Я хочу, чтобы ссылка охватывала весь блок.Поэтому мне нужно добавить display: block к этим ссылкам. Теперь я могу щелкнуть в любом месте, чтобы перейти на другую страницу.

Я хочу изменить цвет при наведении курсора на ссылку. Я могу сделать это с помощью этого:

  nav a: hover {
      цвет фона: # 005f5f;
    }

Было бы неплохо иметь небольшой эффект перехода при наведении курсора, поэтому я добавлю это.

  переход: .3s background-color;

Я добавляю его в тег a , а не в селектор hover .Это позволит переходу происходить как при наведении указателя мыши на ссылку, так и при удалении указателя мыши.

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

У меня сейчас активный класс по ссылке «новости». Я могу оформить этим активные ссылки.

  a.active {
      цвет фона: #fff;
      цвет: # 444;
    }

Но у нас проблема при наведении курсора на активную ссылку.Я не хочу, чтобы этот цвет изменился. Поэтому я добавлю .nav в начале, чтобы этот селектор имел более конкретную специфику и переопределил ранее определенный .nav a: hover .

Я хочу изменить курсор : по умолчанию; , поэтому не похоже, что нажатие на эту ссылку ни к чему не приведет.

Итак, все работает нормально, и это будет хорошо смотреться на телефоне. Однако на более широком экране это выглядит странно.

Когда экран больше 600 пикселей, я хочу переключиться на горизонтальную навигацию, так что это будет моя точка останова.

Все, что меньше 600 пикселей, будет отображать навигацию по вертикали, а все с большим разрешением — по горизонтали.

Я могу добавить медиа-запрос.

  @media screen and (min-width: 600px) {

  }

Затем я могу настроить таргетинг на .nav li внутри медиа-запроса. Поэтому на экране шириной не менее 600 пикселей он будет использовать этот код:

  .nav li {
      ширина: 120 пикселей;
      нижняя граница: нет;
      высота: 50 пикселей;
      высота строки: 50 пикселей;
      размер шрифта: 1.4em;
    }

Я делаю каждый пункт меню шириной 120 пикселей, так как здесь 5 элементов, а 5 * 120 — 600. Я удаляю границу и увеличиваю текст меню и панель.

Если мы немного сдвинем область просмотра, то увидим, как она изменится.

Теперь у нас есть два варианта сделать это горизонтальным. Один вариант — отобразить элементы списка как inline-block , а другой вариант — использовать числа с плавающей запятой. Первый способ проще, но у вас может быть причина использовать числа с плавающей запятой, поэтому я объясню оба варианта.Любой из вариантов будет работать в IE8, однако IE8 не распознает медиа-запрос. Позже нам нужно будет скопировать этот код в таблицу стилей только для IE8.

Несмотря на то, что я все еще нацелен на селектор .nav li , я помещу другой код параметра за пределами этого первого выбора, чтобы я мог легко различать эти два варианта.

Если я добавлю

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

навигация работает неплохо.У нас есть небольшая проблема шириной около 600 пикселей, когда последний пункт меню переходит на другую строку. Кроме того, если я наведу курсор на другие элементы, вы увидите, что у нас есть небольшой промежуток серого цвета. Это связано с тем, что при использовании встроенного блока вводится небольшой запас. Мы можем с этим справиться, добавив небольшую отрицательную маржу.

  margin-right: -4px;

А теперь все отлично выглядит.

Итак, этот метод работает, и мы могли бы остановиться на этом.Я не уверен, есть ли у этого обратная сторона, но вам может понадобиться другой вариант и посмотреть, как будут работать поплавки.

  .nav li {
      плыть налево;
    }

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

Если я включу выделение при предварительном просмотре, вы увидите каждый тег li с рамкой. Но тег ul — это всего лишь одна строка, которая означает, что она свернута.

Есть множество способов исправить это, и у меня есть целое видео, объясняющее все способы. В этом случае я просто добавлю

  .nav ul {
      перелив: авто;
    }

, который прост и будет работать.

Однако у нас есть новая проблема, и это то, что навигация больше не центрирована. В зависимости от вашего веб-сайта это может не быть проблемой. Но если мы хотим исправить это, мы можем добавить это:

  ширина: 600 пикселей;
    маржа: 0 авто;

, чтобы отцентрировать его.

И последнее изменение — сделать всю панель nav темно-серым цветом, чтобы она расширялась.

Итак, метод inline-block намного меньше кода и проще. Но я подумал, что было бы полезно увидеть оба метода. Раньше я всегда использовал метод float , и его правильное использование иногда вызывало головную боль.

Наконец, этот код хорошо работает во всех современных браузерах, включая IE9 и выше. Если бы мы посмотрели на это в IE8, мы бы увидели только вертикальную навигацию, подобную этой, независимо от ширины экрана, потому что IE8 не распознает медиа-запросы.

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

    
  
  .nav li {
      ширина: 120 пикселей;
      нижняя граница: нет;
      высота: 50 пикселей;
      высота строки: 50 пикселей;
      дисплей: встроенный блок;
      маржа слева: -4px;
    }

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

Если бы я сначала стилизовал горизонтальное меню, нам не понадобилась бы таблица стилей для IE. Я мог бы использовать max-width вместо min-width и изменить способ написания кода. Но я хотел использовать прежде всего мобильный подход. Код в итоге оказался проще, чем когда я изначально подходил к нему с большого экрана.

Надеюсь, это было полезно. Если у вас есть вопросы, напишите их на css-snippets.com.

Как создать горизонтальное меню на чистом CSS без JavaScript

Создать горизонтальное меню на чистом CSS действительно легко.

Для этого вам просто нужно создать пару строк разметки HTML и стилей CSS.

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

Просто следуй за мной.

Помните, мы не будем использовать какой-либо JavaScript, потому что мы хотим, чтобы наши вещи как всегда были простыми и очень быстрыми.

Не тратьте время зря

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

ДЕМО: Горизонтальное меню на чистом CSS.

Если это то, что вам нужно, продолжайте.

Ваша базовая структура HTML

Всегда начинайте с базы HTML5, см. Ниже.








 Горизонтальное меню на чистом CSS

Пример № 1

Ваша HTML-навигация

Поскольку мы используем HTML5, мы будем использовать тег навигации (nav).

Внутри этой навигации мы будем использовать простые теги привязки (а).

Теперь здесь, если хотите, вы можете использовать неупорядоченный (ul) список, как показано ниже.

Пример № 2

Но поскольку я хочу, чтобы это было просто, я просто буду использовать теги привязки (a), как показано ниже.

Образец № 3

Назовем наши меню «Дом», «Услуги» и «Контакт».

Внутри атрибута «href» я просто буду использовать символ хэштега.

Но имейте в виду, что вы можете изменить это на любой URL-адрес.

Like вместо этого (#) вы можете добавить это (https: // supfort.com).

См. Ниже, как я только что добавил хэштег для этого примера.

Пример № 4

HTML-разметка полного меню

Давайте сложим полную HTML-разметку.

Это должно выглядеть, как показано ниже.








 Горизонтальное меню на чистом CSS

Пример № 5

Добавление CSS

Давайте украсим это меню с помощью CSS.

Сначала мы зададим цвет фона основной навигации.

В этом примере мы будем использовать темно-серый шестнадцатеричный цвет (# 515151), но вы можете использовать любой цвет, какой захотите.

Если вы хотите использовать другой цвет, вы можете использовать этот инструмент.

См. Ниже шестнадцатеричный цвет темно-серый (# 515151).


nav {
фон: # 515151;
}

Sample # 6

Имейте в виду, что внутри демонстрации я выравниваю все по центру, но это необязательно.

Так что просто используйте его, если хотите.

Но если нет, то, пожалуйста, сохраняйте простоту и не добавляйте это.


nav {
фон: # 515151;
выравнивание текста: центр; / * ЭТО НЕОБЯЗАТЕЛЬНО * /
}

Пример № 7

Теперь давайте стилизуем наши элементы привязки (a).

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

Почему?

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


nav a {
дисплей: встроенный блок;
}

Пример № 8

Наконец, мы просто добавим белый цвет, отступы, удалим подчеркивание, которое идет с каждой ссылкой, и простую анимацию перехода.


nav a {
дисплей: встроенный блок;
цвет: #FFF;
отступ: 18px 12px;
текстовое оформление: нет;
        переход: легкость в .3s;
}

Пример № 9

Наведение вашего CSS-меню

Последним шагом будет добавление цветов, когда пользователь наводит указатель мыши на каждую ссылку меню.

Это называется зависанием, поэтому мы будем использовать селектор «: hover».

Помните, что вы можете использовать любой шестнадцатеричный цвет, который вам нужен.


nav a: hover {
цвет: # 515151;
фон: #FFF;
}

Пример № 10

Полное меню вместе

Чтобы закончить это руководство, давайте соберем все вместе.

В этом случае мы будем использовать внутренние стили CSS.

Но вы также можете использовать внешний лист CSS, если хотите.








 Горизонтальное меню на чистом CSS 

<стиль>

nav {
фон: # 515151;
}

nav a {
дисплей: встроенный блок;
цвет: #FFF;
отступ: 18px 12px;
текстовое оформление: нет;
        переход: легкость в .3s;
}

nav a: hover {
цвет: # 515151;
фон: #FFF;
}

Образец № 11

И все, очень просто.

Если вы хотите загрузить полную демоверсию, воспользуйтесь ссылкой ниже.

ССЫЛКА: Скачать демо

Помните, HTML и CSS работают везде.

Итак, если вы хотите добавить этот код в свою любимую CMS, такую ​​как WordPress, Joomla, Drupal, это возможно.

Это будет непросто, но возможно.

Если вам нужна помощь в этом, пожалуйста, отправьте мне сообщение.

Вы можете просто нажать на зеленую кнопку ниже.

Или, если вы живете недалеко от Форт-Уэрта, Техас, просто посетите мою домашнюю страницу.и позвони мне.

Вы сможете найти всю мою информацию внизу этой страницы.

Центрирование элементов списка по горизонтали (немного сложнее, чем вы думаете)

Обновление , апрель 2013 г .: Эта статья довольно старая. Это не очень сложно. Просто введите текст по центру списка (например, ul.nav {text-align: center;} ) и элементы списка inline-block (например, ul.nav li {display: inline-block;} ). Если по какой-то причине вы хотите сделать это с полем, посмотрите width: fit-content; .

Текущий стандарт кодирования меню — неупорядоченные списки. Он не такой семантический, как тег

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *