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

Создание меню сайта с помощью движка и html-кода

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

Навигация в wordpress

В любом шаблоне вы можете в визуальном режиме создать свое меню и поставить его в одну из возможных областей. Для этого перейдите Внешний вид – Меню. Тут вы можете создать новое или редактировать уже имеющееся.

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

Для его запуска в Google Chrome или Яндекс. Браузере нажмите F12. Вам нужно найти, какой кусочек кода ответственен за вывод блока меню. А точнее, нам нужно обнаружить стилевой класс или идентификатор у навигационного блока. Если это получится, то можно будет найти в css стили для этого элемента и изменить их на свои.

При наведении на html-код отладчик будет подсвечивать вам элемент, который он формирует. Так можно найти нужный элемент быстро и просто. Всего лишь в 2 клика нашли, что наше меню находится в блоке с классом all-width и лежит в теге nav.

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

Меню с помощью html

Теперь можно посмотреть, как на самом деле в коде выглядит практически любое меню. Для его создания сегодня принято использовать контейнер nav. Это парный html-тег, в который обычно помещают важные ссылки, которые есть на странице. Выводят такие ссылки обычно маркированным списком, в нем располагаются пункты списка, а уже в них – сами ссылки, то есть теги <a> с указанием обязательного атрибута href и прочих атрибутов, если они будут необходимы.

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

В общем, создание меню сайта в html выглядит примерно так:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

<nav id = «menu»>
<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>
</ul>
</nav>

И выглядит вот так:

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

Собственно, дальнейшая работа происходит в css. Например, если вам нужно убрать маркеры и сделать все пункты в ряд, то используют следующие свойства:

#menu ul{
list-style: none;
}
#menu li{
float: left;
padding: 15px;
}

И вот наша навигация выглядит уже более цивилизованно. А именно, вот так:

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

#menu li a{
display: block;
background: purple;
padding: 10px;
color: #fff;
}
#menu li a:hover{
background: #333;
}

И теперь навигация приобрела человеческий вид:

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Создание меню на CSS – руководство для новичков

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

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

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

Меню является самой распространённой системой навигации на сайте, которую можно сравнить с оглавлением в книге. Меню должно быть заметно на любой странице ресурса, позволяя пользователю мгновенно перейти на интересующий раздел.

На объёмных сайтах, содержащих более 50 страниц, невозможно разместить полное меню для доступа ко всем разделам.

В таком случае следует использовать выпадающее меню на CSS, при клике на которое появляются дополнительные ссылки на подразделы.

Разновидности меню в CSS

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

1. Главное меню. Это список определённых ссылок на ключевые разделы веб-сайта.
2. Дополнительное меню. Такое меню имеет иерархическую структуру и бывает трёх типов:
   • Выпадающее меню. Раскрывается при наведении курсора мыши на пункт;
   • Всплывающее меню сайта. Раскрывается при клике на определённом пункте;
   • Статическое дополнительное меню для CSS. Древовидная структура, представленная в уже раскрытом виде.

Как создать меню в CSS?

Приведём пример создания простого горизонтального и вертикального меню на CSS с пояснениями.

Код горизонтального меню прописывается следующим образом:

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

<style type="text/css">
.navigation {
   list-style: none; /* Отключение отображения маркеров. */
}
.navigation li {
   float: left; /* Выстраивание элементов списка в один ряд. */
   margin-right: 1px; /* создание отступов для того, чтобы не сливались пункты меню. */
   font-family: Verdana, Arial, Helvetica, sans-serif; /* Указание типа шрифта. */
   font-size: 14px; /* Размер текста в ссылках. */
}
.navigation li a {
   display: block; /* Изменение отображения на блочное для того чтобы иметь возможность задать внутренние отступы. */
   padding: 15px 20px;  /* Внутри блочные отступы. */
   background: #0db5b5; /* Цвет блоков меню. */
   color: #3f3f3f; /* Цвет текста в блоках меню. */
   text-decoration: none; /* Устранение подчёркивания ссылок. */
   position: relative; /* Это необходимо при использовании Internet Explorer 6 для того, чтобы ссылка по всей своей площади была «кликабельной». */
}
.navigation li a:hover {
   background: #92d3d3; /* Цвет блока при наведении курсора. */
   color: #6b6b6b;  /* Цвет текста при наведении курсора. */
}
</style>
</head>
<body>
<ul> 
   <!-- Описание ссылок в меню и сами ссылки. -->
   <li><a href="https://www.internet-technologies.ru/news" target="_blank">Новости</a></li>
   <li><a href="https://www.internet-technologies.ru/articles" target="_blank">Статьи</a></li>
   <li><a href="https://www.internet-technologies.ru/templates/" target="_blank">Шаблоны</a></li>
   <li><a href="https://www.internet-technologies.ru/books" target="_blank">Книги</a></li>
   <li><a href="https://www.internet-technologies.ru/scripts" target="_blank">Скрипты</a></li>
   <li><a href="https://www.internet-technologies.ru/lessons" target="_blank">Видео</a></li>
   <li><a href="http://talk.internet-technologies.ru/" target="_blank">Форум</a></li>
</ul>
<body>
</body>
</html>

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

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

