Штирлиц — Сеть печатных салонов в Перми

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

Html горизонтальное меню: Горизонтальное выпадающее меню

Содержание

Горизонтальное меню CSS для сайта на HTML

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

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

Если рассматривать с мобильного аппарата:

HTML

Код

<body>
  <header>
  <div>
  <ul>
  <li><a href=»#»>Главная</a></li>
  <li><a href=»#»>ZorNet.Ru</a></li>
  <li><a href=»http://zornet.ru/load/81″>Скрипты</a></li>
  <li><a href=»http://zornet.ru/load/142″>Шаблоны</a></li>
  <li><a href=»http://zornet.ru/load/145″>Коды</a></li>
  </ul>
  </div>
  </header>
</body>


CSS

Код

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}
   
.bengurin_kazaga ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}
.bengurin_kazaga li {
  font-family: ‘Oswald’, sans-serif;
  font-size: 1.2em;
  line-height: 39. 7px;
  height: 39.7px;
  border-bottom: 1px solid #888;
}
   
.bengurin_kazaga a {
  text-decoration: none;
  color: #f7f5f5;
  display: block;
  transition: .3s background-color;
}
   
.bengurin_kazaga a:hover {
  background-color: #033e3e;
}
   
.bengurin_kazaga a.zornet_ru {
  background-color: #f7f7ff;
  color: #2d2c2c;
  cursor: default;
}
   
@media screen and (min-width: 600px) {
  .bengurin_kazaga li {
  width: 120px;
  border-bottom: none;
  height: 50px;
  line-height: 50px;
  font-size: 1.4em;
  }
   
  .bengurin_kazaga li {
  display: inline-block;
  margin-right: -4px;
  }
}


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

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

Второй вариант, где идет под меню со стрелкой:

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

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

HTML

Код

<body>
  <header>
  <div>
  <ul>
  <li><a href=»#»>Главная</a></li>
  <li><a href=»#»>ZorNet. Ru</a>
  <ul>
  <li><a href=»#»>Стили CSS</a></li>
  <li><a href=»#»>Скрипты</a></li>
  <li><a href=»#»>Шаблоны</a></li>
  </ul>
  </li>
  <li><a href=»#»>Шаблоны</a></li>
  <li><a href=»#»>Стили</a>
  <ul>
  <li><a href=»#»>Стили CSS</a></li>
  <li><a href=»#»>Стили CSS</a></li>
  <li><a href=»#»>Стили CSS</a></li>
  </ul>
  </li>
  <li><a href=»#»>Скрипты</a></li>
  </ul>
  </div>
  </header>
</body>


CSS

Код

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}

.velrsaptunevsa ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}

. velrsaptunevsa li {
  font-family: ‘Oswald’, sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  text-align: left;
}

.velrsaptunevsa a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding-left: 15px;
  border-bottom: 1px solid #888;
  transition: .3s background-color;
}

.velrsaptunevsa a:hover {
  background-color: #005f5f;
}

.velrsaptunevsa a.active {
  background-color: #aaa;
  color: #444;
  cursor: default;
}

/* Sub Menus */
.velrsaptunevsa li li {
  font-size: .8em;
}

@media screen and (min-width: 650px) {
  .velrsaptunevsa li {
  width: 130px;
  border-bottom: none;
  height: 50px;
  line-height: 50px;
  font-size: 1.4em;
  display: inline-block;
  margin-right: -4px;
  }

  .velrsaptunevsa a {
  border-bottom: none;
  }

  .velrsaptunevsa > ul > li {
  text-align: center;
  }

  . velrsaptunevsa > ul > li > a {
  padding-left: 0;
  }

  /* Sub Menus */
  .velrsaptunevsa li ul {
  position: absolute;
  display: none;
  width: inherit;
  }

  .velrsaptunevsa li:hover ul {
  display: block;
  }

  .velrsaptunevsa li ul li {
  display: block;
  }
   
  /* Sub menu indicators */
  .zornet > a::after {
  content: ‘\0025B8’;
  margin-left: 3px;
  }
  .zornet > a:hover::after {
  content: ‘\0025BE’;
  }
}


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

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

виды горизонтальных панелей навигации / Хабр


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

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


  
    Домой
    Сделать заказ
    Обратная связь
  

При верстке под doctype, отличный от html5, элемент nav опускаем или заменяем на соответствующий div.

Что ж, начнем!..

Пункты меню, расположенные по правой/левой стороне

В данном разделе рассмотрены навигационные блоки, в которых элементы размещены по правой/левой стороне. Для верстки таких блоков, в зависимости от ситуации, можно использовать несколько способов:
  1. display: inline;
  2. float: left/right;
  3. display: inline-block.
Display: inline

Когда применяем
Данный способ целесообразно применять при верстке меню простого вида, в котором элементы представлены в виде отдельных слов, не имея padding’ов и разделены лишь пробелами между ними:

