Конструктор html меню горизонтальное

Обновлено: 03.05.2024

Supported by all other major browsers (including IE8+).

Layout

Rich HTML mega menu, or unlimited multi-level dropdowns.

Step 1

Has Sub Menus

Breakpoint

  • The CSS Menu will support the breakpoint (responsive feature) only when it has no sub-menus.
    Please use McMenu: Responsive Menu when your menu has sub-menus.
  • If checked, the menu HTML will contain sub-menus.
  • If unchecked, the menu HTML will contain only single-level menu items (no sub-menus), and if breakpoint is set, the menu will become the hamburger icon when the window width is less than the breakpoint, and clicking on the icon will toggle the menu display.

You can uncheck the Has Sub Menus option, or use McMenu instead.

For details please see the note below.

It is the responsiveness setting: the menu will become a hamburger icon when the window width is less than the setting, and clicking on the icon will toggle the menu display.

Step 2: Choose style template

Select the style template that best fits your needs.

Your style customization in next step will be based on the chosen template.

Step 3: Styles

Display

Alignment

Background Color

Border Color

Arrow Thickness

Arrow Size

  • Inline-block: The menu allows other adjacent inline elements stay in the same line.
  • Block: The menu takes up the full block. Other adjacent elements will NOT stay in the same line.

The menu will slide in from this position when menu icon is clicked.

Note:
Some style codes, such as menu icon position, menu animations in mobile mode, are generated based on this option and the above Position option. Those codes are between the /*--begin mark1--*/ and /*--end mark1--*/ in cssmenu.css.

If you dislike the default generated styles, you can directly eidt those codes.

Following is an example of the updated code:

Padding X

Padding Y

This Padding Y and Font Size determine the height of the menu bar.

The font in the list is Google Fonts except the Default.

If a Google Font has been chosen, there will be a Google Font link in the head section in your download HTML demo page.

Text Color

Hover Text Color

Font Size

Hover Background

Font Weight

Uppercase

Letter Spacing

Min-Width

It specifies either the min-width of sub-menu UL, or if any, the min-width of each column (DIV.clm) under the full-width dropdown DIV.

Set it to 0 or initial if no specific min width is required.

We are using CSS box-shadow property to specify the border shadow effect.

If you dislike the shadow border, you can remove the box-shadow specification from the generated cssmenu.css file, and if you prefer solid border, add border specification there.

Padding X

Padding Y

Text Color

Hover Text Color

Background Color

Hover Background

Shadow Color

Font Size

Font Weight

Position

  • Relative: The menu will appear at its default position in the HTML document
  • Absolute: Similar to above Relative except it is removed from the normal document flow. When the menu is open it will stay on top of its following contents instead of pushing them down.
  • Fixed: When the menu is open it will occupy the whole screen.

Slide-in From

Max Width

Menu Item Text Align

Font Size (Top-level)

Menu Border Color

Switch the Demo preview window to mobile mode, you will see that by default, the menu on mobile device will become a hamburger icon:

  • If the menu icon is not at your preferred location, you can later manually modify the generated cssmenu.css by the .menu-icon and .menu-icon.active selectors.
  • If you want to add text "MENU" after the menu icon, just add it to the HTML code. Example

You can see the live example in the One menu HTML code file for all pages viewing with mobile device or small browser window.

Hamburger Icon

Align

Its position might also be specified based on the Position and Slide-in From options under the "Menu in Mobile Mode" tab.

For details please click the question mark beside the Slide-in From option mentioned above.

Icon Width

Line Spacing

Line Thickness

Line Color

Icon padding

Icon Margin

Icon Background

Border Color

Step 4

Top Item Animation in Mobile mode

Top Item Animation CSS Code

More Styles that You Want to Add

This specification and the next Top Item Animation CSS Code will specify the animation effect for the menu item links in mobile mode.

Leave this box blank if you don't need animations for the menu links.

