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

Содержание

Создаем горизонтальное меню

Навигационное меню сайта — это элемент который присутствует на каждом сайте, будь то домашняя страничка, блог или же интернет-магазин. В стандарте HTML 5, данный элемент выделили даже в отдельный тег <nav></nav>.

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

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

Как видно, структура очень проста и понятна. Для стандарта HTML 4 существует элемент — div, в котором и находится наше меню. Для HTML 5 — мы используем элемент nav. Приведем листинг HTML кода.

Структура для HTML 4

<div>
<ul>
 <li><a href="/index">Главная</a></li>
 <li><a href="/link1">Ссылка 1</a></li>
 <li><a href="/link2">Ссылка 2</a></li>
<ul>
</div>

Структура для HTML 5

<nav>
<ul>
 <li><a href="/index">Главная</a></li>
 <li><a href="/link1">Ссылка 1</a></li>
 <li><a href="/link2">Ссылка 2</a></li>
<ul>
</nav>

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

Зададим фиксированную высоту тегу <ul>, например 30 пикселей.

Для тега <li> зададим высоту строки такую же, как и высота самого <ul>, то есть 30 пикселей, это необходимо для того, что бы текст находился по середине.

Как только мы зададим свойство float у элемента <li>, то наше меню из вертикального превратится в горизонтальное, что нам и надо. Стоит заметить, что элементы с установленным свойством float автоматически становятся элементами уровня блока, потом этот блок смещает влево или вправо. Высота у тегов <li> должна быть такая же, как и у <ul>

Для тега <a> устанавливаем свойство display: block, это необходимо для того, что бы элемент занял всю область элемента <li> и вся эта область была «кликабельна».

Теперь можно создать иерархическое меню

<nav>
<ul>
 <li><a href="#">Главная</a></li>
 <li><a href="#">Страница 1</a></li>
 <li><a href="#">Страница 2</a></li>
 <li><a href="#">Страница 3</a></li>
 <li><a href="#">Страница 4</a></li>
 <li><a href="#">Страница 5</a>
   <ul>
    <li><a href="#">Страница 5-1</a></li>
    <li><a href="#">Страница 5-2</a></li>
    <li><a href="#">Страница 5-3</a></li>
   </ul>
 </li>
</ul>
</nav>

А теперь используя CSS стилизуем наше меню

ul. site-navigation {
height: 30px;
 /* Зададим фон для списка */
 background-color: #3DA4B7;
}
ul.site-navigation li {
 line-height: 30px;
 height: 30px;
 float:left;
 width:auto;
}
ul.site-navigation li a {
 display: block;
 color: #fff;
 text-decoration:none;
 padding: 0 10px;
 border-right: 1px solid #f4f4f4;
 /* Анимация для браузеров основаных на Webkit */
 -webkit-transition: background-color 0.15s linear;
}
/* Добавим анимацию при наведении */
 ul.site-navigation li a:hover {
 background-color: #57BCCC;
}
ul.site-navigation li ul {
 background-color: #3DA4B7;
 display:none;
}
ul.site-navigation li ul li {
 float: none;
}
ul.site-navigation li:hover ul {
 display:block;
}

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

Статья подготовлена с использованием материалов сайта http://woorkup. com

Выравнивание элементов во Flex контейнере — CSS

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

Для центрирования элемента по перекрёстной оси (в данном случае — вертикальной) используется свойство align-items. Для центрирования элемента по главной оси (в данном случае — горизонтально), используется свойство

justify-content.

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

В этом руководстве рассматриваются следующие свойства:

  • justify-content — управляет выравниванием элементов по главной оси.
  • align-items — управляет выравниванием элементов по перекрёстной оси.
  • align-self — управляет выравниванием конкретного flex элемента по перекрёстной оси.
  • align-content — описывается в спецификации как “упаковка flex строк”; управляет промежутками между flex строками по перекрёстной оси.

Также будет рассмотрены авто-отступы для выравнивания элементов во flexbox.

Примечание: Свойства выравнивания во Flexbox помещены в отдельную спецификацию — CSS Box Alignment Level 3. Ожидается, что данная спецификация в конце концов заменит свойства, определённые во Flexbox Level One.

Свойства align-items и align-self управляют выравниванием flex элементов по перекрёстной оси: вертикальной для flex-direction установленным в row, и горизонтальной для flex-direction установленным в column.