<head>
<title>Вертикальное меню сайта</title>
<style type="text/css">
.navigation {
   list-style: none; /* Отключение отображения маркеров. */
   width: 120px;  /* Ширина меню. */
}
.navigation li {
   margin-top: 5px; /* Отступ между блоками по высоте, необходимый для того чтобы пункты меню не сливались */
   font-family: Verdana, Arial, Helvetica, sans-serif; /* Тип шрифта пунктов меню */
   font-size: 14px; /* Размер текста меню */
}
.navigation li a {
   display: block; /* Изменение отображения на блочное для того, чтобы иметь возможность задать внутренние отступы.  */
   padding: 4px 15px;  /* Отступы внутри блоков. */
   background: #0db5b5; /* Цвет блоков меню. */
   color: #3f3f3f; /* Цвет текста в блоках меню. */
   text-decoration: none; /* Устранение подчёркивания ссылок. */
   position: relative; /* Это необходимо при использовании Internet Explorer 6 для того, чтобы ссылка по всей своей площади была «кликабельной». */
}
.navigation li a:hover {
   background: #92d3d3; /* Цвет фона при наведении курсора мыши */
   color: #6b6b6b;  /* Цвет текста при наведении курсора мыши */
}
</style>
</head>
<body>
<!-- Описание ссылок в меню и сами ссылки. -->
<ul> 
   <li><a href="https://www.internet-technologies.ru/news" target="_blank">Новости</a></li>
   <li><a href="https://www.internet-technologies.ru/articles" target="_blank">Статьи</a></li>
   <li><a href="https://www.internet-technologies.ru/templates/" target="_blank">Шаблоны</a></li>
   <li><a href="https://www.internet-technologies.ru/books" target="_blank">Книги</a></li>
   <li><a href="https://www.internet-technologies.ru/scripts" target="_blank">Скрипты</a></li>
   <li><a href="https://www.internet-technologies.ru/lessons" target="_blank">Видео</a></li>
   <li><a href="http://talk.internet-technologies.ru/" target="_blank">Форум</a></li>
</ul>
<body>
</body>
</html>

Вертикальное меню, полученное при помощи данного кода, выглядит так:

Руководствуясь всеми вышеперечисленными принципами, приведём код для простого выпадающего меню:

<ul>
  <li><a href="https://www.internet-technologies.ru/news">Новости</a></li>
  <li><a href="https://www.internet-technologies.ru/articles" target="_blank">Статьи</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="https://www.internet-technologies.ru/templates/">Шаблоны</a>
    <ul>
      <li><a href="#">Ссылка 1</a></li>
    </ul>
  </li>
  <li><a href="https://www.internet-technologies.ru/books">Книги</a></li>
  <li><a href="https://www.internet-technologies.ru/scripts">Скрипты</a></li>
  <li><a href="https://www.internet-technologies.ru/lessons">Видео</a></li>
  <li><a href="http://talk.internet-technologies.ru">Форум</a></li>
</ul>

<style type="text/css">	

#menu {
  background: #0db5b5;
  width: 60%;
  padding:1;
  text-align: center;
  float:left;
  font-family: Verdana, Arial, Helvetica, sans-serif; 
}
#menu a {
  color: #3f3f3f;
  text-decoration: none;
}
#menu a:hover {
  color: #6b6b6b;
}
#menu ul {
  padding:0;
  margin:0;
}
#menu li {
  list-style: none;
  padding: 0 15px 0 0;
  width:100px;
  margin: 0 auto;
  float:left;
  line-height: 50px;
}
#menu li ul { 
  position:absolute;
  display: none;
} 
#menu li ul li {
  float: none;
  display: inline;
  width:100px;
  line-height:35px;
}
#menu li ul li:hover {
  background: #c392b;
}
#menu li:hover ul {
  display:block;
}
#menu li ul li { 
  display: block; 
  background:#92d3d3;
}
</style>

Получаем такое выпадающее меню:

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

Желаем удачи!

Создание меню html / css

Основы верстки

Чаще всего меню создается на основе не упорядоченных списков ul. В каждый пункт li вкладывается гиперссылка a.

Можно создавать меню и на основе блоков div, таблиц table или списков определений dl.
Но традиционной является конструкция ul.

Код простейшего меню будет выглядеть так:

<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>
</ul>

×

Примечание

В процессе разработки удобно указывать адрес гиперссылки — #/. Во-первых, она никуда не ведет, а во-вторых — не происходит перехода к началу страницы.

Целью гиперссылки будет соответствующая страница вашего сайта или внешняя ссылка. Адрес внутренней страницы может быть как абсолютным, так и относительным. Внешней ссылки — только абсолютный. (Если забыли — смотрите Абсобютные и относительные ссылки).

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

Поэтому предварительно нужно создать файл, например my-menu.css, и подключить его. 

<!-- Подключение таблицы стилей -->
 
<!DOCTYPE html>
<html>
<head>
     ...
     <title>Создание меню</title>
     <link rel="stylesheet" href="css/MAIN.css" type="text/css" />
     <link rel="stylesheet" href="css/my-menu.css" type="text/css" />
     ...
</head>
<body>
...
</body>
</html>

Позже код можно будет перенести в общий файл, а этот удалить (или отключить).

Как прописываются стилевые правила для меню

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