Its value format: Animation order, duration, timing-function

  • Animation order
    • 1: The animation will start from the first link to the last
    • -1: The animation will start from the last link to the first

    The animation code that applies to the menu links.

    Here you can add any additional CSS code to customize your menu styles.

    Complete

    Congratulations! You have completed the menu customization.

    You can now click the "Download Source Code" button in this page to download the source code.

    If you need more customization that is not provided by this CSS Menu Builder, you can directly modifying the generated mcmenu.css in the download package.

    Single-level Responsive Menu:

    If you have not chosen Has Sub Menus in Step 1, the menu is single-level menu that supports the responsive feature.

    The menu HTML code contains a hamburger icon, the menu markup, and a piece of JavaScript code to support the opening/closing of the menu when the menu icon is clicked.

    View the HTML code

    Multi-level Menu:

    If you have chosen Has Sub Menus in Step 1, the menu is multi-level menu that can have unlimited level of sub-menus.

    The Multi-level Css Menu does not support the responsive feature. Please use McMenu: Responsive Menu when your menu has sub-menus and needs to be responsive.

    View the Demo HTML code :

    • To get Mega menu dropdown (as the one under the demo's Press item), just:
    • full-width ">. div >. /div>
    • To get single-column dropdown (as the one under the demo's Creative or Contact item), you can:
    • .
        .
      1. You can have nested ULs to aquire multiple-level sub-menus.
      2. If the sub-menus are under the last top-level item, you can add class red">dropdown right0" so that the drowdown will be right-aligned and fly-out to the left.

      Select the style template that best fits your needs in the customization Step 2, and then continue to next step for further customization.

      Need to right align last submenu?

      There is a pre-defined class right0 . Just add class="right0" to the last top-level LI element.



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

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

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

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

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

      1. display: inline;
      2. float: left/right;
      3. display: inline-block.
      Display: inline


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


      Blurtopia:

      Как делается
      У элементов 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.
      Пункты меню выровнены по центру


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



      Rambler:

      Как делается
      В зависимости от вида пунктов меню, устанавливаем 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.


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

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

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

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


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

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


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


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

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

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

      Для позиционирования вложенного меню относительно основного меню объявляются следующие стили:
      — для элемента списка, в который вложен выпадающий список: li ;
      — для выпадающего меню ul , а также значения left и top .

      Для наглядности и удобства форматирования добавим основному меню класс topmenu , выпадающему — submenu .

      Скрыть выпадающее меню можно несколькими способами:
      1) display: none;
      2) visibility: hidden;
      3) opacity: 0;
      4) transform: scaleY(0);
      5) с помощью библиотеки jQuery.

      See the Pen MaObbz by Elena Nazarova (@nazarelen) on CodePen.

      Способ 1.

      Выпадающее меню скрывается с помощью .submenu , при наведении показывается с помощью .topmenu li:hover .submenu .

      Способ 2.

      Меню скрывается с помощью .submenu , показывается — .topmenu li:hover .submenu .

      Способ 3.

      Меню скрывается с помощью .submenu , показывается — .topmenu li:hover .submenu . Чтобы меню не появлялось при наведении на область, где оно расположено, добавляем visibility: hidden; , а при наведении меняем на visibility: visible; .

      Способ 4.

      Меню скрывается с помощью .submenu , показывается — .topmenu li:hover .submenu . Поскольку трансформация элемента по умолчанию происходит из центра, нужно добавить для .submenu , т.е. из верхнего левого угла.

      Способ 5. С помощью jQuery

      2. 3D выпадающее меню

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

      See the Pen OyjVJZ by Elena Nazarova (@nazarelen) on CodePen.

      3. Разворачивающееся выпадающее меню с логотипом

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

      4. Увеличивающееся выпадающее меню

      Ещё один пример для выпадающего меню. Эффект увеличения при появлении меню реализуется за счет уменьшения первоначального размера .submenu , при наведении размер увеличивается до .topmenu > li:hover .submenu .

      See the Pen aNbGKv by Elena Nazarova (@nazarelen) on CodePen.

      Чтобы сделать меню адаптивным, используем медиа-запросы. В данном примере возьмем переломную точку 600 пикселей, то есть, если разрешение экрана больше 600 пикселей, меню будет горизонтальным, если меньше — то вертикальным.

      5. Подъезжающее выпадающее меню

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

      Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.

      Вертикальное меню

      Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором "navbar". Каждый элемент нашего списка будет содержать по одной ссылке:

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

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

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

      Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:

      При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса :hover.

      Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:

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

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

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

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

      Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:

      Выпадающее меню

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

      Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:

      Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.

      Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.

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

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


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

      Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).

      Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.

      В этом обзоре мы рассмотрим многоуровневые меню.

      Flat Horizontal Navigation


      Material Nav Header w/ Aligned Dropdowns


      Smooth Accordion Dropdown Menu


      Pure CSS Dark Inline Navigation Menu


      Pure CSS3 Mega Dropdown Menu With Animation



      CSS3 Dropdown Menu


      Simple Pure CSS Dropdown Menu


      Bootstrap 3 mega-dropdown menu


      Flat Navigation


      3D nested navigation


      Responsive Mega Menu — Navigation


      Pure Css3 Menu


      Full CSS3 Dropdown Menu


      Css3 only dropdown menu


      Dropdown Menus


      Pure CSS DropDown Menu


      Pull Menu — Menu Interaction Concept


      Make Simple Dropdown Menu


      Pure CSS dropdown [work for mobile touch screen]


      Dropdown Menu


      CSS 3 Dropdown Menu


      KVdKQJ (автор очень долго думал над названием)


      CSS3 Menu Dropdowns (особенное решение)!


      П.С.
      Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
      Всем приятной работы.

      Читайте также: