Товаров: 0 (0р.)

Html как сделать меню для сайта: Горизонтальное меню для сайта

Содержание

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



Это сайт, который близок к тому, что я хочу, но должен двигаться в сторону, http://www.culturalsolutions.co.uk/ . Я даже не знаю, что искать в интернете о таком сайте, как этот. Но я хочу сделать сайт с меню всегда сверху, как это, и чтобы контент шел боковыми путями. Кроме того, можно ли встроить блог в область тела, чтобы все это было на одной странице? Я просто не хочу, чтобы пользователи переходили с одной страницы на другую, мне нравятся эти flash переходы сайта, но они не ipad дружелюбны :<

html
Поделиться Источник Andy Y     11 июля 2011 в 09:35

3 ответа

  • Сделайте так, чтобы меню оставалось сверху, но не при прокрутке вниз для боковой прокрутки веб-сайта

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

  • Динамическое базовое меню: php или jQuery?

    Я переделываю свой сайт портфолио и не знаю, в какую сторону идти; jQuery или PHP? комбинация? Моя цель — позволить себе поместить любой файл html/php в папку с меткой projects. Затем попросите меню / главную навигацию создать ссылки, соответствующие заголовку файла в заголовке или что-то в этом…

Поделиться Việt Đinh     05 октября 2012 в 04:11


0

Создайте div с css position:fixed;top:30px;z-index:1000; , чтобы он всегда оставался сверху

Здесь Z-индекс вам нужно выбрать максимальное значение

Поделиться Sandeep Manne     11 июля 2011 в 09:40


0

Вы можете использовать CSS для стилизации нужного контейнера в качестве фиксированного элемента.

#navigation {
position: fixed;
left: 0;
top: 0;
}

И удалите вертикальную прокрутку с помощью:

body {
overflow-y: hidden;
}

Ваше содержимое в теле может иметь div с

float: left , чтобы поместить поток горизонтально.

UPDATE: С другой стороны, возможно, было бы лучше пропустить overflow-y: hidden и просто использовать float: left . И вам нужно поставить ширину на div, содержащий ваш контент. Смотрите этот учебник

Поделиться Andreas     11 июля 2011 в 09:55

  • Как создать отзывчивое меню гамбургеров в AMP HTML

    Я пытаюсь создать веб-сайт AMP HTML (см. https:/ / www.ampproject.org ) Но я нигде не могу найти, как вы должны создавать отзывчивое меню гамбургеров ? Javascript не разрешен, и для него нет доступных компонентов усилителя ?

  • Структура ссылок в верхнем меню с сайтов amp

    привет и привет из Германии. я создал сторону усилителя для своего домена https: / / www.fruchthof24.de . Ссылка на мой сайт ампер https://www.fruchthof24.de/amp/ и еще один сайт, с А-сайта. в этом amp-сайтах у меня есть меню сверху, правильно ли ссылаться на amp-сайты или на оригинальные сайты?

Похожие вопросы:


Как заставить меню навигационной панели отображаться сбоку поверх существующей страницы?

По умолчанию Bootstrap позволяет скрыть / показать меню навигационной панели сверху. Я хотел бы реализовать его таким образом, чтобы он открывался сбоку. Я взглянул на sidr и многие другие примеры…


Как создать сайт с меню и категориями, которые сворачиваются и выделяются жирным шрифтом для каждой страницы и категории?

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


Как создать специальное меню боковой панели в Bootstrap

Я действительно Новичок в Bootstrap и дурачился с ним. Я хочу сделать что-то вроде следующего: Главное меню боковая панель | содержимое боковая панель | другое содержимое То, что я сделал до сих…


Сделайте так, чтобы меню оставалось сверху, но не при прокрутке вниз для боковой прокрутки веб-сайта

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


Динамическое базовое меню: php или jQuery?

Я переделываю свой сайт портфолио и не знаю, в какую сторону идти; jQuery или PHP? комбинация? Моя цель — позволить себе поместить любой файл html/php в папку с меткой projects. Затем попросите меню…


Как создать отзывчивое меню гамбургеров в AMP HTML

Я пытаюсь создать веб-сайт AMP HTML (см. https:/ / www.ampproject.org ) Но я нигде не могу найти, как вы должны создавать отзывчивое меню гамбургеров ? Javascript не разрешен, и для него нет…


Структура ссылок в верхнем меню с сайтов amp

привет и привет из Германии. я создал сторону усилителя для своего домена https: / / www.fruchthof24.de . Ссылка на мой сайт ампер https://www.fruchthof24.de/amp/ и еще один сайт, с А-сайта. в этом…


Как создать большое меню загрузки контента?

Я новичок в bootstrap и хочу создать мега-меню, в котором должны быть категории, содержащие другие подкатегории с большим количеством контента, например links/images. Я просто понятия не имею, как…


Как создать файл HTML с помощью javascript

Я через сайт-npm скребок для скребок сайт, https://github.com/website-scraper/node-website-scraper Я уже получил изображения с сайта, сохраненные в папке assests. теперь мне нужно показать…


Как создать выпадающие строки меню контента?

Я хочу создать выпадающие панели контента, как показано на изображениях. Когда кто-то нажимает на эту панель, то содержимое отображается, и если он нажимает снова, выпадающее меню должно скрываться….

Горизонтальное меню для сайта на HTML и CSS — подробная верстка

На чтение 4 мин. Просмотров 471 Опубликовано

25.05.2020 Обновлено

В этой статье мы расскажем как сделать горизонтальное меню для сайта с помощью HTML и CSS.

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

Общепринятым считается создание меню с помощью стандартного списка. И так, создадим файл index.html и запишем в него следующий код:

 
<nav>
    <ul>
      <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></li>
      <li><a href="">Страница-6</a></li>
      <li><a href="">Страница-7</a></li>
    </ul>
 </nav>

Тег <nav> (от англ. Navigation перевод: Навигация), который обрамляет наш список и в HTML верстке указывает на блок с навигационным меню сайта.

Сохранив и открыв файл index.html в браузере мы увидим следующую картину:

Элементы меню стандартно расположились вертикально и у каждого элемента <li> появилась точка слева (так называемая маркером). Давайте оформим меню согласно нашим условиям.

Стилизация меню с помощью CSS

Для того чтобы начать оформлять наше меню создадим файл style.css, куда мы будем вписывать код CSS. А в index.html пропишем путь до созданного файла style.css. Полный код HTML будет выглядеть следующим образом:


<!DOCTYPE html>
<html lang="ru">
<head>
  <title>Sample</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css"> <!-- Путь до нашего файла style.css -->
</head>
<body>
  <nav>
    <ul>
      <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></li>
      <li><a href="">Страница-6</a></li>
      <li><a href="">Страница-7</a></li>
    </ul>
  </nav>
</body>
</html>

Для начала нам необходимо добавить голубой фон нашему меню и сделать внутренние отступы по вертикали и горизонтали, чтобы текст ссылок не прилипал к краям нашего блока с меню. Открываем файл style.css и записываем следующий код:

 
nav {
  padding: 16px 0;
  background-color: #199BCA;
}

В результате фон нашего меню стал голубым и появились внутренние отступы сверху, слева, справа и снизу.


Далее убираем маркеры в виде точек у тега <ul>, а также сбрасываем на ноль значения padding и margin, чтобы убрать лишние отступы у меню. И центрируем наш список по центру горизонтали.



nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

Ну и наконец выравниваем список меню по горизонтали с помощью display: inline-block. Делаем отступы слева для каждого элемента <li> с помощью margin-left: 10px. Для первого элемента <li> используем псевдокласс :first-child со значением margin-left 0px. Для более четкого восприятия ссылок сделаем все буквы и цифры строчными с помощью text-transform со значением uppercase.



nav ul li {
display: inline-block;
  margin-left: 10px;
  text-transform: uppercase;
}
nav ul li:first-child {
  margin-left: 0px;
}

А теперь немого приведем в порядок визуальное оформление горизонтального меню убрав нижнее подчеркивание и окрасим текст в белый цвет. Для этого тегу <a> применим следующие CSS свойства:



a {
  color: #fff;
  text-decoration: none;
}

В результате получим окончательный пример меню:

Итог: в этой статье мы рассмотрели как сделать меню горизонтально с помощью CSS.

В следующей статье мы рассмотрим как сделать мобильное меню с помощью CSS и JQUERY

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

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

Для начала создадим HTML меню на основе ненумерованного списка:


<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Contacts</a></li>
</ul>

Теперь необходимо создать CSS файл и подключить его к странице:


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

Убедитесь, что код подключающий CSS находится в разделе <head> вашего документа.

Вы можете использовать и inline стили.


	<style type="text/css">
		...тут расположите ваши стили CSS...
	</style>

В результате у вас должен получиться следующий код:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

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

<body>

<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Partners</a></li>
	<li><a href="#">Contacts</a></li>
</ul>

</body>
</html>

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

Для создания горизонтального меню понадобятся дополнительные изменения в HTML и CSS.

В первую очередь добавьте класс в список. Замените <ul> на <ul>

Теперь давайте сделаем меню горизонтальным с помощью CSS файла. У несортированного списка есть заданные по умолчанию параметры margin и padding. Нужно их обнулить:


ul.horizontal{
margin:0;
padding:0;
}

Теперь сделаем список горизонтальным:


ul.horizontal li{
display:block;
float:left;
padding:0 10px;
}

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

Как сделать горизонтальное меню на 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?

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

Меню: привычное и комфортное

Как выполнить навигацию по веб-ресурсу — вопрос теоретический. Как сделать меню для сайта? HTML в горизонтальном или вертикальном варианте? Как на каждой странице управлять поведением посетителя и предоставлять ему реальный функционал?

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

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

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

Однозначно правильные сайты и их меню

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

В качестве образца можно рассматривать сайты:

  • международной биржи Forex;
  • Всемирной организации здравоохранения;
  • финансовой системы России;
  • нефтегазовой компании.

Но количество денег или социальная значимость — не критерии качества веб-разработки.

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

В шаблоны самых лучших CMS никогда не загнать реальную жизнь. Применение интернет-технологий всегда обуславливает в каждом конкретном случае необходимость выполнить теоретико-практические работы по созданию комфортного меню.

Классический многофункциональный пример

Как можно видеть на изображении под цифрой 1, здесь сразу четыре разных меню. Главная страница: сначала ролик, затем документ HTML. Горизонтально все, но каждое меню выполнено с разным соотношением HTML-тегов, нагрузки на CSS и использования JavaScript.

Самое верхнее меню (1.1) относится к посетителю (частное или юридическое лицо, финансовая организация или инвестор). Самое нижнее (1.4) — зависит от всех остальных, и здесь властвует не HTML, а JavaScript и AJAX, которые динамично формируют нужный вариант тегов HTML.

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

Простая динамичная навигация

Пример с Google (на фото под цифрой 2) — классика простоты переключающегося меню. В начале поиска оно одно, в процессе поиска совсем другое. Здесь нет горизонтального выпадающего меню HTML, и CSS отведена минимальная роль. Здесь важен момент переключения варианта конечной выборки и меню подстроено под эту задачу.

Конкурент Google — Yandex (цифра 3) строит свое меню сразу. Более того, страница поиска здесь сразу наполнена дополнительным функционалом и предлагает посетителю не только функцию поиска.

Yandex предлагает сразу:

  • поиск;
  • деньги;
  • почту и др.

Все функции в чистом HTML. Горизонтальные меню по каждой функциональности. Характерная особенность Google и Yandex — настройки, которые выполняются автоматически, но могут быть изменены посетителем через горизонтально ориентированные функции.

Реальная статичная и общая практика

Последний пример (под цифрой 4) — для разработчиков на платформе Office XML. Документы формата «*.*x» востребованы, популярны, и сайт, предлагающий описание стандарта, использует чистый HTML. Горизонтальное меню содержит ссылки на основные разделы:

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

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

Сегодня красивое горизонтальное меню: HTML и CSS или JavaScript — это простота, комфорт и функциональность для посетителя.

Меню: слева направо и сверху вниз или …

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

Традиционный документ HTML: меню горизонтальное с выпадающими подпунктами по каждому пункту. Выпадать может не только список ссылок (пунктов), но списки списков. Когда сайт предоставляет десятки услуг (товаров), и в каждой позиции может быть более десятка строк, становится проблемой как само меню, так и его подпункты.

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

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

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

Фактически сайт — это систематизированное представление информации, а структура этого представления — есть категории, то есть меню.

Организация меню: списки, таблицы и дивы

HTML под горизонтальное меню не отводит никакого специального синтаксиса. Можно использовать обычные дивы (div, span), таблицы (table, tr, td) и списки (ul, li). Последнее считается самым правильным, но часто встречаются конструкции, в которых все смешано в одно целое: один пункт меню может представлять собой таблицу, в каждой ячейке по нескольку дивов и список для описания подразделов.

Синтаксис HTML/CSS при создании пункта меню, если он основан на нескольких дивах (т. е. картинках оформления), становится жестким. Использовать вектор в меню или его пункте невозможно: нет связи между смыслом меню и логикой вектора (растягивания, сжатия, или иного пропорционального изменения размера). Остается использовать растр, а это несколько HTML. Горизонтальное меню (основное), а также:

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

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

Идея: содержание меню и его пунктов определяют, как сделать горизонтальное меню в HTML, а не жесткую конструкцию самого оптимального сочетания ul, li, div, table и т.д.

Всегда важен смысл, а не жесткая конструкция. Смысл всегда можно делегировать от сервера через AJAX браузеру, где функция JavaScript оформит его в нужный HTML-тег и приставит к нему правило CSS, которое определит место, размер и цветовое решение меню (пункта меню).

Виртуальное горизонтальное меню (HTML, CSS, JS)

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

Здесь нет никакого емкого CSS, не выражено участие JavaScript, но поиск через классическое «погуглить» обусловлен не только лаврами лидера, но и фактическим исполнением.

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

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

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

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

Создаем интерактивное меню на чистом css3 | Кабинет Веб-мастера

Всем привет! Сегодня мы научимся делать замечательное интерактивное меню на чистом css! Отличная идея для оформления персонального сайта. Итак, приступим.

Для начала создадим разметку меню на html:

<ul>
    <li><a href="">Обо мне</a><img src="1.jpg"/></li>
    <li><a href="">Мои работы</a><img src="2.jpg"/></li>
    <li><a href="">Инструментарий</a><img src="3.jpg"/></li>
    <li><a href="">Контакты</a><img src="4.jpg"/></li>
</ul>

Тут все просто — обычный список пунктов меню. Да, нам понадобятся 4 картинки. У меня они лежат в корне. Размер у них одинаковый — 375 пикселей по ширине и 400 по высоте. При других значениях придется подбирать цифры в css файле, но об этом позже.

Теперь самое главное — стили css посмотрим на них целиком:

.menu{
	width: 760px;
	margin:0 auto;
	padding:0;
	position: relative;
	list-style:none;
}
.menu li:nth-child(1):hover a{
	background-color: rgba(174,54,55,0.9);
}
.menu li:nth-child(2):hover a{
	background-color: rgba(195, 210, 67, 0.9)
}
.menu li:nth-child(3):hover a{
	background-color: rgba(211, 132, 57, 0.9);
}
.menu li:nth-child(4):hover a{
	background-color: rgba(142, 116, 99, 0.9);
}
.menu li a{
	font-size: 28px;
	display: block;
	width: 365px;
	padding: 0px 10px;
	text-align: right;
	position: relative;
	z-index: 10;
	background: #fff;
	height: 100px;
	border-right: 1px solid #ddd;
	text-decoration:none;
	color:#000;
	background-color: rgba(255,255,255, 0.8);
	-webkit-transition: color 0.2s linear;
	-moz-transition: color 0.2s linear;
	-o-transition: color 0.2s linear;
	-ms-transition: color 0.2s linear;
	transition: color 0.2s linear;
}
.menu li:hover a{
	color: #fff;
}
.menu li img{
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	opacity: 0;
	-webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.menu li:hover img{
	left: 385px;
	opacity: 1;
}

Что тут может быть интересного? Давайте разберем:

.menu li:nth-child(1):hover a{
	background-color: rgba(174,54,55,0.9);
}
.menu li:nth-child(2):hover a{
	background-color: rgba(195, 210, 67, 0.9)
}
.menu li:nth-child(3):hover a{
	background-color: rgba(211, 132, 57, 0.9);
}
.menu li:nth-child(4):hover a{
	background-color: rgba(142, 116, 99, 0.9);
}

Этим кодом мы задаем фоновый цвет при наведении на пункты меню. nth-child(2n) — это указание, что код следует применить к каждым пунктам меню, порядковый номер которых делится на 2 (2, 4, 6 и так далее). Соответственно nth-child(3n) — пунктам, которые делятся на 3 — третий, шестой и так далее. Цвет задается в формате RGBA — цвет rgb — красный, зеленый, синий и прозрачность. Прозрачность задается коэффициентом. 0.9 — это 10% прозрачности и 90% цвета.

.menu li a{
	font-size: 28px;
	display: block;
	width: 365px;
	padding: 0px 10px;
	text-align: right;
	position: relative;
	z-index: 10;
	background: #fff;
	height: 100px;
	border-right: 1px solid #ddd;
	text-decoration:none;
	color:#000;
	background-color: rgba(255,255,255, 0.8);
	-webkit-transition: color 0.2s linear;
	-moz-transition: color 0.2s linear;
	-o-transition: color 0.2s linear;
	-ms-transition: color 0.2s linear;
	transition: color 0.2s linear;
}
.menu li:hover a{
	color: #fff;
}

Здесь написано следующее: сначала цвет ссылки черный — color:#000; При наведении (.menu li:hover a) — цвет текста становится белым — color: #fff; Далее: transition: color 0.2s linear; — это анимация. Создает эффект плавного перехода цвета от черного к белому и обратно. Свойство написано с префиксами для всех браузеров, так как не все браузеры понимают это новое свойство css3 без префикса. z-index:10; задан для того, чтобы пункт меню находился сверху картинки.

.menu li img{
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	opacity: 0;
	-webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.menu li:hover img{
	left: 385px;
	opacity: 1;
}

Эти свойства указывают, что картинка располагается относительно пункта меню — прямо под ним (потому что ранее мы задали z-index) и она (картинка) прозрачна — opacity:0;. То есть ее не видно. При наведении на ссылку — .menu li:hover img — картинка отъезжает влево — left:375px; и становится видимой — opacity:1; чтобы добиться плавности этого эффекта, добавлена анимация — transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out; Вот собственно и все. Надеюсь, объяснил понятно.

Данное меню написано полностью на html+css3 и не содержит javascript. Работает в Google Chrome, Opera, Mozilla FireFox и Internet Explorer 10. Internet Explorer 9 не поддерживает анимацию, но тем не менее, меню в нем все равно смотрится прилично.

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

Введение

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

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