Рассмотрим выравнивание по перекрёстной оси на простейшем примере. Если установить display: flex у контейнера, все дочерние элементы становятся flex элементами, выстроенными в ряд. Все они по вертикали примут размер самого высокого элемента, который станет определяющим вертикального размера. Если у flex контейнера задана высота, то все элементы растянутся до высоты контейнера, независимо от размера содержимого.

Все элементы становятся одной высоты, т.к. по умолчанию свойство align-items имеет значение stretch.

Другие возможные значения свойства:

  • align-items: flex-start
  • align-items: flex-end
  • align-items: center
  • align-items: stretch
  • align-items: baseline

В примере ниже значение свойств align-items установлено в stretch. Попробуйте другие значения для понимания их действия.

Выравнивание одного элемента при помощи

align-self

Свойство align-items устанавливает align-self для всех flex элементов как для группы. Это означает, что можно явно указать значение align-self для конкретного элемента. Свойство align-self может принимать все те же значения, что и свойство align-items, а так же значение auto, которое сбросит значение, установленное в flex контейнере.

В следующем примере, у flex контейнера установлено align-items: flex-start, означающее, что все элементы будут выравнены по началу перекрёстной оси. У первого элемента с помощью first-child селектора установлено align-items: stretch; у следующего элемента с классом selected установлено align-self: center. Можно изменять значение align-items на контейнере или align-self на элементе для изучения их работы.8н

Изменение основной оси

До сего момента мы изучали поведение при flex-direction установленном в row, в языке, использующем написание сверху вниз. Это означает, что основная ось идёт горизонтально, а выравнивание по перекрёстной оси сдвигает элементы вверх или вниз.

Если изменить flex-direction на column, align-items и align-self будут сдвигать элементы влево или вправо.

Можно попробовать пример ниже, где установлено flex-direction: column.

До сих пор мы выравнивали элементы внутри flex-контейнера. Если содержимое вашего flex контейнера переносится на несколько строк, используйте свойство align-content для управления свободным пространством между строками. В спецификации это описано как упаковка flex-строк.

Чтобы свойство align-content работало, необходимо, чтобы в flex-контейнере было больше места, что требуется для отображения всего содержимого. Оно применяется ко всем элементам как группе, и управляет распределением свободного места и положением всей группы элементов внутри контейнера.

Свойство align-content принимает следующие значения:

  • align-content: flex-start
  • align-content: flex-end
  • align-content: center
  • align-content: space-between
  • align-content: space-around
  • align-content: stretch
  • align-content: space-evenly (не описано в спецификации Flexbox)

В примере ниже flex контейнер имеет высоту 400 пикселей — больше, чем необходимо для отображения всех элементов. Значение align-content установлено в space-between, означающее, что свободное пространство разделено между строками, расположенными вплотную к началу и концу контейнера по перекрёстной оси.

Попробуйте другие значения align-content для понимания принципа их работы.

Также можно сменить значение flex-direction

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

Примечание: значение space-evenly не определено в спецификации flexbox и добавлено позже в спецификацию Box Alignment. Поддержка браузерами этого значение не так широка, как значений определённым в спецификации flexbox.

В документации по justify-content на MDN приведено больше деталей о всех значениях и поддержке браузерами.

Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство — justify-content. Это обусловлено тем, что с элементами на главной оси мы работаем только как с группой. Используя свойство justify-content

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

В нашем первом примере с использованием свойства display: flex, применённым к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство justify-content имеет начальное значение flex-start. Все свободное место располагается в конце контейнера.

Свойство justify-content может принимать те же самые значения, что и align-content.

  • justify-content: flex-start
  • justify-content: flex-end
  • justify-content: center
  • justify-content: space-between
  • justify-content: space-around
  • justify-content: stretch
  • justify-content: space-evenly (не определено в спецификации Flexbox)

В примере ниже, свойству justify-content задано значение space-between. Все доступное пространство распределяется между элементами после их позиционирования в контейнере. Первый и последний элементы занимают положения в начале и в конце контейнера соответственно.

Если свойство flex-direction имеет значение column, то свойство justify-content распределит доступное пространство в контейнере между элементами.

Выравнивание и режим записи

Необходимо помнить, что при использовании свойств flex-start и flex-end элементы позиционируются в режиме записи. Если свойству justify-content задано значение start и стоит режим записи left-to-right (слева-направо), как в английском, то элементы выравниваются, начиная с левой стороны контейнера.

Однако, если задан режим записи right-to-left (справа-налево), как в арабском языке, то элементы будут выстраиваться с правой стороны контейнера.

