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

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

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

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

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

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

  • добавляется вложенный список
      или .Для позиционирования вложенного меню относительно основного меню объявляются следующие стили:— для элемента списка, в который вложен выпадающий список: li {position: relative;};— для выпадающего меню ul {position: absolute;}, а также значения 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. {display: none;}

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

      Способ 2. {visibility: hidden;}

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

      Способ 3. {opacity: 0;}

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

      Способ 4. {transform: scaleY(0);}

      Меню скрывается с помощью .submenu {transform: scaleY(0);}, показывается — .topmenu li:hover .submenu {transform: scaleY(1);}. Поскольку трансформация элемента по умолчанию происходит из центра, нужно добавить для .submenu {transform-origin: 0 0;}, т.е. из верхнего левого угла.

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

      $(“.five li ul”).hide(); // скрываем выпадающее меню $(“.five li:has('.submenu')”).hover( function(){ $(“.five li ul”).stop().fadeToggle(300);} /* отбираем элемент списка, который содержит элемент с классом .submenu и добавляем ему функцию при наведении, которая показывает и скрывает выпадающее меню */ );

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

      Интересные эффекты можно создавать с помощью CSS3-трансформаций, например, заставить меню появляться из глубины экрана.See the Pen OyjVJZ by Elena Nazarova (@nazarelen) on CodePen.

      • Home
      • Shop
      • Blog
        • Category
        • Author
        • Archive
        • Tags
      • Portfolio
        • Category
        • Author
        • Archive
        • Tags
      • Contact

      * { box-sizing: border-box; } body { margin: 0; background: radial-gradient(#BFD6E2 1px, rgba(255,255,255,0) 2px); background-size: 10px 10px; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { display: block; text-decoration: none; outline: none; transition: .4s ease-in-out; } .topmenu { backface-visibility: hidden; background: rgba(255,255,255,.8); } .topmenu > li { display: inline-block; position: relative; } .topmenu > li > a { font-family: 'Exo 2', sans-serif; height: 70px; line-height: 70px; padding: 0 30px; font-weight: bold; color: #003559; text-transform: uppercase; } .down:after { content: “f107”; margin-left: 8px; font-family: FontAwesome; } .topmenu li a:hover { color: #E6855F; } .submenu { background: white; border: 2px solid #003559; position: absolute; left: 0; visibility: hidden; opacity: 0; z-index: 5; width: 150px; transform: perspective(600px) rotateX(-90deg); transform-origin: 0% 0%; transition: .6s ease-in-out; } .topmenu > li:hover .submenu{ visibility: visible; opacity: 1; transform: perspective(600px) rotateX(0deg); } .submenu li a { color: #7f7f7f; font-size: 13px; line-height: 36px; padding: 0 25px; font-family: 'Kurale', serif; }

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

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

      See the Pen vXBBaa by Elena (@html5book) on CodePen.

      * { box-sizing: border-box; } body { margin: 0; background: #f2f2f2; } header { background: white; text-align: center; } header a { text-decoration: none; outline: none; display: block; transition: .3s ease-in-out; } .logo { color: #D5B45B; font-family: 'Playfair Display', serif; font-size: 2.5em; padding: 20px 0; } nav { display: table; margin: 0 auto; } nav ul { list-style: none; margin: 0; padding: 0; } .topmenu:after { content: “”; display: table; clear: both; } .topmenu > li { width: 25%; float: left; position: relative; font-family: 'Open Sans', sans-serif; } .topmenu > li > a { text-transform: uppercase; font-size: 14px; font-weight: bold; color: #404040; padding: 15px 30px; } .topmenu li a:hover { color: #D5B45B; } .submenu-link:after { content: “f107”; font-family: “FontAwesome”; color: inherit; margin-left: 10px; } .submenu { background: #273037; position: absolute; left: 0; top: 100%; z-index: 5; width: 180px; opacity: 0; transform: scaleY(0); transform-origin: 0 0; transition: .5s ease-in-out; } .submenu a { color: white; text-align: left; padding: 12px 15px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.1); } .submenu li:last-child a { border-bottom: none; } .topmenu > li:hover .submenu { opacity: 1; transform: scaleY(1); }

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

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

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

      • Home
      • Shop
      • Blog
        • Category
        • Author
        • Archive
        • Tags
      • Portfolio
        • Category
        • Author
        • Archive
        • Tags
      • Contact

      * { box-sizing: border-box; } body { margin: 0; background: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png) } nav { background: white; } nav ul { list-style: none; margin: 0; padding: 0; } nav a { text-decoration: none; outline: none; display: block; transition: .4s ease-in-out; } .topmenu { text-align: center; padding: 10px 0; } .topmenu > li { display: inline-block; position: relative; } .topmenu > li:after { content: “”; position: absolute; right: 0; width: 1px; height: 12px; background: #d2d2d2; top: 16px; box-shadow: 4px -2px 0 #d2d2d2; transform: rotate(30deg); } .topmenu > li:last-child:after { background: none; box-shadow: none; } .topmenu > li > a { padding: 12px 26px; color: #767676; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; font-family: 'Exo 2', sans-serif; } .topmenu li a:hover { color: #c0a97a; } .submenu { position: absolute; left: 50%; top: 100%; width: 210px; margin-left: -105px; background: #fafafa; border: 1px solid #ededed; z-index: 5; visibility: hidden; opacity: 0; transform: scale(.8); transition: .4s ease-in-out; } .submenu li a { padding: 10px 0; margin: 0 10px; border-bottom: 1px solid #efefef; font-size: 12px; color: #484848; font-family: 'Kurale', serif; } .topmenu > li:hover .submenu { visibility: visible; opacity: 1; transform: scale(1); }

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

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

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

      • Home
      • Shop
      • Blog
        • Category
        • Author
        • Archive
        • Tags
      • Portfolio
        • Category
        • Author
        • Archive
        • Tags
      • Contact

      Источник: https://html5book.ru/vypadayushee-menu/

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

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

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

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

      Навигация по странице:

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

      У всех браузеров, которые запущенные с ПК или ноутбука, в CSS доступно свойство :hover (тут я малость неправ, это псевдокласс 

      Источник: https://help-wp.ru/vertikalnoe-vypadayushhee-menu/

      Создаем выпадающее меню на чистом CSS

      В сегодняшней статье я хотел бы рассказать, как создать на CSS2.1 и HTML выпадающее меню. Также я покажу один небольшой трюк, при помощи которого можно будет добавлять иконку «+» к элементам навигации в том случае, если в них скрыто выпадающее меню. Для этого мы воспользуемся псевдоэлементом :only-child.

      Исходный код
      Демо

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

      • Home
      • WordPress
      • Graphic Design
      • Inspiration
      • Contact
      • About

      Далее нам нужно добавить базовые CSS-стили для HTML горизонтального меню. Я оставил комментарии к каждому блоку кода:

      /* задаем цвет фона для контейнера nav. */ nav { margin: 100px 0; background-color: #E64A19; } /* убираем отступы и поля, а также list-style для “ul”, * и добавляем “position:relative” */ nav ul { padding:0; margin:0; list-style: none; position: relative; } /* применяем inline-block позиционирование к элементам навигации */ nav ul li { margin: 0px -7px 0 0; display:inline-block; background-color: #E64A19; } /* стилизуем ссылки */ nav a { display:block; padding:0 10px; color:#FFF; font-size:20px; line-height: 60px; text-decoration:none; } /* изменяем цвет фона при наведении курсора */ nav a:hover { background-color: #000000; }

      После применения стилей у нас должно получиться нечто вроде этого:

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

        внутрь элемента

      • для пункта, в котором нужно скрыть выпадающий список:
        • Home
        • WordPress
          • Themes
          • Plugins
          • Tutorials
        • Graphic Design
        • Inspiration
        • Contact
        • About

        Мы добавили новый неупорядоченный список с тремя пунктами списка внутрь второго элемента

      • , который отвечает за пункт меню WordPress. Обратите внимание на то, что мы добавили
          после анкорного тега ().Теперь добавим CSS-стили, чтобы выпадающий список был скрыт по умолчанию, и появлялся, когда посетитель наводит курсор мыши на соответствующий родительский элемент HTML меню для сайта. После приведенного выше CSS-кода добавьте следующий фрагмент:/* скрываем выпадающие списки по умолчанию * и задаем абсолютное позиционирование */ nav ul ul { display: none; position: absolute; top: 100%; } /* отображаем выпадающий список при наведении */ nav ul li:hover > ul { display:inherit; } /* первый уровень выпадающего списка */ nav ul ul li { min-width:170px; float:none; display:list-item; position: relative; }Если до этого момента вы все делали правильно, то при наведении курсора на пункт меню «WordPress» должны увидеть выпадающий список с тремя другими пунктами («Themes», «Plugins», «Tutorials»):Чтобы добавить выпадающие списки, состоящие из нескольких уровней, этот процесс нужно повторить. Определяем пункт меню, из которого нужно сделать выпадающий список, и добавляем новый

            между тегами .Взгляните на приведенный ниже HTML-код, в котором мы добавляем второй уровень выпадающего списка к пункту меню «Tutorial», который находится внутри пункта «WordPress»:

            • Home
            • WordPress
              • Themes
              • Plugins
              • Tutorials
                • Stuff
                • Things
                • Other Stuff
            • Graphic Design
            • Inspiration
            • Contact
            • About

            Чтобы вертикальное меню HTML отображалось корректно, нужно добавить еще пару строк CSS кода:

            /* второй, третий и последующие уровни * смещаем 2 и 3 уровни влево * на значение длины первого уровня. */ nav ul ul ul { position: absolute; top:0; left:100%; }

            Если все сделано правильно, у вас должно получиться нечто вроде этого:

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

            Добавляем индикатор выпадающего списка

            Перед тем, как сделать выпадающее меню в HTML до конца, разберемся с индикатором, который указывает на наличие выпадающего списка, прикрепленного к тому или иному пункту меню (знак «+»):

            /* измените ' +' на любой другой символ, если нужно */ li > a:after { content: ' +'; } li > a:only-child:after { content: ''; }

            Для этого мы используем псевдоэлемент CSS3 (:only-child). В данном случае он проверяет, имеются ли в тегах

          • родительского элемента другие элементы. Если нет, то знак плюса просто убирается, так как по умолчанию он присутствует рядом со всеми пунктами. Видите + возле пунктов WordPress и Tutorials?

            Значит, вы все сделали правильно.

            В завершение

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

            А как вы сделали меню на HTML? Пожалуйста, расскажите об этом в комментариях.

            Перевод статьи “How to Create a Pure CSS Dropdown Menu” был подготовлен дружной командой проекта Сайтостроение от А до Я.

          • Источник: http://www.internet-technologies.ru/articles/sozdaem-vypadayuschee-menyu-na-chistom-css.html

            Как сделать горизонтальное или вертикальное выпадающее меню для сайта на основе CSS и Html в онлайн сервисе, создание, продвижение и заработок на сайте

            >

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

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

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

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

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

            Меню для сайта на CSS в онлайн сервисе

            Зайдя на онлайн сервис PureCSSMenu нужно будет в первую очередь определиться с шаблоном. Вам предлагается выбор из пяти горизонтальных и трех вертикальных шаблонов. Для выбора вы должны перейти на страницу шаблонов, нажав на вкладку «Templates» в левой колонке окна мастера:

            Щелкните по любому из шаблонов и вы увидите в области «Preview», как будет выглядеть меню, созданное на его основе с использованием одного лишь CSS (таблиц каскадных стилей).

            Посмотрите как оно работают и прикиньте, какой шаблон, на ваш взгляд, наилучшим образом подойдет к дизайну вашего сайта. Учтите, что цветовое оформление, а так же размер, тип и начертание шрифта можно будет поменять на вкладке «Parameters»:

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

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

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

            Теперь можно переходить к созданию структуры, перейдя на вкладку «Items». В открывшемся окне мастера вам представится возможность:

            1. создавать новые пункты (как вложенные, так и не вложенные)
            2. удалять уже существующие пункты выпадающего меню
            3. удалить все пункты одновременно (очистка)
            4. задать надпись для каждого пункта
            5. повесить ссылку на каждый пункт
            6. прописать для этой ссылки атрибут Title (может пригодится, если в качестве анкора используется изображение)
            7. настроить способ открытия страницы при переходе по данному пункту (в этом же окне или в новом окне браузера)

            Для того, чтобы удалить все демонстрационные пункты меню, вы можете нажать на кнопку под названием «Clear» с изображением мусорного бака.

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

            Для добавления вложенного пункта нажмите на кнопку под названием «Add Subitem», при этом должен быть выбран в окне мастера тот пункт меню, в котором вы хотите создать вложенный. Ну, а кнопка под названием «Remove Item» служит для удаления выбранного в текущий момент.

            Для каждого созданного пункта вы должны заполнить поля в области «Item Parameters».

            1. в поле «Text» должны вписать текст
            2. в поле «Link» должны вписать Урл страницы, на которую должен будет осуществиться переход
            3. в поле «Tip» можете, при желании, указать содержимое атрибута TITLE тега ссылки A . Содержимое тега TITLE будет видно, если подвести указатель мыши к ссылке
            4. в поле «Target» из выпадающего списка вы можете выбрать способ открытия страницы, ссылку на которую вы прописали для данного пункта горизонтального или вертикального меню. Если вы оставите значение по умолчанию «_self», то при его выборе посетителем вашего сайта, страница откроется в этом же окне браузера. Если вы хотите, чтобы страница открывалась в новом окне браузера, то нужно будет выбрать из выпадающего списка вариант «_blank»

            Вставка созданного меню в шаблон сайта

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

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

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

            html , в котором находится код с описанием стилей (его нужно будет скопировать в файл CSS используемого вами шаблона оформления для вашего сайта) и код HTML с описанием пунктов созданного меню, который нужно будет вставить в нужное место файла шаблона вашего ресурса.

            Я пробовал вставлять горизонтальное выпадающее меню на данный блог (http://ktonanovenkogo.ru), который работает на WordPress, но оно будет прекрасно работать и на любом другом интернет проекте.

            Нужно будет только правильно выбрать место для вставки и прописать код стилей в файле CCS используемого вами шаблона оформления.

            Расскажу на примере структуры темы оформления WordPress (читайте про темы и шаблоны движка Вордпресс).

            Переносим стили оформления меню на свой сайт

            Откройте файл с кодом purecssmenu.html и скопируйте код CSS стилей, который заключен между Html тегами Style, при этом сами открывающий и закрывающий Html теги Style (здесь про них и таблицы каскадных стилей читайте подробнее) копировать не надо.

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

            В случае с WordPress это будет файл /wp-content/themes/название-вашей-темы-оформления/style.css . Чтобы узнать путь к используемому у вас на сайте файлу style.css, вы можете посмотреть исходный код страницы вашего ресурса и найти в верхней его части (между открывающим и закрывающим Html тегом Head) строку:

            Источник: http://psn-travel.ru/internet-novichku/kak-sdelat-gorizontalnoe-ili-vertikalnoe-vypadayushhee-menyu-dlya-sajta-na-osnove-css-i-html-v-onlajn-servise-sozdanie-prodvizhenie-i-zarabotok-na-sajte

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

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

            У меня на сайте оно выглядит так, при наведении мыши на пункт меню «О блоге» выпадает вертикальное подменю:

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

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

            • Главная
            • О блоге
              • Об авторе
              • История блога
              • Политика конфиденциальности
              • Отказ от ответственности
            • Карта сайта
            • Обратная связь

            Это классический вариант по структуре меню из комбинаций тегов UL и LI. Который встречается на большинстве сайтов в интернете, в том числе и WordPress.

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

            /*| Navigation |*/ nav{ background: #334; /* Задаем основной фон меню */ padding: 0 3%; /* Задаем внутренние отступы */ } nav ul { list-style: none; /* Убираем маркер для элементов списка */ } nav ul li { display:inline-block;/*Выстраиваем пункты меню в ряд по горизонтали */ } nav ul li a { display:block; /* Настраиваем оформление пунктов меню */ padding: 15px 20px; font-size: .9em; color: #eee; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; border-top: 1px solid #445; } nav ul li:hover { background: #445; /* Меняем фон пункта меню при наведении указателя мыши */ } nav ul li ul { display: none; /* Прячем пункты выпадающего блока меню */ position:absolute; background: #334; /* Задаем фон выпадающего блока меню */ } nav ul li:hover ul { display:block; /* Отображаем подменю при наведении мыши */ } nav ul li ul li { display:block; /* Выстраиваем по вертикали пункты выпадающего меню */ }

            Выводы о реализации меню на CSS и HTML

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

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

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

            Рекомендую прочесть:  Как красиво оформить цитаты на CSS

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

            Поделись этой страницей с друзьями!

            Источник: https://moonback.ru/page/html-css-drop-down-menu

            Выпадающее меню на HTML и CSS

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

            Стили подходить под произвольное количество уровней вложенности. Хоть два хоть десять уровней. Код при этом остаётся тем же.

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

            Сначала сделаем HTML разметку для меню. Принято делать меню списком. Это не стандарт просто так сложилось. 

            1. пункт 1
            2. пункт 1.1
            3. пункт 1.2
            4. пункт 2
            5. пункт 2.1 многа букаф
            6. пункт 2.2
            7. пункт 2.2.1
            8. пункт 2.2.2
            9. пункт 3
            10. пункт 4
            11. пункт 5

            HTML файл мы больше трогать не будем. Все дальнейшие изменения производятся только за счёт CSS. Первое что нам нужно сделать – скрыть вложенные пункты.

            ul.nav li ul {display: none;}

            Ещё нужно убрать маркеры но это дело вкуса.

            ul.nav li {list-style: none;}

            Чтобы вложенные пункты появлялись при наведении на родительский пункт используем псевдокласс :hover, при этом нужно сделать так что бы появлялись только пункты первого уровня вложенности. Для этого используем знак >

            ul.nav li:hover > ul {display: block;}

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

            Благодаря псевдоклассу :hover, при наведении курсора на пункт меню, он же элемент списка li, для первого вложенного списка ul значение display станет block. Так открывается первый уровень вложенности.

            Если на этом уровне есть пункты содержащие подпункты, то при наведении на них также откроется только один вложенный уровень.

            С основной механикой разобрались. Осталось переопределить место где будут появляться вложенные пункты. Для этого воспользуемся свойством position: absolute.

            При таком позиционировании отсчёт координат ведётся от края окна браузера если только для родительского элемента не задано свойство position с значением fixed, relative или absolute.

            В этом случае отсчёт ведётся от края родительского элемента.

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

            1. /* Вертикальное выпадающее меню*/
            2. body{
            3. background: #DCDCDC;
            4. }
            5. /*блок меню*/
            6. ul{
            7. margin: 0;
            8. padding: 0;
            9. }
            10. ul.nav li {
            11. background: #B3B3FF;
            12. border: 1px solid #FFFFFF;
            13. list-style: none;
            14. width: 150px; /*ширина блока меню*/
            15. }
            16. ul.

              nav li a {

            17. text-decoration: none;
            18. display: block;
            19. padding: 5px 5px 5px 15px;
            20. }
            21. ul.nav li ul {
            22. display: none; /*скрываем вложенные пункты*/
            23. }
            24. /*Выпадающее меню*/
            25. ul.

              nav li:hover {

            26. /* позиционирование вложенных элементов
            27.   * будет расчитыватьться относительно
            28.   * родительского элемента
            29.   */
            30. position: relative;
            31. background: yellow;
            32. }
            33. ul.nav li:hover > ul {
            34. display: block;
            35. }
            36. ul.

              nav li:hover ul{

            37. position: absolute;
            38. top: 0; /*Задаём координаты для вложенных пунктов*/
            39. left: 150px; /*меню раскрывается вправо*/
            40. }

            Вот что должно получиться в результате. демка

            Для горизонтального меню мы будем так же применять позиционирование но есть несколько нюансов. Что бы сделать меню горизонтальным используем свойство float.

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

            Для этого вложенное меню позиционируем относительно списка а не родительского пункта и задаём для него ширину.

            1. /*Горизонтальное выпадающее меню с одним уровнем вложенности*/
            2. body{
            3. background: #DCDCDC;
            4. }
            5. /* Блок меню*/
            6. ul{
            7. margin: 0;
            8. padding: 0;
            9. }
            10. ul.

              nav li {

            11. background: #B3B3FF;
            12. border-right: 1px solid #FFFFFF;
            13. float: left; /*делаем меню горизонтальным*/
            14. height: 30px;
            15. list-style: none;
            16. }
            17. ul.nav li a {
            18. text-decoration: none;
            19. display: block;
            20. padding: 5px 5px 5px 15px;
            21. }
            22. ul.

              nav li ul {

            23. display: none; /*скрываем вложенные пункты*/
            24. }
            25. ul.nav li:hover {
            26. background: yellow;
            27. }
            28. /*Выпадающее меню*/
            29. ul.nav {
            30. position: relative;
            31. background: #B3B3FF;
            32. height: 30px;
            33. width: 600px;
            34. }
            35. ul.

              nav li:hover > ul {

            36. background: #D0E0FF;
            37. border-top: 1px solid white;
            38. display: block;
            39. width: 600px;
            40. position: absolute;
            41. top: 30px;
            42. left: 0;
            43. }

            Вот что получиться в итоге демка.

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

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

            В этом меню мы возьмём понемногу от предыдущих и немного добавим нового.

            1. /*Горизонтальное выпадающее меню a*/
            2. body{
            3. background: #DCDCDC;
            4. }
            5. /* Блок меню*/
            6. ul{
            7. margin: 0;
            8. padding: 0;
            9. }
            10. ul.

              nav li {

            11. background: #B3B3FF;
            12. border-right: 1px solid #FFFFFF;
            13. float: left; /*делаем меню горизонтальным*/
            14. height: 30px;
            15. list-style: none;
            16. }
            17. ul.nav li a {
            18. text-decoration: none;
            19. display: block;
            20. padding: 5px 5px 5px 15px;
            21. }
            22. ul.

              nav li ul {

            23. display: none; /*скрываем вложенные пункты*/
            24. }
            25. ul.nav { /*задаём высоту и ширину меню*/
            26. background: #B3B3FF;
            27. height: 30px;
            28. width: 600px;
            29. }
            30. /*Выпадающее меню*/
            31. ul.nav li:hover {
            32. background: yellow;
            33. position: relative;
            34. }
            35. ul.

              nav li:hover > ul {

            36. border-top: 1px solid white;
            37. display: block;
            38. position: absolute;
            39. top: 30px; /*первый уровень меню раскрывается вниз*/
            40. left: 0;
            41. }
            42. /*Второй и последующие уровни вложенности*/
            43. ul.

              nav li ul li{

            44. border-bottom: 1px solid white;
            45. height: auto;
            46. width: 150px;
            47. }
            48. ul.nav li:hover ul li ul{
            49. position: absolute;
            50. top: 0;
            51. left: 150px; /*второй и последующие уровни расскрываются вправо*/
            52. }

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

            Источник: https://webonlife.ru/sozdanie-sayta/vypadayushchee-menyu-na-html-i-css

            html список горизонтальный или горизонтальное меню с помощью CSS

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

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

              и

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

              • Главная
              •    

              • Новости
              •    

              • Контакты
              •    

              • О сайте

              Для того чтобы идентифицировать список и задать для него нужные css стили, я добавил к нему атрибут id с идентификатором “menu”.

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

              • Главная
              • Новости
              • Контакты
              • О сайте

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

              Если же требуется получить горизонтальное меню, то просто необходимо расположить элементы списка по горизонтали. Для этого к селектору LI следует добавить стилевое свойство display со значением inline или inline-block. Я буду использовать правило display:inline-block. Итак, для того, чтобы элементы списка выстроились по горизонтали просто добавляем код CSS:

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

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

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

              Вообще внешний вид меню далее зависит только от вашей фантазии и знания свойств css. Далее для примера приведу несколько вариантов оформления меню.

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

              JavaScript, jQuery и Ajax все сразу в одном видеокурсе!

              Выравнять меню по центру можно так:

              Результат:

              Либо так:

              Результат:

              Горизонтальное меню с пунктами одинаковой ширины

              JavaScript, jQuery и Ajax все сразу в одном видеокурсе!

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

              Результат:

              Или так:

              Результат:

              Если добавить немного трансформации:

              то получим меню со скошенными углами:

              Источник: http://webcodius.ru/recepty-dlya-sajta/kak-razmestit-elementy-spiska-gorizontalno-ili-gorizontalnoe-menyu-s-pomoshhyu-css.html

              Видеоурок 1. Выпадающее меню с помощь html и css

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

              Ну дело вроде пустяковое, думал по быстрому сделаю и получу оплату, но не тут то было =) Сначала я решил взять код html и css из каких ни будь подобных уроков и все скопировать, то есть сделать по шаблону.

              Но после того, как я обнаружил что на многих блогах код дают не правильный – не рабочий, я решил все сделать сам… И все оказалось достаточно просто и быстро. Покажу вам html и css код выпадающего меню – рабочий 🙂 Также рекомендую узнать, как сделать выпадающее меню на WordPress сайте.

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

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

                        

              • Подменю 1             
                                  

                • Пункт подменю 1
                •                 

                • Пункт подменю 2
                •                 

                • Пункт подменю 3
                •             

                        

              • Подменю 2                 
                                      

                • Пункт подменю 1
                •                     

                • Пункт подменю 2
                •                     

                • Пункт подменю 3
                •                 

                            

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

              Вот такое меню можно сделать моим способом…

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

              #mymenu {     float: left;     width: 100%;     margin: 20px 10px;     list-style: none; } #mymenu li {     float: left;     width: auto;     padding: 0 10px;     font-size: 18px; } #mymenu li ul {     display: none;     width: 200px; } #mymenu li:hover ul {     display: block;     position: absolute;     list-style: none;     margin: 0;     padding: 0; } #mymenu li ul li {     float: left;     width: 200px;     padding: 5px 0;     font-size: 14px; }

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

              А вот и вертикальное выпадающее меню для вашего сайта

              #mymenu { float: left; width: 150px; height: auto; margin: 20px 10px; list-style: none; } #mymenu li { display: block !important; width: auto; padding: 0 10px; font-size: 18px; } #mymenu li ul { display: none; width: 200px; } #mymenu li:hover ul { display: block; list-style: none; margin: 0 0 0 0px; padding: 0; } #mymenu li ul li { float: left; width: 200px; padding: 5px 0; font-size: 14px; }

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

              #mymenu li:hover ul { display: block; list-style: none; margin: 0 0 0px 100px; position: absolute; padding: 0; }

              Выпадающее меню для сайта

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

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

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

              Если у вас код откажется работать – пишите в комментарии, подправлю вам лично 🙂

              Удачной работы! 😉

              Участвуй в развитии блога и сообщества

              Подписывайтесь и получайте полезные статьи на почту!

              Источник: http://www.onwordpress.ru/menu-html-css.html

              Горизонтальное выпадающее меню на чистом css!

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

              Далее создаем файл стилей с самым простым reset для обнуления отступов (об этом подробно я писал здесь) и подключаем его (файл стилей) к нашему недавно созданному  файлу с  html структурой используя  тег link :

              Так как мой файл стилей находится в той же папке что и index.html и назвал я его style.css в атрибутне href у меня следующий путь к файлу:   href=»style.css» .

              В итоге вы должны получить:

              1. Два файла, один с расширением html, а второй с расширением css, у меня они называются  index.html и style.css.

              2. В файле index.html должна быть прописана структура с подключением таблицы стилей:

              3  В файле style.css должен быть прописан простой ресет код для обнуления стилей:

              re

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

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

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

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

                 

                        

              • Пункт меню 1
              •         

              • Пункт меню 2
              •         

              • Пункт меню 3
              •         

              • Пункт меню 4
              •         

              • Пункт меню 5
              •     

              Как видите помимо обычного списка я еще добавил в каждый пункт ссылку, а также присвоил для нашего списка класс .navigation .

              Пока что в браузере это выглядит таким образом.

              Никаких стилей, да еще и отступов совсем нет, так как мы их обнулили для всех элементов используя reset.

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

                 

                        

              • Пункт меню 1
              •         

              • Пункт меню 2
              •         

              •             Пункт меню 3             
                                  

                • подпункт меню 1
                •                 

                • подпункт меню 2
                •                 

                • подпункт меню 3
                •                 

                • подпункт меню 4
                •                 

                • подпункт меню 5
                •             

                        

              •         

              • Пункт меню 4
              •         

              • Пункт меню 5
              •     

              Здесь, как вы наверняка заметили, для вложенного ul элемента я добавил класс .sub-menu. Забегая на перед скажу, что от него можно было бы отказаться, но я обычно добавляю такого рода класс, чтобы в будущем  легче  было читать css стили.

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

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

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

              Пишем стили для выпадающего меню

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

              Шаг 1. Убираем маркеры в списка.

              ul{     list-style:none; }

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

              Шаг 2. Стилизуем .navigation.

              ul.navigation{     width:960px;     margin:30px auto;     background:#5389a5; }

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

              Шаг 3. Выравниваем пункты списка по левому краю.

              .navigation li{     float:left; }

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

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

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

              Шаг 4. Добавляем класс .clearfix для очистки потока.

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

              .clearfix:after{     content:'';     display:block;     clear:both; }

              В нашем случаи класс .clearfix нужно добавить к блоку с классом .navigation, вот такая у нас получится итоговая структура:

                        

              • Пункт меню 1
              •         

              • Пункт меню 2
              •         

              •             Пункт меню 3             
                                  

                • подпункт меню 1
                •                 

                • подпункт меню 2
                •                 

                • подпункт меню 3
                •                 

                • подпункт меню 4
                •                 

                • подпункт меню 5
                •             

                        

              •         

              • Пункт меню 4
              •         

              • Пункт меню 5
              •     

              Шаг 5. Стилизуем  ссылки.

              .navigation li a{     display:block;     font:16px/1.2em Tahoma, sans-serif;     color:#fff;     padding:10px 15px;     text-decoration:none; }

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

              Пока все выглядит так себе, ну мы же не закончили

              Источник: https://webmox.ru/gorizontalnoe-vypadayushhee-menyu-na-chistom-css.html

  • Ссылка на основную публикацию