/* Не желательно! */
ul li a {color: #f00;}

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

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

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

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

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

Да, это дополнительная разметка, но оформлять меню будет гораздо удобнее. Кроме того, если в качестве контейнера использовать не div, а nav, то верстка будет более семантической (осмысленной) и удобной для поисковых систем (ПС), что является несомненным плюсом. Второй класс присваиваем тегу ul.

<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>
  </ul>
</nav>

Почему именно так?

Присвоение класса .menu_color тегу nav дает больше возможности для оформления, чем присовение его тегу ul, а класс .my_menu отвечает только за разметку меню и никакого отношения к содержащему контейнеру иметь не должен.

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

Какие имена должны быть у классов

Осмысленные. В идеале, любое имя класса должно давать представление об объекте и назначении. В приведенном выше примере используются классы nav.menu_color и ul.my_menu.

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

×

Внимание!

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

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

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

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

Например, за цветовое оформление у нас отвечает класс .menu_color

/* === Группа цветового оформления === */
 
/* Цвет фона менд */
.menu_color {
  background: gray;
}
/* Оформление пункта меню */
.menu_color > ul > li > a {
  background: transparent;
  color: #f5f5f5;
}
...
/* === Группа разметки основного меню === */ 
 
/* Сброс и установка стилей по умолчанию */
.my_menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Разметка для пункта меню */
.my_menu li a {
  display: block;
  margin: 0;
  padding: 12px 20px;
  text-decoration: none;  
}

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

При необходимости, для тега nav также можно добавить дополнительный класс, чтобы не залезать на территорию «цветового оформления» …

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

Простое вертикальное меню

Исходный 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>
  </ul>
</nav>

Кроме основных классов, рассмотренных в предыдущем материале, добавлен класс li.active для активного пункта (ссылка на текущую страницу).

Сброс и установка стилей по умолчанию

Файл my-menu.css

/* Убираем маркеры и отступы */
.my_menu {
  list-style:none;
  margin:0;
  padding:0;
}
.my_menu li {
  margin:0;
  padding:0;
  position:relative;
}
/* Общие правила для пунктов меню */
.my_menu li a {
  display:block;
  margin:0;
  padding:12px 20px;
  text-decoration: none;
}
/*Наведение на активный пункт меню - курсор обычный */
.my_menu li.active > a:hover {
  cursor: default;
}

Цветовое оформление

×

Примечание

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

/* === Цветовое оформление menu_color === */
.menu_color {
  background:#555;
}
/* Оформление пункта */
.menu_color > ul > li > a {
  color:#999;
  background: rgba(0, 0, 0, 0);
}
/* Подсветка пункта при наведении */
.menu_color > ul > li > a:hover {
  color: #bbb;
  background: rgba(0, 0, 0, 0.1);
}
/* Активный пункт */
.menu_color > ul > li.active > a,
.menu_color > ul > li.active > a:hover {
  color:#fff;
  background:rgba(0, 0, 0, 0.4);
}

Пояснения:

• Если возникнет необходимость к определенным пунктам меню добавить подпункты, т.е. сделать меню многоуровневым, то конструкция .menu_color > ul > li > a позволит ограничить применение стилей только к пунктам меню первого уровня. Для подменю можно будет прописать другие стили оформления.
• Использование прозрачности при задании цвета фона — background: rgba(0, 0, 0, 0.1). Это универсальное режение для любого темного бэкграунда. Если вы решите изменить цвет фона меню, фон активного пункта и подсветка пунктов при наведении изменятся автоматически. Впрочем, ничто не мешает вам задать понравившиеся цвета явно. 

×

Замечание

Цвет фона меню задавать не обязательно, если он наследуется от родительского блока.

Разделители пунктов

/* Разделитель пунктов меню */
.menu_color > ul > li + li > a {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}

Повторяем тот же трюк с использованием rgba. Цвета для верхней границы и тени заданы полупрозрачными — черный 15% прозрачности и белый 10% соответственно.

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

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

Изначально любое меню нужно создавать как многоуровневое!

В последние годы реально-многоуровневые меню уходят в прошлое. Двух уровней, обычно, вполне достаточно, остальные — оформляются отдельным дополнительным меню.

HTML-код 2-х уровневого меню:

<nav>
    <ul>
        <li><a href="#/">пункт 1</a></li>
        <li><a href="#/">родительский пункт 2</a>
            <ul>
                <li><a href="#/">дочерний подпункт 1</a></li>
                <li><a href="#/">дочерний подпункт 2</a></li>
            </ul>
        </li>
        <li><a href="#/">пункт 3</a></li>
        <li><a href="#/">пункт 4</a></li>
        <li><a href="#/">пункт 5</a></li>
    </ul>
</nav>

Добавлены классы li.parent — родительский тег, содержащий подменю, и ul.sub-menu — вложенный список выпадающего меню.

Цветовое оформление

/* Оформление sub-menu */
.menu_color .sub-menu {
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
}
/* Офррмление подпунктов */
.menu_color .sub-menu li a{
  color: #555;
  background: rgba(0, 0, 0, 0);
}
/* Офррмление подпунктов при наведении */
.menu_color .sub-menu li a:hover{
  color: #fff;
  background: #555;
}
/* Разделитель для пунктов sub-menu */
.menu_color .sub-menu > li + li > a {
  border-top: 1px solid #fff;
  box-shadow: 0 -1px 0 #ddd;
  padding-left: 40px  /* Добавляем отступ для подпунктов */
}

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

Позиционирование и скрытие

Позиционирование осуществляется относительно родительского li.parent. (Именно для этого при сбросе и установке для него было задано position: relative;)

/*Общие*/
.my_menu .sub-menu {
  display: none;
  position: absolute;
  top: 0;
  min-width: 200px;
  z-index: 9999;
} 

Вывод

В зависимости от расположения основного меню (левая/правая боковая колонка), подменю может выпадать как вправо, так и влево. Поэтому для определения стилевых правил используем класс родительского блока .sidebar_left (В исходном html-коде класс не указан, т.к. к коду меню отношения не имеет). 

/* Вывод */
.my_menu .parent:hover .sub-menu {
  display: block;
  top: 4px;
}
/* со смещением вправо */
.sidebar_left .my_menu .parent:hover .sub-menu {
  left: 100%;
  margin-left: -10px;
}

×

Информация

Если у родительского блока нет класса, или он применяется как к правой так и к левой колонкам — нужно этот класс добавить к тегу nav.menu_color.sidebar_left.

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

/* Смещение влево */
.sidebar_right .my_menu .parent:hover .sub-menu {
  right: 100%;
  left: auto;
  margin-right: -5px;
}

Простая анимация

Что мы будем анимировать. В данном случае, эффекты довольно простые:

Переопределение существующих стилей:

/* Оформление пункта */
.menu_color >  ul >  li >  a {
  color: #999;  
  background: rgba(0, 0, 0, 0);
 
  /* добавляем код */
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
 
/* Офррмление подпунктов */
.menu_color .sub-menu li a{
   color: #555;
   background: rgba(0, 0, 0, 0);
 
  /* добавляем код */
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
 

А вот с плавным появленем подменю проблема …

Дело в том, что использовать display: none; для того чтобы скрыть подменю нельзя — анимация работать не будет. Поэтому рассмотрим другой способ.

Скрытие подменю. Вариант 2

Альтернативным способом является смещение меню в исходном состоянии за пределы экрана + полная прозрачность.

/* Переопределение sub-menu*/
.my_menu .sub-menu {
  display: block; /* переопределено */
  position: absolute;
  top: 0;
  width: 200px;
  z-index: 9999;
 
  /* Добавить */
  opacity: 0;
  -webkit-transition: opacity .5s, top .7s;
  -moz-transition: opacity .5s, top .7s;
  -o-transition: opacity .5s, top .7s;
  transition: opacity .5s, top .7s;
}
/* Смещение за экран */
.my_menu .sub-menu {
  left: -3000px;
}
/* Переопределяем эффект отображения при наведении*/
.my_menu .parent:hover > .sub-menu {
  display: block;
  top: 4px;
 
  /* Добавить */
  opacity: 1;
}

Раздвижное меню-аккордеон 

×

Несколько слов вступления

В данном примере рассмотрена технология создания аккордеон-меню, раскрывающегося по hover.

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

Аккордеон должен раскрываться по click, а это уже JS. А рассмотрение javascript выходит за рамки раздела HTML/CSS…

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

Добавлен класс my_accordion к классу родительского контейнера, а класс .sub-menu заменен на .sub-accordion-menu. Можно было бы не заменять, а просто переопределить, но это усложнит пример для понимания.

<nav>
    <ul>
        <li><a href="#/">пункт 1</a></li>
        <li><a href="#/">родительский пункт 2</a>
            <ul#/">дочерний подпункт 1</a></li>
                <li><a href="#/">дочерний подпункт 2</a></li>
            </ul>
        </li>
        <li><a href="#/">пункт 3</a></li>
        <li><a href="#/">пункт 4</a></li>
        <li><a href="#/">пункт 5</a></li>
    </ul>
</nav>

/* === Группировка классов === */
 
/* Убираем маркеры и отступы */
.my_menu, .sub-menu, 
.sub-accordion-menu {
  list-style:none;
  margin:0;
  padding:0;
}
/* Подсветка пункта при наведении */
.menu_color > ul > li > a:hover,
.my_menu .parent .sub-accordion-menu li a:hover {
  color: #bbb;
  background: rgba(0, 0, 0, 0.1);
}
/* Разделитель пунктов меню */
.menu_color > ul > li + li > a,
.menu_color .sub-accordion-menu li > a {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}
 
 

После этого добавим стили, для закрытого и раскрытого аккордеона:

/* === Закрытый ===*/
.sub-accordion-menu {
  display: block;
  position: static;
  width: auto;
  overflow: hidden;
  border: none;
  margin: 0!important; 
  max-height: 0;   /* Скрываем выпадающее подменю */
  transition: max-height 1s;  /* Задержка раскрытия */
}
/* === Открытый ===*/
.sub-accordion-menu {
  max-height: 1000px;
}
.sub-accordion-menu > li > a {
  padding-left: 40px;  /* Добавляем отступ для подпунктов */
}

Примечание.
Почему было использовано свойство max-height, а не height? Потому что мы не знаем высоту раскрывающегося подменю, а при использовании значения height: auto — анимация не срабатывает.

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

По структуре горизонтальное меню ни чем не отличается от вертикального, html-код одинаковый. Теоретически, получить горизонтальное меню из вертикального можно заменой/добавлением класса содержащего контейнера.

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

В итоге наше меню будет выглядеть так:

За основу возьмем код вертикального выпадающего меню и заменим классы:

<nav>
  <ul>
    <li><a href="#/">punkt 1</a></li>
    <li><a href="#/">dropdown</a>
      <div>
        <ul>
          <li><a href="#/">sub punkt 1</a></li>
          <li><a href="#/">sub punkt 2</a></li>
        </ul>
      <div>
    </li>
    <li><a href="#/">punkt 3</a></li>
    <li><a href="#/">active</a></li>
    <li><a href="#/">punkt 5</a></li>
  </ul>
</nav>

Разметка

/* === Разметка основного меню === */
.hz-bar ul {
 list-style: none;
 margin:0;
 padding:0;
}
.hz_menu > li {
 float: left;
 margin:0;
 padding:0;
 position:relative;
}
.hz_menu li a {
 display:block;
 margin:0;
 padding:15px 20px;
 text-decoration: none;
}

Что было сделано:

1. Сброс стилей по умолчанию для тега ul
2. Создание горизонтального меню, путем присвоения тегам li, содержащим пунткы основного меню, свойства float: left
3. Установка отступов для пунктов меню

Пояснения:

Конструкция .hz_menu > li распространяется только на пункты основного меню и не затрагивает выпадающее, в то время как .hz_menu li a задается для всех пунктов. Некоторые свойства, специфичные для подменю, будут переопределены в дальнейшем.

Разметка выпадающего меню

/* === Разметка выпадающего подменю === */
.dropdown_menu {
 display: block;
 position: absolute;
 left: -3000px;
 top: 100%;
}
.dropdown_menu > ul {
 border: 1px solid;
 margin-top: 10px;  /* отступ от основного меню */
 padding: 10px 1px;
 min-width: 140px;
 opacity: 0;
 transition: opacity .5s; /* анимация прозрачности */
}
.dropdown_menu li a {
 white-space: nowrap; /* если не очень длинные заголовки */
 z-index: 9999;
 padding: 10px 20px;
}
.parent_dropdown:hover .dropdown_menu {
 left: 0px;
}
.parent_dropdown:hover .dropdown_menu ul {
 opacity: 1;
}

Рассмотрим некоторые особенности:

• Как было видно из html-кода, выпадающее меню обернуто в дополнительный контейнер div.dropdown_menu. Для чего? В принципе, можно вполне обойтись и без него, но эта обертка дает некоторые дополнительные возможности оформления. В частности, возможность задать отступ от основного меню.
  Если задать отступ непосредственно для тега ul без обертки, при перемещении курсора от основного пункта к подпункту hover-эффект прервется и подменю пропадет … Дополнительный контейнер обеспечивает, в данном случае, отсутствие разрыва.
• Для подпункт определено правило white-space: nowrap. Дело в том что абсолютно позиционированное подменю имеет максимальную ширину родительского пункта, и, соответственно, текст подпунктов будет переноситься на новую строку. Это не очень удобно при коротких названиях основных пунктов.
  Данное правило предотвращает перенос. Как альтернатива (дополнение), минимальная ширина подменю была задана явно.

Оформление

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

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

Теги li, которым присвоено float: left, выпадают из основного потока, их для основного контейнера как-бы не существует, поэтому он «схлопывается» и имеет высоту 0. Соответственно, никакого цветового оформления мы не увидим.

Решение

/* Предотвращаем схлопывание */
.hz-bar:after {
 content: '';
 display: table;
 clear: both;
}

Теперь контейнер будет вести себя более дружелюбно и можно его оформлять

/* === Оформление меню === */
.menu_bordo {
 background: #7D0000;
}
.menu_bordo .hz_menu > li > a {
 color: #DBE6B7;
}
.menu_bordo .hz_menu > li > a:hover {
 color: #fff;
}
.menu_bordo .hz_menu .active a{
 box-shadow: inset 0 15px 15px rgba(0, 0, 0, 0.2);
 color: #fff;
 cursor: default;
}

Здесь все достаточно очевидно. Единственное, cursor: default, следовало бы перенести в разметку, чтобы не привязывать к классу цветового оформления.

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

/* === Оформление выпадающего подменю === */
.menu_bordo .dropdown_menu > ul {
 background: #fff;
 border-color: #ddd;
}
.menu_bordo .dropdown_menu > ul > li > a {
 color: #555;
}
.menu_bordo .dropdown_menu > ul > li > a:hover {
 background: #7D0000;
 color: #fff;
}

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

Дополнительно

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

/* Дополнительно. Разделители пунктов + маркер */
.hz_menu > li + li > a {
 border-left: 1px solid rgba(255, 255, 255, 0.1);
 box-shadow: -1px 0 0 rgba(0, 0, 0, 0.15);
}
.parent_dropdown > a:after {
 display: inline-block;
 padding: 1px 0 0 3px;
 content: "\25BC ";
 font-size: 10px;
 vertical-align: top;
}

Здесь вы можете скачать Код примера горизонтального меню

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

На чтение 4 мин. Просмотров 445 Опубликовано 25.05.2020
Обновлено 03.06.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

Верстка меню на html5 | Vaden Pro

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

При использовании 4-го стандарта html оптимальным вариантом верстки меню для сайта был следующий:

<ul>
   <li><a href="#">Пункт меню 1</a></li>
   <li><a href="#">Пункт меню 2</a></li>
   <li><a href="#">Пункт меню 3</a></li>
</ul>

Ну а что? Все крайне логично и лаконично. Тег ul согласно документации W3C следует использовать для разметки списков с перечислением чего-либо, а что такое меню, если не список ссылок на конкретные структурные части нашего ресурса?

Новый подход к верстке меню в html5

С выходом 5-го html мы узнали о существовании нового тега nav и что его тоже вроде как следует использовать для разметки меню и, не мудрствуя слишком много, из симбиоза старых и новых знаний получилась конструкция следующего содержания:

<nav>
   <ul>
      <li><a href="#">Пункт меню 1</a></li>
      <li><a href="#">Пункт меню 2</a></li>
      <li><a href="#">Пункт меню 3</a></li>
   </ul>
</nav>

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

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

<nav>
   <a href="#"> Пункт меню 1</a>
   <a href="#"> Пункт меню 2</a>
   <a href="#"> Пункт меню 3</a>
</nav>

Среди преимуществ данного варианта разметки меню на html 5 мы можем выделить следующие:

• Уменьшая количество кода на странице мы упрощаем ее обработку браузерам и поисковым роботам, что положительно сказывается на SEO сайта.
• Меньше тегов – короче DOM структура документа, что тоже лишний плюс для обработки страницы различными приложениями.
• Чем лаконичнее код, тем он чище и проще к восприятию.

Как сверстать вложенные меню в html5?

Вложенность меню с использованием новых стандартов хоть и будет выглядеть непривычно с первого взгляда, но зная предназначение тегов 5-го html данную структуру становится достаточно просто понять:

<nav>
   <section>
      <a href="#"> Пункт меню 1</a>
      <nav>
         <a href="#"> Подпункт меню 1</a>
         <a href="#"> Подпункт меню 2</a>
         <a href="#"> Подпункт меню 3</a>	
      </nav>
   </section>
   <a href="#"> Пункт меню 2</a>
   <a href="#"> Пункт меню 3</a>
</nav>

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

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

Подводя итоги

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

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

Оценок: 5 (средняя 3 из 5)

• 3016 просмотров

Понравилась статья? Расскажите о ней друзьям:

Еще интересное

Элемент секции навигации — HTML

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

• Не обязательно все ссылки должны быть обёрнуты в <nav>. <nav> следует использовать лишь для главных навигационных блоков. Например, <footer>  часто содержит список ссылок, которые не стоит оборачивать в <nav> .
• Документ может содержать несколько <nav> элементов. Например, один для навигации по сайту, второй для навигации по странице.
• Пользовательские агенты, такие как устройства чтения с экрана, предназначенные для людей с плохим зрением, могут использовать этот элемент, чтобы определить следует ли пускать рендеринг содержимого навигации.

В данном примере, блок <nav> содержит ненумерованный список (<ul>) ссылок. С помощью CSS данный блок можно использовать как сайдбар, навигационную колонку или выпадающее меню.

<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

BCD tables only load in the browser

• Другие секционные элементы: <body>, <article>, <section>, <aside>, <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h5> (en-US), <h6> (en-US), <hgroup>, <header>, <footer>, <address>;
• Использование разделов и создание структуры HTML документа.

Лучшие практики для выпадающих меню HTML и воздействия SEO

При выполнении выпадающих меню HTML, которые являются специфичными для CSS, у вас есть некоторая неупорядоченная структура типа списка в верхней части кода. Если ваш выпадающий список ссылается на сотни страниц, не повредит ли наличие этого большого неупорядоченного списка в верхней части кода каждой страницы SEO этой страницы (потому что весь этот код non-page-specific находится в верхней части)? Я спрашиваю только потому, что заметил, что мои результаты поиска Google Mini были искажены UL вверху, пока я не нашел специфический тег Google Mini, из-за которого он не индексировал этот раздел.

Было бы лучше использовать javascript, чтобы ввести содержимое UL снизу кода, или иметь UL внизу, но использовать позиционирование CSS, чтобы получить его сверху?

Не уверен, что мой вопрос ясен или нет. Мысли?

javascript

html

seo

drop-down-menu

Поделиться

Источник

Max    

07 февраля 2011 в 21:40

2 ответа

• Лучшие практики и шаблоны проектирования для iPhone форм?

  Часть приложения, которое я делаю, требует от пользователя заполнить многостраничную форму, содержимое которой будет сохранено локально (возможно, с помощью Core Data). Есть ли для этого какие-то лучшие практики? Эта форма включает только текстовые поля. Я предполагаю, что варианты UITextFields…

• Лучшие практики для windows приложений?

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

7

Вы задали пару вопросов:

Короткий ответ: проблема в количестве ссылок, а не в том, как они закодированы.

Длинный ответ:

Если ваш выпадающий список ссылается на сотни
страниц, имеет ли этот большой
неупорядоченный список в верхней части кода каждой
страницы на этой странице SEO
(потому что есть все это
non-page-specific код вверху)?

Это возможно , но, как и все в Интернете, все сводится к реализации. Это не столько код, используемый для размещения меню, который повлияет на ваш SEO, сколько тот факт, что вы делите ссылочный капитал вашей страницы (PageRank) на большее количество ссылок. Это не проблема, если вы являетесь популярным сайтом с высоким PR, но если это не так, вам нужно быть более избирательным в отношении того, как/где вы ссылаетесь внутри. Фактический код, используемый для создания этой навигации, не так важен, как то, как вы включаете эти ссылки, поскольку поисковые системы в основном игнорируют markup (включая HTML5).

Было бы лучше использовать javascript
чтобы ввести содержимое UL из
в нижней части кода или иметь
UL внизу, но используйте CSS
позиционирование, чтобы поднять его наверх

Это поможет сделать контент ближе к тегу h2/body с преимущественным весом, но вы все еще не имеете дело с проблемой количества ссылок. Я попробовал метод позиционирования CSS в качестве теста, и это оказало негативное влияние на ценность основных навигационных элементов, потому что они получили вес «footer» в глазах поисковых систем.

Резюме
: Таким образом, ответ на самом деле таков: для SEO — не используйте мега-меню, если вы небольшой сайт, потому что вы просто не можете распределить размер ссылки пропорционально страницам, которые в этом нуждаются — вам нужно будет убедиться, что ваши самые важные страницы связаны с вашей домашней страницы, а затем ссылаться глубже по мере прохождения архитектуры вашего сайта. Если у вас есть PR из 6 или выше или много более высоких страниц PR, то вы можете рассмотреть возможность более глубокой привязки из ваших главных меню.

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

Дальнейшее чтение (и примеры):
— http://www.smashingmagazine.com/2009/03/24/designing-drop-down-menus-examples-and-best-practices/

Поделиться

Mike Hudson    

08 февраля 2011 в 05:47

1

Лучшее прямое решение вашего вопроса — использовать элемент HTML5 <nav> -заключите свои CSS меню в элемент <nav> , и друзья Google & увидят, что вы знаете, что все внутри него-это структура меню. Это семантическая сеть в действии.

См . http://html5doctor.com/nav-element/ для хорошей статьи об этом.

Если вы не можете использовать HTML5 (и нет никаких причин, почему бы и нет, если только вам не нужно поддерживать IE с выключенным Javascript), вы можете добиться аналогичного эффекта, используя хорошо названные классы и IDs, чтобы подчеркнуть Google, что этот раздел страницы является структурой меню. В наши дни Google видит достаточно меню CSS, чтобы они могли работать с ним, не оказывая на вас слишком большого влияния SEO.

Проблема, с которой вы столкнетесь, заключается в том, что наличие большого меню с сотнями записей вредит общему удобству использования вашего сайта так же, как если бы не больше, чем это вредит SEO. См. На этом сайте статью (немного самоуверенную, но все еще действительную) о том, почему большие раскрывающиеся меню плохи, независимо от того, какой метод используется для их создания: http://www.message.uk.com/dropdown-menus-no-thanks

Поделиться

Spudley    

07 февраля 2011 в 21:50

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

Должен ли сайт ресторана использовать PDF или HTML для меню для лучшего SEO?

Я пытаюсь создать что-то, что будет иметь сильные результаты SEO. У меня есть два варианта отображения меню ресторана на сайте: Используйте HTML, чтобы фактически создать каждое меню на сайте Каждое…

Лучшие практики для портативных устройств C#

Я ищу, чтобы написать некоторый код C# для linux/windows/mac/any другой платформы, и ищу лучшие практики для переносимого кода. У проекта mono есть несколько замечательных ресурсов для переноса ….

выпадающее меню и seo

Hidden links and contents are not good for seo. Ли выпадающем меню влияет seo. Если да, то есть ли идеальное решение для выпадающего меню с перспективой seo?

Лучшие практики и шаблоны проектирования для iPhone форм?

Часть приложения, которое я делаю, требует от пользователя заполнить многостраничную форму, содержимое которой будет сохранено локально (возможно, с помощью Core Data). Есть ли для этого какие-то…

Лучшие практики для windows приложений?

Мне было интересно, где следует разместить конфигурационные файлы на Windows, так как я слышал, что программные файлы доступны только для чтения в Vista. Если подумать, я довольно отстал от времени…

Лучшие Практики Degrafa

Недавно я изучал Degrafa и заметил, что среди примеров, размещенных в Интернете, не так много согласованности. Есть ли место, где я могу найти лучшие практики degrafa (особенно для снятия кожи)? или…

HTML <head> лучшие практики

Есть теги <meta> и другие вещи, которые вы можете поместить в <head> вашего документа HTML. Какие теги <meta> и т. д. И лучшие практики вы используете в своем документе HTML, чтобы…

Каковы лучшие практики и советы по использованию JavaScript без потери доступности сайта и SEO?

Каковы лучшие практики и советы по использованию JavaScript без потери доступности сайта, удобства использования и SEO, а также контента сайта, если JavaScript отключен, но все еще сохраняет…

html/css/javascript лучшие практики модульной реализации проектов

По сравнению с проектами Java/C#/C/C++ мы часто видим, что веб-интерфейсные проекты (html/css/javascript) слишком сложны для чтения и обслуживания. Итак, можем ли мы обобщить некоторые лучшие…

ASP.NET и C# лучшие практики для веб-приложений?

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

CSS Вертикальная панель навигации

Вертикальная панель навигации

Чтобы создать вертикальную панель навигации, вы можете стилизовать элементы
внутри списка, помимо кода с предыдущей страницы:

Объяснение примера:

• дисплей: блок; — Отображение ссылок как блочных элементов составляет целое
  область ссылки кликабельна (не только текст), и это позволяет нам указать ширину
  (и отступы, поля, высота и т. д., если хотите)
• ширина: 60 ​​пикселей; — Элементы блока занимают всю ширину, доступную по умолчанию.Мы хотим указать ширину 60 пикселей

Вы также можете установить ширину

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

.

Пример

ул.
{

тип-стиль-список: нет;

маржа: 0;

отступ: 0;
ширина: 60 ​​пикселей;
}

ли
а
{
дисплей: блок;
}

Попробуй сам »

---

Примеры вертикальной панели навигации

Создайте базовую вертикальную панель навигации с серым цветом фона и
изменить цвет фона ссылок, когда пользователь наводит указатель мыши на
их:

Пример

ul {
list-style-type: none;
маржа: 0;
отступ: 0;
ширина:
200 пикселей;
цвет фона: # f1f1f1;
}

li a {
дисплей:
блокировать;
цвет: # 000;
отступ: 8 пикселей 16 пикселей;
текст-оформление: нет;
}

/ *
Изменить цвет ссылки при наведении * /
li a: hover {
цвет фона: # 555;
цвет: белый;
}

Попробуй сам »

Активная / текущая ссылка для навигации

Добавьте «активный» класс к текущей ссылке, чтобы пользователь знал, на какой странице он находится:

Центральные ссылки и добавить границы

Добавьте text-align: center в

• или для центрирования ссылок.

  Добавьте свойство border в

  , чтобы добавить границу вокруг панели навигации. Если ты тоже хочешь
  границ внутри панели навигации, добавьте border-bottom ко всем элементам
  • , кроме
    последний:

    Пример

    ul {
    border: 1px solid # 555;
    }

    li {
    выравнивание текста: по центру;
    нижняя граница: твердое тело 1px # 555;
    }

    li: последний ребенок {
    нижняя граница: нет;
    }

    Попробуй сам »

    Полноростовая фиксированная вертикальная панель навигации

    Создать полноразмерную «липкую» боковую панель навигации:

    Пример

    ul {
    list-style-type: none;
    маржа: 0;
    отступ: 0;
    ширина:
    25%;
    цвет фона: # f1f1f1;
    высота: 100%; / * Полная высота * / Позиция
    : фиксированная; / *
    Сделать так, чтобы он прилипал, даже при прокрутке * /
    перелив: авто; / * Включить прокрутку, если в боковой навигации слишком много контента * /
    }

    Попробуй сам »

    Примечание: Этот пример может некорректно работать на мобильных устройствах.

    CSS Горизонтальная панель навигации

    ---

    Горизонтальная панель навигации

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

    Элементы встроенного списка

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

  • как встроенный, в дополнение к «стандартному» коду с предыдущей страницы:

    Объяснение примера:

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

    Элементы плавающего списка

    Еще один способ создания горизонтальной панели навигации — разместить

  • элементов и укажите макет для ссылок навигации:

    Пример

    Ли
    {
    плыть налево;
    }

    а
    {
    дисплей: блок;
    отступ: 8 пикселей;
    цвет фона:
    #dddddd;
    }

    Попробуй сам »

    Объяснение примера:

    • поплавок: левый; — Используйте float, чтобы получить элементы блока
      плавают рядом друг с другом
    • дисплей: блок; —
      Позволяет нам указать отступы (и
      высота, ширина, поля и т. д.если хотите)
    • отступ: 8 пикселей; — Укажите отступы
      между каждым элементом , чтобы сделать
      они хорошо выглядят
    • цвет фона: #dddddd; — Добавить серый цвет фона для каждого
      элемент

    Совет: Добавьте цвет фона в

    вместо каждого элемента , если хотите
    цвет фона на всю ширину:

    ---

    Примеры горизонтальной панели навигации

    Создайте базовую горизонтальную панель навигации с темным цветом фона и
    изменить цвет фона ссылок, когда пользователь наводит указатель мыши на
    их:

    Пример

    ul {
    list-style-type: none;
    маржа: 0;
    отступ: 0;
    переполнение:
    скрытый;
    цвет фона: # 333;
    }

    ли {
    плыть налево;
    }

    li a {
    дисплей: блок;
    белый цвет;
    выравнивание текста: по центру;
    отступ: 14 пикселей 16 пикселей;
    текст-оформление: нет;
    }

    / * Измените цвет ссылки на # 111 (черный) при наведении * /
    li a: hover {
    background-color:
    # 111;
    }

    Попробуй сам »

    Активная / текущая ссылка для навигации

    Добавьте «активный» класс к текущей ссылке, чтобы пользователь знал, на какой странице он находится:

    Ссылки с выравниванием по правому краю

    Выровнять ссылки по правому краю, перемещая элементы списка вправо ( float: right; ):

    Пример

    • Главная
    • Новости
    • Связаться
    • О программе

    Попробуй сам »

    Разделители границы

    Добавьте свойство border-right в

    • , чтобы создать разделители ссылок:

      Пример

      / * Добавляем серую правую границу ко всем элементам списка, кроме последнего элемента
      (последний ребенок) * /
      li {
      граница справа: 1px solid #bbb;
      }

      li: last-child {
      border-right: нет;
      }

      Попробуй сам »

      Фиксированная панель навигации

      Сделать так, чтобы панель навигации оставалась вверху или внизу страницы, даже когда пользователь прокручивает страницу:

      Примечание. Фиксированное положение может некорректно работать на мобильных устройствах.

      Серая горизонтальная панель навигации

      Пример серой горизонтальной панели навигации с тонкой серой рамкой:

      Пример

      ul {
      border: 1px solid # e7e7e7;
      цвет фона: # f3f3f3;
      }

      li a {
      цвет:
      # 666;
      }

      Попробуй сам »

      Липкая панель навигации

      Добавить позиция: липкая; в

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

      Закрепленный элемент переключается между относительным и фиксированным, в зависимости от положения прокрутки.Он позиционируется относительно, пока не будет достигнута заданная позиция смещения во вьюпорте — затем он «застревает» на месте (например, position: fixed).

      Пример

      ul {
      position: -webkit-sticky; / * Safari * /
      положение: липкое;
      верх: 0;
      }

      Попробуй сам »

      Примечание. Internet Explorer не поддерживает фиксированное позиционирование. Safari требует -webkit-
      префикс (см. пример выше). Вы также должны указать по крайней мере один из верхний , правый , нижний или левый для
      липкое позиционирование для работы.

      ---

      Другие примеры

      Адаптивный Topnav

      Как использовать медиа-запросы CSS для создания отзывчивой верхней навигации.

      Попробуй сам »

      Адаптивный Sidenav

      Как использовать медиа-запросы CSS для создания адаптивной боковой навигации.

      Попробуй сам »

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

      Введение

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

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

      Примечание. Этот материал был первоначально опубликован как часть учебной программы Opera Web Standards Curriculum, доступной как 23: Создание нескольких страниц с меню навигации, написанной Кристианом Хейльманном.Как и оригинал, он опубликован под лицензией Creative Commons Attribution, Non Commercial — Share Alike 2.5.

      ---

      Далее: Проверка вашего HTML.

      Создание базовых меню навигации · Документация WebPlatform

      Сводка

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

      Введение

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

      элемент HTML5