В примере ниже свойству property задано значение rtl, которое изменяет порядок наших элементов. Вы можете удалить это свойство или изменить значение свойства justify-content, чтобы увидеть, как работает flexbox, когда отображение элементов начинается справа.

Начальное положение элементов поменяется, если вы измените значение свойства flex-direction — например установите row-reverse вместо row.

В следующем примере заданы следующие свойства: flex-direction: row-reverse и justify-content: flex-end. В языках с параметром записи ltr все элементы будут отображаться с левой стороны. Попробуйте изменить свойство flex-direction: row-reverse на flex-direction: row. Вы увидите, что теперь элементы отображаются реверсивно.

Может показаться немного запутанным, но главное правило, которое необходимо запомнить – до тех пор, пока вы не измените свойство flex-direction, элементы контейнера выстраиваются в режиме записи вашего языка (ltr или rtl).

Вы можете сделать отображение элементов контейнера блочным, задав свойству flex-direction значение column. Свойство flex-start будет отображать элементы в столбец сверху вниз. Таким образом, первый элемент будет первым параграфом.

Если вы зададите свойству flex-direction реверсивное значение, то элементы будут позиционироваться в обратном порядке. Так, свойство flex-start будет брать начало в конце контейнера. Первый элемент будет находится в конце строки, если задано строчное отображение элементов или в конце параграфа, если задано блочное отображение.

Так как элементы, расположенные на главной оси, обрабатываются как группа, свойства justify-items или justify-self становятся недоступными. Тем не менее, существует способ отделить конкретный элемент или группу элементов от остальных, используя внешний отступ margin со значением auto.

Распространённый пример — панель навигации, в которой отдельные важные элементы выровнены по правому краю, а основная группа элементов — по левому.

На первый взгляд может показаться, что этот пример использования свойства justify-self. Однако, рассмотрим следующий ниже пример. Имеется три элемента с одной стороны и два — с другой. Если бы мы могли использовать justify-self на элементе d, это также изменило бы выравнивание следующего элемента — e, что может противоречить первоначальному замыслу.

Вместо этого мы можем выбрать четвёртый элемент (d) и отделить его от первых трёх, задав ему значение auto для margin-left. Авто-margin заполнит всё доступное свободное место по своей оси. Тем же образом работает margin-right. Оба свойства со значениями auto отцентрируют блок, так как каждый из отступов будет пытаться занять максимум пространства.

В интерактивном примере ниже у нас имеется простой ряд из флекс-элементов и класс push с заданным margin-left: auto. Вы можете, например, попробовать удалить это значение или добавить класс другому элементу, чтобы увидеть, как работает этот метод.

В начале этой статьи объясняется, что свойства выравнивания, которые в настоящее время содержатся в спецификации Flexbox Level 1, также включены в спецификацию Box Alignment Level 3, которая в дальнейшем может расширить эти свойства и значения. Мы уже видели, как это произошло с введением значения space-evenly для свойств align-content и justify-content.

Выравнивание во Flexbox также включает в себя другие методы создания пространства между элементами, такие как column-gap and row-gap, как показано в макете CSS Grid Layout. Включение этих свойств в Box Alignment означает, что в будущем мы также сможем использовать column-gap и row-gap во Flexbox разметке. Это означает, что вам не нужно будет использовать отступы, чтобы создать пространство между элементами.

Моё предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье Box Alignment in Grid Layout, а также рассмотреть как выравнивание работает в этих спецификациях в статье Box Alignment Cheatsheet.

Смотрите Также

  • Выравнивание Коробки
  • Выравнивание Коробки в Flexbox (Гибкая Коробка)
  • Выравнивание Коробки в Grid Layout (Макет Сетки)

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.
Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

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

Узнайте, как создать горизонтальное адаптивное меню в HTML с использованием CSS flexbox и HTML-элементов неупорядоченного списка (ul) и элемента списка (li).

👩‍💻 Технический вопрос

Спросил 1 месяц назад в HTML by Super

 

меню горизонтальное адаптивное html

HTML CSS меню горизонтальный отзывчивый

Дополнительные вопросы по кодированию в HTML

👩‍💻 Технический вопрос

Спросил 13 дней назад в HTML Надин

 

Как сделать так, чтобы

заполнил всю ширину страницы>

HTML CSS див ширина стр.

👩‍💻 Технический вопрос

Спросил 21 день назад в HTML от Jazmare

 

Как добавить значки в свой HTML

