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

Leave a Comment / Html / By /

Содержание

Как сделать меню навигации в 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, думаю вам было интересно и полезно, в одной из следующих статей, будет показываться как сделать выпадающее меню.

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

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

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


Узнайте, как создать «фиксированное» меню с помощью CSS.

Как создать фиксированное верхнее меню

Шаг 1) добавить HTML:

Пример


  Home
  News
  Contact

<div>
  <p>Some text some text some text some text..</p>
</div>

Шаг 2) добавить CSS:

Чтобы создать фиксированное верхнее меню, используйте position:fixed и top:0. Обратите внимание, что фиксированное меню будет накладывать другое содержимое. Чтобы исправить это, добавьте margin-top (к содержимому), которое равно или больше, чем высота вашего меню.

Пример

/* The navigation bar */
.navbar {
    overflow: hidden;
    background-color: #333;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
   
width: 100%; /* Full width */
}

/* Links inside the navbar */
.navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change background on mouse-over */
. navbar a:hover {
    background: #ddd;
    color: black;
}

/* Main content */
.main {
    margin-top: 30px; /* Add a top margin to avoid content overlay */
}

Как создать фиксированное нижнее меню

Чтобы создать фиксированное нижнее меню, используйте position:fixed и bottom:0:

Пример

/* The navigation bar */
.navbar {
    position: fixed; /* Set the navbar to fixed position */
    bottom: 0; /* Position the navbar at the bottom of the page */
    width: 100%; /* Full width */
}

/* Main content */
.main {
    margin-bottom: 30px; /* Add a bottom margin to avoid content overlay */

}

Совет: Чтобы узнать больше о навигационных панелях, перейдите в наш Учебник CSS Navigation.


меню и кнопки меню — Веб-стандарты

Классифицировать сложно. Например, возьмём крабов. Раки-отшельники, веерные крабы и подковообразные крабы, с точки зрения таксономии, не настоящие крабы, но это не мешает использовать в их названиях слово «краб». Всё становится ещё запутаннее, когда через какое-то время благодаря процессу, называемому канцеризацией, ненастоящие крабы эволюционируют, чтобы больше походить на настоящих. Это то, что произошло с королевскими крабами, которые в прошлом были раками-отшельниками. Представьте размеры их раковин!

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

Классический пример — термин «выпадающий список» (dropdown). В интерфейсах многие вещи «выпадают», включая <option> в <select>, и подменю навигации со списком ссылок, которое раскрывается с помощью JavaScript. Одинаковые названия — разные явления. Некоторые называют это «выпадающее меню» (pull-down menu), но давайте не вдаваться в подробности.

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

Давайте начнём с вопроса: является ли блок ссылок с картинки, выпадающий вниз из панели навигации, меню?

Правильный ответ: нет, это не настоящее меню.

То, что навигационная схема состоит из списков или ссылок — давнее соглашение. Оно почти так же давно предписывает, что дополнительная навигация (sub-navigation) должна быть вложенными списками со ссылками. Если бы я удалил стили для компонента, показанного выше, я бы увидел что-то вроде этого списка ссылок, только с Times New Roman и синего цвета.