Как делается
У элементов li в CSS нужно установить свойство display: inline. Кстати, это уберет и ненужные в большинстве меню такого вида маркеры, так как они находятся в дополнительных блоках, которые содержатся у элементов с display: list-item, а у inline’ов отсутствуют.

У ul устанавливаем свойство text-align в значение right или left соответсвенно.

Примечания

  • При использовании этого варианта стоит помнить, что у inline элементов вертикальные margin’ы не учитываются, но горизонтальные работают;
  • при необходимости верстки pixel perfect, есть вероятность столкновения с проблемой: в разных браузерах ширина пробела между элементами разная. Для решения проблемы расстояние между элементами выставляют margin’ами, а пробелы убирают;
  • если подчеркивание в ссылках элементов меню сделать нижним border’ом, в современных браузерах можно получить красивое анимированное на :hover меню (JSFiddle).
Float: left/right

Когда применяем
Когда необходимо сделать меню с элементами, имеющими padding’и и/или фиксированную высоту/ширину:
Живой пример
Таким способом сверстано верхнее меню Themeforest:

Как делается
Устанавливаем float: left или float:right элементам li. Если нужно убрать маркеры, нужно добавить display: block или list-style: none.

Примечания

  • Необходимо «очистить» ul, задав ему класс .clearfix или поместив в его конец элемент с clear: both, иначе у ul высота будет равна нулю; о других способах «очистки» float’ов можно прочитать здесь;
  • пример интересного меню, сверстанного float’ами: html5guy.
Display: inline-block

Когда применяем
Задачи те же, что и при верстке с float. И да, при решении такой задачи inline-block пал в неравном бою. Во-первых, кроссбраузерность такого решения ниже, чем у float’a, а во-вторых, между inline-block’ами, как и между inline-элементами, появляются пробелы, зачастую ненужные. Эти проблемы решаемы, но зачем их создавать?

Как делается
Устанавливаем display: inline-block элементам li. Ну, а для IE7 (если вы его поддерживаете) прописываем *display:inline; *zoom: 1.

Симметричные относительно левой и правой сторон блоки навигации

В данном разделе рассмотрены навигационные блоки, расположенные симметрично. Существует несколько видов таких меню; каждому из них соответствует свой способ верстки:
  1. пункты меню выровнены по центру;
  2. пункты меню равномерно распределены по всей ширине, между элементами имеется промежуток;
  3. пункты меню равномерно распределены по всей ширине, элементы заполняют всю ширину ul.
Пункты меню выровнены по центру

Когда применяем
Меню расположено по центру:

Как делается
В зависимости от вида пунктов меню, устанавливаем display: inline или display: inline-block (если для пунктов меню предусмотрены padding’и задана ширина и/или высота) элементам li.

Родителю (ul) устанавливаем text-align: center.

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

Пункты меню равномерно распределены по всей ширине, между элементами имеется промежуток

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

Живой примерК сожалению, меню такого типа найти не удалось, поэтому здесь — пример с JSFiddle.

Как делается
В зависимости от вида пунктов меню, устанавливаем display: inline или display: inline-block элементам li. Родителю (ul) устанавливаем text-align: justify. Но сразу justify не заработает — нужно переполнить первую строку (если непонятно почему так — запускаем ворд и пытаемся растянуть несколько слов на всю ширину при помощи justify). Поэтому в конец элемента ul добавляем дополнительный элемент с display: inline-block и width: 100%, или, что лучше, псевдо-элемент ::after с такими же характеристиками.

Примечания
Помните, в предыдущих типах меню мы убирали пробелы между элементами со свойством display, установленным в inline и inline-block? Так вот, в этом случае так делать категорически нельзя — браузеру нужны промежутки между пунктами меню. Кстати, если убрать пробелы между некоторыми элементами, можно группировать кнопки (JSFiddle):

Пункты меню равномерно распределены по всей ширине, элементы заполняют всю ширину ul.

Когда применяем
Между пунктами меню нет промежутков, любое количество пунктов меню занимает всю ширину:
Живой примерApple.com:

Пример подобного меню на JSFiddle можно потрогать здесь.

Как делается
При решении данной задачи есть соблазн сверстать меню таблицами; но мы же не собираемся нарушать семантику документа, правда? Поэтому используем display: table-cell для li и display: table для ul; потом задаем ширину для ul

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

Примечания
При верстке меню данным способом нужно помнить, что нельзя размещать элементы с position: absolute относительно table-cell.

Почему?Дело в том, что в спецификации w3c действие position: relative на table-cell не определено, поэтому в каждом браузере могут наблюдаться свои особенности.
Посмотрите этот пример в разных браузерах (особо пристально смотрим на поведение Mozilla Firefox!).

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

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

Выпадающее горизонтальное меню с поиском на CSS3 и HTML5