Как сделать горизонтальное или вертикальное выпадающее меню для сайта на основе 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.

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

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

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

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

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

            Выпадающее меню на чистом CSS / HTML

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

            Продолжение данного урока тут – 2 часть “МОБИЛЬНАЯ ВЕРСИЯ горизонтального меню”.

            See the Pen POyzbW by Denis (@Dwstroy) on CodePen.

            В уроке задействуем:

            • display: flex;
            • используем transition;
            • будем позиционировать элементы при помощи position.

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

            Первым делом напишем разметку под горизонтальное меню. Открываем свою среду разработки в моем случае это PhpStorm, создаем index.html файл,  пропишем каркас html:5, заменю lang на ru.

            Все meta удалю кроме кодировки, пропишу свой заголовок «Tom menu».

            Между body пишем тег header, а в нем блок с классом .dws-menu в котором будет находиться наше меню. Далее структура будет следующая, создадим списки в количестве пяти штук. В каждом списке будет ссылка с атрибутом href=”#”. Затем будет идти иконка I с классом .fa .fa-

            Жмем применить.

            Пропишем название пунктов меню (Главная, Продукция, Услуги, Новости, Контакты).

            Далее отбираем и подключаем иконки. Переходим на сайт Font Awesome, отберем себе иконки под данные пункты меню:

            Скачиваем архив с сайта с иконками, извлекаем его содержимое к себе на компьютер, копируем папку fonts и папку css  в свою среду разработки. 

            В папке fonts лежат шрифты иконок, а в папке css их стили. Сжатые стили можно удалить font-awesome.min, подключим не сжатый font-awesome.css.

            В  index.html подключаем иконки, и прописываем каждому пункту свой стиль иконки (home, shopping-cart, cogs, th-list, envelope-open).

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

            body{ background-image: url(“../img/ep_naturalwhite.png”); }

            Как видим у нас все отобразилось и далее приступим к описанию стилей.

            Описываем CSS стили горизонтального меню

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

            .dws-menu *{ margin: 0; padding: 0; }

            Зададим headerв 200 пик. и назначим шрифт Cuprum который можно скачать и отдельно подключить к себе на сайте, на всякий случай пропишем дополнительные шрифты.

            header{ margin: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }

            Скроем маркеры у списков:

            .dws-menu ul, .dws-menu ol{ list-style: none; }

            Списки отобразим по горизонтали при помощи display: flax, и делаем его по центру:

            .dws-menu > ul{ display: flex; justify-content: center; }

            В header сделаем отступ только сверху, пропишем margin-top.

            header{ margin-top: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }

            Оформим наше меню, зададим цвет кнопок, шрифт и т.д.

            Отбираем ссылки nav > ul li , и делаем их блочными элементами. Задаем фон меню, пропишем отступы, укажем размер, цвет, уберем подчеркивание, и сделаем заголовки заглавными буквами.

            .dws-menu > ul li a{ display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; }

            Затем позиционируем иконки, спискам присвоим position: relative; для дальнейшее центровки иконок:

            .dws-menu > ul li{ position: relative; }

            Далее отбираем иконки, позиционируем их абсолютно, отступ сверху делаем в 15 пик., с лева 12 пик, увеличим размер до 18 пик.

            .dws-menu > ul li > a i.fa{ position: absolute; top: 15px; left: 12px; font-size: 18px; }

            Назначим спискам разделитель в виде бордюрчика, отбираем первый элемент LI, задаем бордюр. Отбираем последний элемент LI присваиваем ему аналогичный бордюр.

            .dws-menu > ul li:first-child{ border-left: 1px solid #b2b3b5; } .dws-menu > ul li:last-child{ border-right: 1px solid #babbbd; }

            Делаем разделители спискам LI:

            .dws-menu > ul li{ position: relative; border-right: 1px solid #c7c8ca; }

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

            Анимируем горизонтальное меню при наведение

            Отбираем ссылки и назначаем цвет блоку, и цвет самой ссылки с иконкой присвоим белый. Давайте добавим еще темную тень. С помощью transition в 0.3 сек сделаем плавное появление:

            .dws-menu li a:hover{ background: #454547; color: #ffffff; box-shadow: 1px 5px 10px -5px black; transition: all 0.3s ease; }

            И что бы этот эффект плавно исчезал, добавим этот стиль к ссылке в покое:

            .dws-menu > ul li a{ display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; transition: all 0.3s ease; }

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

            Описываем выпадающее меню CSS / HTML

            Открываем index.html и добавим, к примеру, в продукцию дополнительное меню. Между списками LI вставляем UL, в нем разместим пять списков, в которых будут находиться ссылки с атрибутом herf=”#”.

            ul>li*5>a[href=”#”]

            Жмем применить, пропишем название пунктов (Одежда, Электроника, Продукты питания, Инструменты, Быт. химия).

            • Одежда
            • Электроника
            • Продукты питания
            • Инструменты
            • Быт. химия

            Затем открываем style.css и опишем стили подменю.

            Отбираем второй список и присвоим ему position: absolute;, зададим минимальную ширину в 150 пик.

            /*sub menu*/ .dws-menu li ul{ position: absolute; min-width: 150px; }

            Пропишем спискам border в 1 пик.

            .dws-menu li > ul li{ border: 1px solid #c7c8ca; }

            Для ссылок в подменю установим отступы в 10 пик., уберем трансформацию текста и фон сделаем на пару тонов темнее background: #e4e4e5;.

            .dws-menu li > ul li a{ padding: 10px; text-transform: none; background: #e4e4e5; }

            Затем создадим еще одно вложенное меню. Перейдем в файл разметки и к примеру в “Электронике” формируем по аналогии меню как делали мы до этого. Описываем заголовки пунктов (Камеры, Компьютеры, Телефоны) и сохраняемся.

          • Электроника
            • Камеры
            • Компьютеры
            • Телефоны
          • Они вывелись, но скрыты под основным меню, теперь position: absolute; вложенного UL и сдвинем его на 150 пик. в сторону:

            .dws-menu li > ul li ul{ position: absolute; right: -150px; top: 0; }

            Далее сделаем появление подменю при наведение на основные пункты верхнего меню, для этого добавляем display: none; и тем самым скрываем все внутренние пункты.

            /*sub menu*/ .dws-menu li ul{ position: absolute; min-width: 150px; display: none; }

            А для их появления отберем списки при наведении и отобразим их при помощи display: block;.

            .dws-menu li:hover > ul{ display: block; }

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

            • Главная
            • Продукция
              • Одежда
                • Обувь
                • Куртки
                • Брюки
              • Электроника
                • Камеры
                • Компьютеры
                • Телефоны
                  • Samsung
                  • Flf
                  • Apple
              • Продукты питания
              • Инструменты
              • Быт. химия
            • Услуги
              • Услуга 1
              • Услуга 2
              • Услуга 3
            • Новости
            • Контакты

            Затем давайте завершающим этапам оформим кнопки ингредиентом. Я пользуюсь CSS генератором,  у меня создано несколько Presets , вы можете создать свои, в моем случае я просто копирую данный код и размещаю в место background который прописывал до этого.

            .dws-menu > ul li a{ display: block; /* Permalink – use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Custom+3 */ background: #c9c9c9; /* Old browsers */ background: -moz-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#757577',GradientType=0 ); /* IE6-9 */ padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; transition: all 0.3s ease; } .dws-menu li a:hover{ /* Permalink – use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e0e1e5+0,454547+2,454547+98,e0e1e5+100 */ background: #e0e1e5; /* Old browsers */ background: -moz-linear-gradient(top, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e1e5', endColorstr='#e0e1e5',GradientType=0 ); /* IE6-9 */ color: #ffffff; box-shadow: 1px 5px 10px -5px black; transition: all 0.3s ease; }

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

            Оставить комментарий:

            Источник: https://dwstroy.ru/video/azbuka-ot-a-do-css/vypadayushchee-menyu-na-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

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

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

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

              и

            • .

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

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

                   

              • Главная
              •    

              • Новости
              •    

              • Контакты
              •    

              • О сайте

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

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

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

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

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

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

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

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

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

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

              Бесплатный видеоурок Создание Интернет-магазина на OpenCart

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

              Результат:

              Либо так:

              Результат:

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

              Бесплатный видеоурок Создание Интернет-магазина на OpenCart

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

              Результат:

              Или так:

              Результат:

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

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

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

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