• [Главная](#)
• [О нас](#)
• [Магазин](#)
    ◦ [Одежда для собак](#)
    ◦ [Вафельницы](#)
    ◦ [Магические шары](#)
• [Контакты](#)

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

В этом месте часто ошибаются и начинают добавлять семантику из WAI-ARIA: aria-haspopup="true", role="menu", role="menuitem" и так далее. Их можно использовать, но в другом контексте. Вот две причины для этого:

  1. ARIA-меню предназначены не для навигации, а для десктопных приложений. Представьте себе систему меню для любого из них.
  2. Ссылка верхнего уровня должна быть ссылкой. То есть она не ведёт себя как кнопка меню.

Относительно второго пункта: при перемещении по области навигации в подменю ожидаешь, что каждое подменю будет появляться при наведении или при фокусе на ссылке верхнего уровня (например, «Магазин» из примера выше). Это одновременно показывает подменю и размещает ссылки в нём в порядке получения фокуса.

С помощью JavaScript можно управлять событиями фокуса (focus) и его потери (blur) и сохранить внешний вид подменю пока это необходимо. При этом те, кто использует для навигации клавиатуру, должны иметь возможность переходить по очереди от одной ссылки каждого уровня к другой.

Кнопки меню, которым задан атрибут aria-haspopup="true", так себя не ведут. Они становятся активными по клику и у них нет другой цели кроме показа скрытого меню.

Как показано на картинке, вне зависимости от того раскрывается меню или скрывается, это будет объявлено благодаря атрибуту aria-expanded. Вам нужно только изменить это состояние при клике, а не при фокусе. Пользователи обычно не ожидают явного изменения состояния при простом событии фокуса. На самом деле в нашей системе навигации состояние не изменяется. Это просто трюк со стилизацией. С точки зрения поведения мы можем перемещаться с помощью клавиши Tab так, как если бы не было никакого трюка с показом и скрытием элемента.

Проблема с навигационными подменюСкопировать ссылку

Навигационные подменю (или для кого-то «выпадающие списки») отлично работают с мышью или с клавиатуры, но не так хороши для касаний. Когда вы в первый раз нажимаете на ссылку верхнего уровня «Магазин» из примера, то сообщаете, что надо открыть подменю и перейти по ссылке.

Здесь есть два возможных варианта решения проблемы:

  1. Избежать поведения по умолчанию ссылок верхнего уровня (e.preventDefault()) и написать скрипт для полной поддержки семантики и поведения меню WAI-ARIA.
  2. Убедиться, что каждая страница, на которую ведёт ссылка верхнего уровня меню, имеет оглавление в качестве альтернативы подменю.

Первое решение не самое хорошее. Я ранее замечал, что этот тип семантики и поведения нежелателен в данном контексте, где ссылки — это управляемые контролы (subject controls). Кроме того пользователи больше не смогут переходить на страницу верхнего уровня, если она есть.

Какие устройства — сенсорные?Скопировать ссылку

Заманчиво думать: «Это не самое хорошее решение, но я применю его только для сенсорных интерфейсов». Проблема в том, как определить, есть ли у устройства сенсорный экран?

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

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

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

Похоже, получившая премию команда Government Digital Services с этим согласится. Вы также могли видеть такие оглавления в Wikipedia.

ОглавлениеСкопировать ссылку

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

<nav aria-labelledby="sections-heading">
    <h3>Продукты</h3>
    <ul>
        <li><a href="/products/dog-costumes">Одежда для собак</a></li>
        <li><a href="/products/waffle-irons">Вафельницы</a></li>
        <li><a href="/products/magical-orbs">Магические шары</a></li>
    </ul>
</nav>
<!-- Здесь все разделы по порядку -->

ПримечанияСкопировать ссылку

  • В этом примере мы представляем каждый раздел как отдельную страницу, как если бы это было в выпадающем подменю.
  • Важно, чтобы каждая страница из «Магазин» имела одинаковую структуру. Поэтому оглавление «Продукты» находится в одном и том же месте. Консистентность улучшает понимание.
  • Список группирует элементы, а вспомогательные технологии могут установить их количество и объявить о них, например, с помощью синтезированного голоса в скринридерах.
  • Тегу <nav> заголовок задан с помощью атрибута aria-labelledby. Это означает, что большинство скринридеров объявит «Продукты, навигация» при попадании в область с помощью клавиши Tab. Также это приведёт к тому, что такая навигация будет разбита скринридерами на отдельные элементы, через которые пользователи смогут переходить к областям страницы напрямую.

Всё на одной страницеСкопировать ссылку

Если вы можете поместить все разделы на одной странице, при этом не сделав её слишком длинной и избежав утомительной прокрутки, то так даже лучше. Просто задайте для каждого раздела якорную ссылку. Например, href="#waffle-irons" должна вести к id="waffle-irons".

<nav aria-labelledby="sections-heading">
    <h3>Продукты</h3>
    <ul>
        <li><a href="#dog-costumes">Одежда для собак</a></li>
        <li><a href="#waffle-irons">Вафельницы</a></li>
        <li><a href="#magical-orbs">Магические шары</a></li>
    </ul>
</nav>
<!-- Здесь раздел с одеждой для собак -->
<section tabindex="-1">
    <h3>Вафельницы</h3>
</section>
<!-- Здесь раздел с магическими шарами -->

Примечание: в некоторых браузерах фокус плохо переносится на отдельные фрагменты страницы.

Добавление tabindex="-1" к нужному фрагменту исправляет это.

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

На некоторых сайтах, включая правительственный цифровой сервис gov.uk, есть страницы с указателями (или «темами»), которые представляют собой просто оглавления. Это настолько мощная концепция, что популярный генератор статических сайтов Hugo создаёт такие страницы по умолчанию.

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

Кнопки навигационного менюСкопировать ссылку

Пока мы обсуждаем тему фальшивых навигационных меню, было бы упущением с моей стороны не поговорить про кнопки меню. Вы наверняка видели состоящую из трёх линий иконку-гамбургер или «navicon».

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

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

  1. Быть кнопкой, а не ссылкой.
  2. Содержать информацию о развёрнутом или свёрнутом состоянии соответствующего меню (которое, строго говоря, представляет собой просто список ссылок).

Прогрессивное улучшениеСкопировать ссылку

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

В изначальном HTML-файле мало что можно сделать с помощью кнопок (кроме кнопок для отправки данных, но они даже близко не связаны с тем, что нам нужно сделать). Может быть, вместо этого, нам следует начать с простой ссылки, которая приведёт нас к навигации?

<a href="#navigation">Навигация</a>
<!-- Тут может быть какой-то контент -->
<nav>
    <ul>
        <li><a href="/">Главная</a></li>
        <li><a href="/about">О нас</a></li>
        <li><a href="/shop">Магазин</a></li>
        <li><a href="/content">Контент</a></li>
    </ul>
</nav>

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

<nav>
    <ul>
        <li><a href="/">Главная</a></li>
        <li><a href="/about">О нас</a></li>
        <li><a href="/shop">Магазин</a></li>
        <li><a href="/content">Контент</a></li>
    </ul>
</nav>

Вы улучшит

Создание меню на чистом CSS

Как сделать меню для сайта на чистом CSS?

Доброго времени суток, друзья. Частой задачей при разработки сайта или приложения является создание меню с целью лучшей навигации. Есть несколько путей решения этой задачи: либо с помощью CSS, либо с использованием JS. В данной статье я хочу показать вам путь решения этой задачи по средствам только одного CSS. Приступим.

Видео по теме:

Создание HTML макета

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



		<nav>
            <div>
                <label for="menuToggle">Меню</label>
                <input type="checkbox">
            
            <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="#">О нас</a></li>
            </ul>
           </div>
        </nav>
        <section>
            <div>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis 
				 autem consequatur eum facere neque. Tenetur laboriosam 
				 repellendus neque fuga, velit, totam, est, aspernatur 
				 sunt sapiente earum quo beatae. Fuga, officia.
             </div>
         </section>

Добавление основных CSS стилей

html{
    height: 100%;
    font-size: 18px;
}

. menu{
    list-style-type: none;
    margin: 0; 
    padding: 0;
}
nav{
    background: #4c3167;
}
.menu li{
    float: left;
}
.menu li a {
    display: inline-block;
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
}

section{
    padding-top: 10px;
}

.wrapper{
    max-width: 1024px;
    padding: 0 30px;
    margin: 0 auto;
}
.b-content{
    height: 100%;
    background: #c1aaff;
    color: #000;
}
.menuToggle{
    padding: 10px 15px;
    cursor: pointer;
    color: #fff;
    display: none;
}
body{
    height: 100%;
}

nav input{
    display: none;
}
nav label{
    padding: 10px 15px;
    color: #fff;
    display: none;
}

Добавление стилей для мобильной версии

@media ( max-width: 670px) {
    nav label{
        display: block;
    }

    #menuToggle:checked + .menu{
        display: block;
        position: absolute;
        background: #4c3167;
        width: 100%;
        margin-left: -30px;
        padding-left: 28px;
    }
    .menu li{
        float: none;
    }
    .menu{
        display: none;
    }
}

Это все что нужно для для создания меню на чистом CSS. Давайте поподробнее рассмотрим как это все работает. У нас есть обычный список в котором мы храним меню. Мы добавляем checkbox с помощью которого мы будем хранить состояния и тег <label> который будет у нас в роли кнопки меню на мобильных устройствах.



        <label for="menuToggle">Меню</label>
        <input type="checkbox">

Скрываем сам checkbox и оставляем смену состояния только тегу <label>.

Теперь добавляем стили которые будут показывать блок меню если мы кликае по тегу <label> и скрывать его по второму клику.


	#menuToggle:checked + .menu{
        display: block;
        position: absolute;
        background: #4c3167;
        width: 100%;
        margin-left: -30px;
        padding-left: 28px;
    }

 

Данная статья подошла к концу. Тут я оставил для вас исходник на GitHub. Сегодня мы рассмотрели пример того как на нативном CSS  c использование checkbox можно создать полноценно адаптивное меню для мобильных устройств. C вами был Corvax. Да новых встреч!

Подписывайтесь на наш канал в Telegram и на YouTube для получения самой последней и актуальной информации.

Плавно открывающееся меню с помощью CSS

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





Первым делом, давайте напишем HTML код нашего меню. Меню будет простейшим. Для примера у него будет 2 пункта у каждого из которых будет выпадающий список с подпунктами.


<nav>
	<ul>
		<li>
		<a href="#">пункт 1</a>
			<ul>
				<li><a href="#">Выпадающий пункт 1</a></li>
				<li><a href="#">Выпадающий пункт 2</a></li>
				<li><a href="#">Выпадающий пункт 3</a></li>
			</ul>
		</li>
		<li>
		<a href="#">пункт 2</a>
			<ul>
				<li><a href="#">Выпадающий пункт 1</a></li>
				<li><a href="#">Выпадающий пункт 2</a></li>
				<li><a href="#">Выпадающий пункт 3</a></li>
			</ul>
		</li>

	</ul>
</nav>

Думаю тут все понятно, самое простое 2-х уровневое меню. Как и говорил, меню имеет два главных пункта, можете добавить сколько угодно, если нужно. Дальше нужно просто добавить стили, которые и сделают всю магию 🙂


#slow_nav > ul{
	width: 500px;
	margin:25px auto 0;
}

#slow_nav > ul > li{
	list-style: none;
	display: inline-block;
	position:relative;
	padding:0;
}

#slow_nav a{text-decoration:none;}

#slow_nav > ul > li > a{
	font-size:18px;
	padding:5px;
	background-color:#333;
	color:#fff;
}

#slow_nav li ul{
	position:absolute;
	list-style:none;
	text-align:center;
	top:15px;
	font-size:15px;
	left:0;
	margin:0;
	padding:0;

/* Данные строки нужны для правильной работы анимации */
	max-height:0px;
	overflow:hidden;
	-webkit-transition:max-height 0.4s linear;
	-moz-transition:max-height 0.4s linear;
	transition:max-height 0.4s linear;
/* конец */
}

#slow_nav li:hover ul{
	max-height:300px;
}