HTML икона Шрифт потрясающий материальные иконки КСС

👩‍💻 Технический вопрос

Спросил 21 день назад в HTML Ким

 

Как округлить изображение.

изображение круглый Контекст объяснить вопрос

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 22 дня назад в HTML от Хейзел

 

Логотип заголовка и панель навигации должны быть на одной линии

заголовок навигация флексбокс КСС

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 22 дня назад в HTML by Sofia

 

При отправке формы предупреждайте о значении ввода пароля

HTML форма вход представлять на рассмотрение оповещение

👩‍💻 Технический вопрос

Спросил 22 дня назад в HTML Сара

 

Что такое каркас?

каркас макет компоненты дизайн

👩‍💻 Технический вопрос

Спросил 22 дня назад в HTML по аниме

 

как я могу центрировать div

HTML CSS центр див поля

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 23 дня назад в HTML by Sofiia

 

Если пользователь не вводит свое имя, Оповещение «То, что тебе плохо»

HTML JavaScript тревога проверка формы

👩‍💻 Технический вопрос

Спросил 23 дня назад в HTML Эндрю

 

Как подключить мой SiteController к моим html-файлам

на стороне сервера PHP включать СайтКонтроллер

👩‍💻 Технический вопрос

Спросил 23 дня назад в HTML by Elicea

 

Почему не работает ни кнопка, ни текстовая форма?

кнопка текстовая форма ошибка синтаксиса библиотека зависимость поведение кода

👩‍💻 Технический вопрос

Спросил 23 дня назад в HTML by Luyanda

 

как добавить эмодзи на веб-сайт с помощью языка html и CSS?

HTML CSS смайлики Юникод стиль

👩‍💻 Технический вопрос

Спросил 23 дня назад в HTML by Katusiime

 

как добавить символ градуса

HTML символ градуса сущность Сочетание клавиш Windows ПК Мак

👩‍💻 Технический вопрос

Спросил 24 дня назад в HTML Лаура

 

как закодировать форму поиска с кнопкой отправки рядом с одним столбцом?

HTML CSS форма поиска кнопка отправки столбец

👩‍💻 Технический вопрос

Спросил 24 дня назад в HTML by Laura

 

как закодировать форму поиска с кнопкой отправки рядом с ней в строке и в одном столбце?

HTML CSS форма поиска кнопка отправки флексбокс

👩‍💻 Технический вопрос

Спросил 24 дня назад в HTML by Laura

 

как закодировать кнопку рядом с формой поиска?

HTML CSS кнопка форма поиска

👩‍💻 Технический вопрос

Спросил 24 дня назад в HTML от Ambar

 

вы можете добавить css

CSS стиль HTML-документ <стиль> <ссылка>

👩‍💻 Технический вопрос

Спросил 24 дня назад в HTML by Charisma

 

напишите код jsp для сохраненного значения в динамическом раскрывающемся списке.

джсп падать динамичный массивСписок значения

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 24 дня назад в HTML by Charisma

 

напишите код jsp для сохраненного значения в раскрывающемся списке

джсп падать ценности динамичный база данных

👩‍💻 Технический вопрос

Спросил 24 дня назад в HTML от Mehregan

 

что делает div в html?

HTML див контейнер группировка макет

👩‍💻 Технический вопрос

Спросил 24 дня назад в HTML Эмили

 

как добавить кодер, женский смайлик в html

HTML эмодзи код символа Юникод

👩‍💻 Технический вопрос

Спросил 24 дня назад в HTML by Ghazale

 

как настроить тег img с помощью тега span

HTML CSS img-тег тег span стиль

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 24 дня назад в HTML по Тск

 

создать форму входа

HTML CSS JavaScript форма входа

👩‍💻 Технический вопрос

Спросил 24 дня назад в HTML от Guguelethu

 

Я пытаюсь скопировать шрифт из Google в песочницу, но песочница не дает мне возможности вставки

HTML шрифты Гугл шрифты Песочница загрузить

👩‍💻 Технический вопрос

Спросил 24 дня назад в HTML Виктория

 

как сделать кнопку в html

HTML кнопка элемент атрибуты форма

👩‍💻 Технический вопрос

Спросил 24 дня назад в HTML от Folasayo

 

как изменить размер изображения в html?

HTML изображение изменить размер ширина высота

👩‍💻 Технический вопрос

Спросил 25 дней назад в HTML Эми

 

Как я могу изменить размер значка погоды в формате png, предоставленного в html-адресе