#slow_nav li ul li{
	background-color:#333;
	border-bottom:1px solid #888;
}

#slow_nav li ul li:last-child{
	border-bottom:none;
}

#slow_nav li ul li a{
	padding:5px 12px;
	color:#fff;
	display:block;
}

#slow_nav li ul li:hover{
	background-color:#444;
}

#slow_nav li ul li:first-child{
	margin-top:25px;
	position:relative;
}

#slow_nav li ul li:first-child:before{
	content:'';
	position:absolute;
	width:1px;
	height:1px;
	border:5px solid transparent;
	border-bottom-color:#333;
	left:10px;
	top:-10px;
}

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

Первым делом это сама анимация. Нужный код выделен комментариев в коде — /* Данные строки нужны для правильной работы анимации */. Удалять из нельзя, в противном случаи анимация перестанет работать. В данном отрезке кода, изначально мы задаем высоту в ноль пикселей —

max-height:0px; и прописываем свойство overflow:hidden;, чтобы скрыть наше дочернее меню, то есть выпадающее. Дальше уже прописываем кроссбраузерное свойство transition, которое совершит анимацию.


-webkit-transition:max-height 0.4s linear;
-moz-transition:max-height 0.4s linear;
transition:max-height 0.4s linear;

Тут можете изменить разве что время анимации. В данный момент время задано 0.4 секунды. Сразу после того как задали анимацию, добавлено свойство , для задания новой высоты при наведении на главные пункты меню:


#slow_nav li:hover ul{
	max-height:300px;
}

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

Далее уже задаем стили для выпадающего меню, так что на них подробно останавливаться не буду. Ту как бы и все. Это и есть весь способ. Он простой и действенный и справляется со своей задачей на все 100%.

Данный способ можно применять не только к самописным меню но и к тем же динамическим меню, которые создаются системами управления сайтом, например WordPress. Для этого нужно немного подправить стили и все. То есть первый HTML код использовать не нужно, только стили. В стилях нужно заменить имя айди #slow_nav на то что будет у Вас, ну и возможно подправить еще что-то по мелочам. Подробно останавливаться не буду. Для каждого случая нужен персональный подход, так что уж извините 🙂 Я дал идею и способ, а Вам решать, применять его или нет.

На этом все, спасибо за внимание. 🙂

Создание нескольких страниц с меню навигации

Введение

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

HTML5 определяет меню

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

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