HTML CSS изображение размер стиль

👩‍💻 Технический вопрос

Спросил 25 дней назад в HTML by Francesca

 

Как установить атрибут ID в html-файле?

HTML Идентификационный атрибут уникальное имя

👩‍💻 Технический вопрос

Спросил 25 дней назад в HTML Рикке В.

 

что такое заголовок

заголовок метаданные HTML-элементы <голова> <мета>

👩‍💻 Технический вопрос

Спросил 25 дней назад в HTML Елена

 

нижний колонтитул

нижний колонтитул нижняя часть Веб-разработка HTML

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 25 дней назад в HTML от Jess

 

помогите мне сделать плавные переходы при нажатии на якорную ссылку на странице

HTML якорная ссылка плавная прокрутка анимация смягчение

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 25 дней назад в HTML by Jess

 

заголовок изменяется при прокрутке вниз

HTML CSS заголовок прокрутить JavaScript

👩‍💻 Технический вопрос

Спросил 26 дней назад в HTML Розимари

 

как использовать элемент span

HTML пролетный элемент встроенный контейнер CSS стиль текста

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 26 дней назад в HTML by Patricia Danielle

 

эффект наведения для изображения

HTML CSS JavaScript эффект наведения изображение

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 26 дней назад в HTML Джейкоб

 

Сделай мне код для рулетки

HTML CSS JavaScript колесо рулетки анимация

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 26 дней назад в HTML Джейкоб

 

Как сделать панель поиска с помощью html, css, json и javascript

HTML CSS JSON JavaScript панель поиска

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 26 дней назад в HTML by Jacob

 

Напишите мне код для кнопки «Мне нравится», которая переключается между «нравится» и «не нравится» при нажатии. Я хочу, чтобы он отображал количество лайков рядом с кнопкой «Мне нравится». Я хочу, чтобы он использовал html, json и javascript.

HTML JSON JavaScript кнопка лайк переключить

👩‍💻 Технический вопрос

Спросил 26 дней назад в HTML Амрита

 

как подчеркнуть заголовок

HTML подчеркнуть заголовок теги

👩‍💻 Технический вопрос

Спросил 26 дней назад в HTML by Emer

 

как перемещать контент в разные столбцы по горизонтали в html

HTML CSS столбцы макет дизайн

👩‍💻 Технический вопрос

Спросил 26 дней назад в HTML Эмер

 

как подключить html файл к js?

HTML JavaScript тег скрипта подключение

👩‍💻 Технический вопрос

Спросил 26 дней назад в HTML от Emer

 

как подключить html-страницу к css-странице?

HTML CSS тег ссылки головная секция стиль. css

👩‍💻 Технический вопрос

Спросил 26 дней назад в HTML от Katusiime

 

как добавить кнопку в мой код

HTML CSS кнопка стиль

👩‍💻 Технический вопрос

Спросил 26 дней назад в HTML by Victoria

 

Как сделать h2 на двух строках (разрыв строки) двумя разными цветами?

HTML CSS h2 Разрыв строки цвет

👩‍💻 Технический вопрос

Спросил 26 дней назад в HTML Елена

 

как кодировать эмодзи

HTML эмодзи Юникод коды символов

👩‍💻 Технический вопрос

Спросил 26 дней назад в HTML by Alona

 

как создать структуру HTML

HTML теги состав веб-страница

👩‍💻 Технический вопрос

Спросил 27 дней назад в HTML Эмер

 

что означает

?

УС яснофикс контейнер высота поплавок

👩‍💻 Технический вопрос

Спросил 27 дней назад в HTML по Emer

 

как поместить содержимое в столбцы в html?

HTML CSS столбцы отображать гибкий

👩‍💻 Технический вопрос

Спросил 27 дней назад в HTML Вера

 

как я могу добавить ссылку на изображение в свой код?

HTML тег изображения атрибут источника альтернативный атрибут доступность

👩‍💻 Инструкции по коду HTML, CSS и JavaScript

Спросил 27 дней назад в HTML Вера

 

я хочу добавить изображение в свой проект

HTML тег изображения CSS стиль

👩‍💻 Технический вопрос

Спросил 27 дней назад в HTML Рикке В.

 

кнопка отображения

HTML CSS кнопка стиль внешний вид

👩‍💻 Технический вопрос

Спросил 27 дней назад в HTML от Mehregan

 

как я могу загрузить картинку на sandcodbox?

HTML КодПесочница загрузка изображения тег img

Просмотрите вопросы по кодированию по темам: HTML CSS JavaScript Код ВС Питон Реагировать Начальная загрузка Попутный ветер Джава PHP Node.js Рубин Идти .NET

Как создать горизонтальное меню CSS с выравниванием по центру в Dreamweaver?

Мы получили ряд запросов от пользователей Dreamweaver о создании меню, и мы здесь, чтобы помочь! В этом посте «Ответы на ваши вопросы» мы рассмотрим основы создания меню в Dreamweaver. В следующих постах мы углубимся в изучение того, как создавать выпадающие меню и адаптивные меню, а пока давайте начнем с прочной основы, на которой можно строить.

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

Приступаем к кодированию!

Создайте новую страницу в Dreamweaver

  1. Выберите «Файл» > «Создать»
  2. Выберите вариант по умолчанию (HTML) и нажмите «Создать».
  3. Выберите «Файл» > «Сохранить как» и сохраните файл как menu.html

Создайте неупорядоченный список в теле страницы HTML

Ваш код должен выглядеть примерно так:

__

__

  • Дом

__

  • О

__

  • Карьера

__

  • Связаться с нами

В зависимости от того, в каком представлении вы находитесь, вы должны увидеть неупорядоченный список в представлении «Дизайн» или интерактивном представлении. Обратите внимание, что каждый элемент в списке связан с тегом . Вы указываете место назначения для каждого элемента в теге . Например, когда вы нажимаете «Главная», браузер открывает страницу home.html.

Мы еще не создали целевые страницы. Так что переход по ссылкам сейчас никуда вас не приведет.

https://blog.adobe.com/media_e72c9422ea597e6f86793cfbbccb1ec9a1153ac3.gif

Удалить маркеры из списка

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

Сразу под тегом «создайте теги стиля:

Вставьте этот фрагмент кода CSS между тегами стиля.

ул {

тип-стиля-списка: нет;

поле: 0;

заполнение: 0;

}

list-style-type:none : удаляет маркеры из упорядоченного списка.

Установка полей и отступов на 0 переопределяет любые настройки браузера по умолчанию.

Укажите ширину для каждого элемента списка

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

Ниже приведен код CSS для тега ul. Вставьте этот фрагмент кода:

a {
дисплей: блок;
ширина: 60 ​​пикселей;
}

display:block : Это делает кликабельной всю область вокруг ссылки, а не только текст.

Указав ширину 60 пикселей, мы переопределяем любые настройки ширины браузера по умолчанию.
Вы не заметите каких-либо существенных изменений в представлении «Дизайн», за исключением рамки вокруг каждого элемента в списке.

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

Для этого используйте:

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

Хорошо, теперь разрывы строк исчезли. Вы ничего не увидите в представлении «Дизайн», но это нормально. По умолчанию каждый из элементов занимает всю ширину браузера. Когда мы перемещаем их влево, мы приказываем каждому из этих элементов двигаться влево и освобождать место для следующего элемента в списке, который перемещается вверх и занимает пустое место справа.

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

Теперь пункты меню должны располагаться рядом друг с другом. Идеальный.

https://blog.adobe.com/media_28cbc0ad19479bf3a61e33d0f752644cf0171cc6.gif

Меню теперь на месте, но оно не имеет цвета, и вы не видите, что что-то происходит при перемещении по каждому из пунктов меню. Давайте исправим это!

Определение стиля для обычного и посещенного состояний

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

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

«Тег или тег, связанный со ссылками, имеет четыре состояния:

a:link – обычная, непосещенная ссылка
a:visited – ссылка, которую посетил пользователь
a:hover – ссылка, когда пользователь наводит на нее курсор
a:active – ссылка в момент нажатия

Удалить этот фрагмент кода:

a {
дисплей: блок;
ширина: 60 ​​пикселей;
}

Теперь введите этот код между вашими тегами стиля:

a:ссылка, a:посетили {
display: block;
ширина: 120 пикселей;
вес шрифта: полужирный;
цвет: #FFFFFF;
цвет фона: #98bf21;
выравнивание текста: по центру;
отступ: 4 пикселя;
украшение текста: нет;
преобразование текста: верхний регистр;
}

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

https://blog.adobe.com/media_6ad91ca791e879d935e42ecc1b13076885712106.gif

Определение стиля для наведения и активных состояний

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

Изменение цвета фона позволяет пользователю узнать элемент меню, на который нажимают.

a: hover, a: active {
background-color: #7A991A;
}

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

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

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