Как сделать меню всплывающее в html: Как сделать всплывающее меню при наведении

03.01.1970 Разное

Содержание

Как Создать Выпадающее Меню CSS

Введение

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

Нужен недорогой, но надёжный хостинг для вашего нового проекта? Обратите внимание, что в Hostinger действуют скидки на все тарифы хостинга. Воспользуйтесь предложением и разместите сайт до 90% дешевле!

К предложению

Что вам понадобится

Перед тем, как мы начнем это руководство, вам понадобится следующее:

Доступ к контрольной панели вашего хостинга

Шаг 1 — Создание HTML-файла

Во-первых, вам нужно создать пустой HTML-файл. В этом руководстве мы создадим новый файл под названием menu.html. Для этого мы будем использовать Файловый менеджер. Однако тот же результат может быть достигнут с использованием FTP-клиента (создайте файл menu.html на вашем компьютере и загрузите его на ваш хостинг).

Шаг 2 — Добавление кода HTML меню

Наше меню будет сделано из одного родительского элемента под названием Главное меню и пяти подразделов. Изменяя адрес внутри атрибута href, вы можете связать каждый подраздел с разными страницами вашего сайта. Вы наверное заметили, что каждый элемент имеет разный класс — dropdown, mainmenubtn и dropdown-child. Классы необходимы для применения правил CSS.

<div>
  <button>Главное меню</button>
  <div>
    <a href="http://www.вашдомен.ru/page1.html">Подраздел 1</a>
    <a href="http://www.вашдомен. ru/page2.html">Подраздел 2</a>
    <a href="http://www.вашдомен.ru/page3.html">Подраздел 3</a>
    <a href="http://www.вашдомен.ru/page4.html">Подраздел 4</a>
    <a href="http://www.вашдомен.ru/page5.html">Подраздел 5</a>
  </div>
</div>

Вот, как это выглядит без применения каких-либо CSS-правил:

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

Шаг 3 — Как создать выпадающее меню CSS

Мы стилизуем наш HTML код используя следующие CSS правила:

.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}

.mainmenubtn:hover {
    background-color: red;
    }
    
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
. dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}

Как вы видите, класс

.dropdown-child имеет CSS правило display: none. Однако, как только пользователь проведет курсором (.dropdown:hover) по родительскому элементу, это правило изменит его отображение на display: block. Это и создаст эффект выпадающего меню.

Ниже представлен финальный результат нашего файла menu.html:

<html>
<head>
<style>
.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
.dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.  dropdown:hover .dropdown-child {
    display: block;
}
</style>
</head>
<body>
<div class="dropdown">
  <button class="mainmenubtn">Главное меню</button>
  <div class="dropdown-child">
    <a href="http://www.вашдомен.ru/page1.html">Подраздел 1</a>
    <a href="http://www.вашдомен.ru/page2.html">Подраздел 2</a>
    <a href="http://www.вашдомен.ru/page3.html">Подраздел 3</a>
    <a href="http://www.вашдомен.ru/page4.html">Подраздел 4</a>
    <a href="http://www.вашдомен.ru/page5.html">Подраздел 5</a>
  </div>
</div>
</body>
</html>

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

Как только вы закончите, финальный результат должен быть похож на это:

Не бойтесь экспериментировать c CSS стилем, изменяя цвета и размер.

Адаптируйте меню под ваши нужды.

Заключение

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

грамотная навигация сайта с помощью стилей

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

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

Общий шаблон пользовательского интерфейса, который мы видим в Интернете, — это выпадающие меню.

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

Поиск в Google по запросу «выпадающее меню» предоставляет много примеров

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

<nav role=»navigation»> <ul> <li><a href=»#»>One</a></li> <li><a href=»#»>Two</a></li> <li><a href=»#»>Three</a></li> </ul> </nav>

<ul>

<li><a href=»#»>Three</a></li>

</ul>

</nav>

Теперь, предположим, мы хотим создать выпадающее подменю во втором элементе навигации. Мы можем сделать то же самое и включить список ссылок в этом элементе списка:

<nav role=»navigation»> <ul> <li><a href=»#»>One</a></li> <li><a href=»#»>Two</a> <ul> <li><a href=»#»>Sub-1</a></li> <li><a href=»#»>Sub-2</a></li> <li><a href=»#»>Sub-3</a></li> </ul> </li> <li><a href=»#»>Three</a></li> </ul> </nav>

<ul>

<ul>

</ul>

</li>

<li><a href=»#»>Three</a></li>

</ul>

</nav>

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

li { display: block; transition-duration: 0.5s; } li:hover { cursor: pointer; } ul li ul { visibility: hidden; opacity: 0; position: absolute; transition: all 0.5s ease; margin-top: 1rem; left: 0; display: none; } ul li:hover > ul, ul li ul:hover { visibility: visible; opacity: 1; display: block; } ul li ul li { clear: both; width: 100%; }

li {

display: block;

transition-duration: 0.

5s;

}

li:hover {

cursor: pointer;

}

ul li ul {

visibility: hidden;

opacity: 0;

position: absolute;

transition: all 0.5s ease;

margin-top: 1rem;

left: 0;

display: none;

}

ul li:hover > ul,

ul li ul:hover {

visibility: visible;

opacity: 1;

display: block;

}

ul li ul li {

clear: both;

width: 100%;

}

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

Проблема

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

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

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

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

К счастью, у нас есть новый псевдо-класс CSS, который даст нам именно то, что нам нужно в этом случае, и он называется :focus-within.

Решение: «:focus-inside»

Псевдо-селектор :focus-within является частью CSS Selectors Level 4 Spec и указывает браузеру применить стиль к родительскому объекту, когда какой-либо из его дочерних элементов выделен фокусом. В нашем случае это означает, что мы можем перейти к Sub-One и применить стиль :focus-within, а также стиль :hover для родительского элемента и увидеть, где именно находится выпадающий список навигации. В нашем случае это будет ul li:focus-within > ul:

ul li:hover > ul, ul li:focus-within > ul, ul li ul:hover { visibility: visible; opacity: 1; display: block; }

ul li:hover > ul,

ul li:focus-within > ul,

ul li ul:hover {

visibility: visible;

opacity: 1;

display: block;

}

Замечательно! Это работает!

Теперь, когда мы перемещаем фокус ко второму элементу, наше подменю всплывает, и, когда мы входим в подменю, оно остается видимым! Теперь мы можем добавить наш код, чтобы включить: состояния :focus весте с состоянием :hover, чтобы предоставить пользователям клавиатуры тот же опыт, что получают пользователи мыши.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

a:hover, a:focus { … }

a:hover,

a:focus {

…

}

Но в данном случае, поскольку мы применяем стили hover на основе родительского li, мы можем снова использовать :focus-within, чтобы получить тот же вид, что и при переходе с помощью табуляцию. Это связано с тем, что мы не можем выделить фокусом li (если не добавим tabindex=«0»). Мы фактически выделяем фокусом ссылку (а) внутри него. :focus-within позволяет нам применять стили к родительскому li, когда фокусом выделена ссылка (довольно круто!):

li:hover, li:focus-within { … }

li:hover,

li:focus-within {

. ..

}

На данный момент, поскольку мы применяем стиль фокуса, мы можем сделать то, что обычно не рекомендуется (удалите стиль фокуса — этот синий контур). Мы можем сделать это:

li:focus-within a { outline: none; }

li:focus-within a {

outline: none;

}

Вышеприведенный код указывает, что когда мы выделяем фокусом элемент внутри списка через ссылку (a), к элементу ссылки (a) не применяется контур. Это довольно безопасно, потому что мы задаем стили исключительно для состояния наведения курсора, и в браузерах, которые не поддерживают :focus-within, ссылка по-прежнему будет выделена контуром. Теперь наше меню выглядит так:

Окончательное меню со стилями для состояний :focus-within, :hover и удаленным контуром при выделении фокусом

Что насчет ARIA?

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

<nav role=»navigation»> <ul> <li><a href=»#»>One</a></li> <li><a href=»#» aria-haspopup=»true»>Two</a> <ul aria-label=»submenu»> <li><a href=»#»>Sub-1</a></li> <li><a href=»#»>Sub-2</a></li> <li><a href=»#»>Sub-3</a></li> </ul> </li> <li><a href=»#»>Three</a></li> </ul> </nav>

<ul>

</ul>

</li>

<li><a href=»#»>Three</a></li>

</ul>

</nav>

Вы добавляете aria-haspopup=»true» к родительскому выпадающему меню, чтобы указать альтернативное состояние, включая aria-label=»submenu» для самого выпадающего меню (в нашем случае наш список с class=»dropdown»).

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

Поддержка браузерами

Говоря о возможных сложностях, давайте рассмотрим поддержку браузерами. Хотя :focus-within довольно неплохо поддерживается браузерами, стоит отметить, что Internet Explorer и Edge не поддерживают его, поэтому ваши пользователи на данных платформах не смогут увидеть меню.

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

Окончательным решением здесь будет использование как разметки ARIA, так и CSS :focus-within.

Автор: Una Kravets

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Выпадающее меню на HTML / CSS без использования JavaScript

Очень часто необходимо сделать на сайте выпадающее при наведении меню. Большинство веб-девелоперов используют для этого JavaScript / Jquery. Это конечно хорошо, но такого роди задачи легко решаются с помощью HTML / CSS.

Вот простой пример HTML-кода меню:

<ul>
    <li><a href=#>Menu 1</a>
        <ul>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 2</a>
        <ul>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 3</a>
        <ul>
            <li><a href=#>Sudmenu 3</a></li>
            <li><a href=#>Sudmenu 3</a></li>
            <li><a href=#>Sudmenu 3</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 4</a>
        <ul>
            <li><a href=#>Sudmenu 4</a></li>
            <li><a href=#>Sudmenu 4</a></li>
            <li><a href=#>Sudmenu 4</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 5</a>
        <ul>
            <li><a href=#>Sudmenu 5</a></li>
            <li><a href=#>Sudmenu 5</a></li>
            <li><a href=#>Sudmenu 5</a></li>
        </ul>
    </li>
</ul>

Для построения меню был использован список с классом menu. Подменю сделаны списками с классом submenu.

Теперь давайте как-нибудь минимально оформим наше меню стилями:


body {
    font: 14px 'Verdana';
    margin: 0;
    padding: 0;
}
ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul:after {
    display: block;
    content: ' ';
    clear: both;
    float: none;
}
ul.menu > li {
    float: left;
    position: relative;
}
ul.menu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.menu > li > a:hover {
    background-color: black;
}
ul.submenu {
    display: none;
    position: absolute;
    width: 120px;
    top: 37px;
    left: 0;
    background-color: white;
    border: 1px solid red;
}
ul.submenu > li {
    display: block;
}
ul.submenu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.submenu > li > a:hover {
    text-decoration: underline;
}

Для класса submenu было установлено свойство ‘display: none’. Это позволило на спрятать наше выпадающее меню.

Теперь добавим в CSS такой код:


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

Это позволит показывать подменю при наведении.

Вот и все. Просто и легко без JavaScript.

Как создать выпадающее меню с помощью HTML и CSS

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

Создание раздела навигации. Как правило, мы используем для главной панели навигации сайта тег <nav>, <header> — для более узких разделов или <div>, если нет других вариантов. Поместите этот код в элемент <div>, чтобы можно было задать стили для всего меню:

<div>
 <nav>
     </nav>
</div>

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

<div>
<nav>
</nav>
</div>

Добавьте список пунктов меню. Неупорядоченный список (<ul>) содержит пункты главного меню (<li>), на которые пользователи будут наводить курсор мыши, чтобы вывести выпадающее меню. Добавьте класс «clearfix» для элементов списка. Мы вернемся к этому позже в разделе CSS:

<div>
   <nav>
<ul>
   <li>Home</li>
              <li>Contributors</li>
         <li>Contact Us</li>
 </ul>
   </nav>
</div>

Добавление ссылок. Теперь нужно добавить ссылки на страницы соответствующих разделов. Даже если они не содержат ссылок на что-то, добавьте ссылки на несуществующий анкор (например, «#!»), чтобы курсор пользователя менял внешний вид при наведении на них. В этом примере пункт Contact Us никуда не ведет, но остальные два пункта раскрывающегося списка HTML CSS содержат ссылки на конкретные разделы:

<div>
   <nav>
      <ul>
       <li><a href="/">Home</a></li>
         <li><a href="/Contributors">Contributors</a>
         </li>
         <li><a href="#!">Contact Us</a>
         </li>
      </ul>
   </nav>
 </div>

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

<div>
   <nav>
      <ul>
         <li><a href="/">Home</a></li>
         <li><a href="/Contributors">Contributors</a>
         <ul>
            <li><a href="/jordan">Michael Jordan</a></li>
            <li><a href="/hawking">Stephen Hawking</a></li>
         </ul>
         </li>
         <li><a href="#!">Contact Us</a>
         <ul>
            <li><a href="mailto:[email protected]">Report a Bug</a></li>
            <li><a href="/support">Customer Support</a></li>
         </ul>
         </li>
      </ul>
   </nav>
</div>

Откройте CSS. Разместите ссылку на CSS стили в разделе <head> HTML-документа, если вы еще этого не сделали. В этой статье мы не будем касаться основных свойств CSS, таких как настройка шрифта и цвет фона:

Добавьте код clearfix. Помните класс «clearfix«, который мы добавили к списку меню? Как правило, элементы HTML раскрывающегося списка имеют прозрачный фон и могут раздвигать другие элементы. Несложная настройка CSS поможет исправить эту проблему. Вот простое и красивое решение, хотя оно не поддерживается в Internet Explorer 7 и более ранних версиях:

.clearfix:after {
content: "";
display: table;
}

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

.nav-wrapper {
   width:100%;
   background: #999;
}

.nav-menu {
   position:relative;
   display:inline-block;
}

.nav-menu li {
   display: inline;
   list-style-type: none;
}

.sub-menu {
   position:absolute;
   display:none;
   background: #ccc;
}

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

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

Если пункты древовидного раскрывающегося списка HTML меню ведут к дополнительным подчиненным выпадающим меню, то любые свойства, добавляемые здесь, будут влиять на них. Если вы хотите задать стиль только для выпадающих меню первого уровня, используйте вместо этого «.nav-menu > ul«:

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

.nav-menu > ul > li:after {
   content: "25BC"; /*escaped unicode for the down arrow*/
   font-size: .5em;
   display: inline;
   position: relative;
   }

Изменить положение стрелки можно с помощью свойств up, bottom, right или left.

Если не все пункты раскрывающегося списка HTML содержат вложенные выпадающие меню, не задавайте стиль для всего класса nav-menu. Вместо этого добавьте еще один класс (например, dropdown) для каждого элемента li, к которому нужно добавить стрелку. Укажите этот класс, а не приведенный в коде выше:

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

Если вы хотите добавить выпадающее меню в форму, HTML 5 позволяет легко сделать это с помощью элемента ;
Ссылка <a href=»#»> прокручивает страницу вверх, в то время как ссылка на несуществующий анкор, такая как <a href=»#!»>, не будет прокручивать страницу. Если это кажется вам не слишком аккуратным, то можно изменить внешний вид курсора с помощью CSS.

Данная публикация является переводом статьи «How to Create a Dropdown Menu in HTML and CSS» , подготовленная редакцией проекта.

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

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

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

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

<nav>
			    <ul>
			        <li><a href="#">Home</a></li>
			        <li><a href="#">WordPress</a></li>
			        <li><a href="#">Graphic Design</a></li>
			        <li><a href="#">Inspiration</a></li>
			        <li><a href="#">Contact</a></li>
			        <li><a href="#">About</a></li>
			    </ul>
			</nav>

Далее нам нужно добавить базовые 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 меню, нам нужно добавить <ul> внутрь элемента <li> для пункта, в котором нужно скрыть выпадающий список:

<nav>
			    <ul>
			        <li><a href="#">Home</a></li>
			        <li><a href="#">WordPress</a>
			
			            <!-- первый уровень выпадающего списка -->
			            <ul>
			                <li><a href="#">Themes</a></li>
			                <li><a href="#">Plugins</a></li>
			                <li><a href="#">Tutorials</a></li>
			            </ul>
			
			        </li>
			        <li><a href="#">Graphic Design</a></li>
			        <li><a href="#">Inspiration</a></li>
			        <li><a href="#">Contact</a></li>
			        <li><a href="#">About</a></li>
			    </ul>
		</nav>

Мы добавили новый неупорядоченный список с тремя пунктами списка внутрь второго элемента <li>, который отвечает за пункт меню WordPress. Обратите внимание на то, что мы добавили <ul> после анкорного тега (<a>).

Теперь добавим 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»):

Чтобы добавить выпадающие списки, состоящие из нескольких уровней, этот процесс нужно повторить. Определяем пункт меню, из которого нужно сделать выпадающий список, и добавляем новый <ul> между тегами <li></li>.

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

<nav>
			    <ul>
			        <li><a href="#">Home</a></li>
			        <li><a href="#">WordPress</a>
			
			            <!-- первый уровень выпадающего списка -->
			            <ul>
			                <li><a href="#">Themes</a></li>
			                <li><a href="#">Plugins</a></li>
			                <li><a href="#">Tutorials</a>
			
			                    <!-- второй уровень выпадающего списка -->
			                    <ul>
			                        <li><a href="#">Stuff</a></li>
			                        <li><a href="#">Things</a></li>
			                        <li><a href="#">Other Stuff</a></li>
			                    </ul>
			                    <!—конец второго уровня выпадающего списка -->
			
			                </li>
			            </ul>
			            <!—конец первого уровня выпадающего списка -->
			
			        </li>
			        <li><a href="#">Graphic Design</a></li>
			        <li><a href="#">Inspiration</a></li>
			        <li><a href="#">Contact</a></li>
			        <li><a href="#">About</a></li>
			    </ul>
		</nav>

Чтобы вертикальное меню 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). В данном случае он проверяет, имеются ли в тегах <li> родительского элемента другие элементы. Если нет, то знак плюса просто убирается, так как по умолчанию он присутствует рядом со всеми пунктами. Видите + возле пунктов WordPress и Tutorials?

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

В завершение

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

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

Данная публикация является переводом статьи «How to Create a Pure CSS Dropdown Menu» , подготовленная редакцией проекта.

Как сделать многоуровневое выпадающее меню только с HTML и CSS (возможно, крошечное JavaScript)

Новичок в CSS и может найти только одноуровневые меню. Вот меню и список пунктов:

<ul>
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Forums</a>
        <ul>
            <a href="#">Basketball</a>
            <ul>
                <li>
                    <a href="#">Trading</a>
                </li>
                <li>
                    <a href="#">Personal Collections</a>
                </li>
                <li>
                    <a href="#">Box Breaks</a>
                </li>
            </ul>
        </ul>
    </li>
</ul>

Как видите, он будет многоуровневым. Теперь, когда у меня есть CSS, сначала отображаются только главная страница и форумы, а когда я навожу курсор на форумы, баскетбол-это displayed…but, как и последующие пункты меню. Я хочу, чтобы они оставались скрытыми, пока я не нависну над баскетболом. Кто-нибудь знает, как сделать это только с CSS или как можно меньше JavaScript? Спасибо. Вот код CSS, который у меня есть:

ul
{
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
    border-bottom: 1px solid #ccc;
}

ul li
{
    position: relative;
}

li ul
{
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
}

ul li a
{
    display: block;
    text-decoration: none;
    color: #777;
    background: #bad8f8;
    padding: 2px 0 2px 10px;
    border: 1px solid #ccc;
    border-bottom: 0;
}

li:hover ul
{
    display: block;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

html css menu stylesheet drop-down-menu
Поделиться Источник XstreamINsanity 20 января 2011 в 22:09
3 ответа
Wordpress многоуровневое выпадающее меню
Я создал собственную тему для своего сайта. Здесь я хочу создать многоуровневое выпадающее меню, и я сделал это с помощью панели мониторинга, но появляется только выпадающее меню.
Javascript многоуровневое выпадающее меню
HTML код: <ul class=nav-menu> <li id=no onmouseover=dropDown() onmouseout=reverseDropDown()> <a href=# >Birds</a> <ul class=menu> <li id=no2 ><a href=# onmouseover=dropDown2() onmouseout=reverseDropDown2()>Ratites</a> <ul class=submenu>…

1

Вот рабочая демонстрация:
http://jsfiddle.net/rcravens/aqz8q/
Я сделал две вещи.
Небольшая реструктуризация списка ul/li. Некоторые элементы были не в Ли.
Используется ‘li:hover > ul’ для выбора только прямых дочерних элементов.
Надеюсь, это поможет.
Боб
Поделиться rcravens 20 января 2011 в 22:17

0

То, как вы структурировали свой css, приводит к тому, что все потомки «Basketball» наследуют его css. Вместо этого вы должны использовать child(«>») или :first-child selector. Посмотрите на разделы 5.5 и 5.6 здесь, чтобы понять, о чем я говорю: http:/ / www.w3.org/TR/CSS2 / selector. html
Если вы хотите сделать динамические меню, я бы настоятельно рекомендовал использовать javascript, а не полагаться исключительно на css, если только вы не уверены, что многие люди, просматривающие ваш сайт, будут отключены от javascript.
Поделиться Bhavya 20 января 2011 в 22:23

0

Попробуйте добавить
ul li ul{position: absolute; top: 0; left: 0; width: 250px; height: 250px; background-color: #EEE;}
И идите оттуда 🙂
Поделиться plebksig 20 января 2011 в 22:18
Похожие вопросы:

многоуровневое меню с css &html?
Я хочу создать многоуровневое меню с чистым css & html. положение меню должно контролироваться css. Кто-нибудь может мне помочь?

Многоуровневое выпадающее меню без css эффектов наведения asp.net jquery
Я хочу создать многоуровневое выпадающее меню в asp.net, используя c# для составного элемента управления. Кто-нибудь знает или знает какие-нибудь указания о том, как его создать? Я посмотрел на…

Twitter Многоуровневое Выпадающее Меню Bootstrap
Можно ли иметь многоуровневое выпадающее меню с помощью элементов twitter bootstrap 2? В оригинальной версии этой функции нет.

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

Javascript многоуровневое выпадающее меню
HTML код: <ul class=nav-menu> <li id=no onmouseover=dropDown() onmouseout=reverseDropDown()> <a href=# >Birds</a> <ul class=menu> <li id=no2 ><a href=#…

Как сделать выпадающее меню полной ширины и push-контент только с HTML+CSS?
Я пытаюсь создать чистое и простое выпадающее меню HTML+CSS, которое будет открываться в режиме полной ширины под каждым элементом, а также будет нажимать контент. Это изображение и jsfiddle лучше…

Как сделать многоуровневое выпадающее меню с помощью select option mentod
я хочу сделать многоуровневое выпадающее меню с помощью метода select и option <select> <option value= data-display-text=Select>None</option> <option…

Многоуровневое выпадающее меню Bokeh
Я хочу сделать многоуровневое выпадающее меню, что-то вроде того, что есть в этом XKCD: Есть ли какой-то способ, чтобы подкатегории складывались таким образом, используя выпадающее меню Боке? Мой…

ReactJS многоуровневое выпадающее меню
Я пытаюсь создать многоуровневое выпадающее меню ReactJs. Я использую следующий пост/код в качестве базы: следующий пост и этот код jsfiddle в качестве отправной точки моего компонента ReactJs:…

Как развернуть выпадающее меню с помощью css , javascript и html?
У меня есть выпадающее меню на моей странице , когда пользователь нажимает кнопку выпадающего меню, кнопка должна развернуться и отобразить данные . вот чего я хочу Вот это HTML <div…
Создание меню с помощью CSS и HTML
Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню — раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.
Вертикальное меню
Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент <li> нашего списка будет содержать по одной ссылке:
<ul> <li><a href="#">Главная</a></li> <li><a href="#">Новости</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">О нас</a></li> </ul>
Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:
#navbar { margin: 0; padding: 0; list-style-type: none; width: 100px; }
Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента <a> со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.
Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.
#navbar a { background-color: #949494; color: #fff; padding: 5px; text-decoration: none; font-weight: bold; border-left: 5px solid #33ADFF; display: block; } #navbar li { border-left: 10px solid #666; border-bottom: 1px solid #666; }
Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> #navbar { margin: 0; padding: 0; list-style-type: none; width: 100px; } #navbar li { border-left: 10px solid #666; border-bottom: 1px solid #666; } #navbar a { background-color: #949494; color: #fff; padding: 5px; text-decoration: none; font-weight: bold; border-left: 5px solid #33ADFF; display: block; } </style> </head> <body> <ul> <li><a href="#">Главная</a></li> <li><a href="#">Новости</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">О нас</a></li> </ul> </body> </html>
Попробовать »
При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса :hover.
Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:
#navbar a:hover { background-color: #666; border-left: 5px solid #3333FF; }
Попробовать »
Горизонтальное меню
В предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.
Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов <li> нужно присвоить значение inline, чтобы пункты списка располагались друг за другом.
Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:
<ul> <li><a href="#">Главная</a></li> <li><a href="#">Новости</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">О нас</a></li> </ul>
Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:
#navbar { margin: 0; padding: 0; list-style-type: none; } #navbar li { display: inline; }
Попробовать »
Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:
#navbar { margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; } #navbar a { color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; } #navbar a:hover { border-radius: 20px 5px; background-color: #0066FF; }
Попробовать »
Выпадающее меню
Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.
Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:
<ul> <li><a href="#">Главная</a></li> <li><a href="#">Новости</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">О нас</a></li> </ul>
Подпункты мы разместим в отдельном списке, вложив его в элемент <li>, который содержит родительскую ссылку относительно подпунктов. Теперь мы имеем четкую структуру нашей будущей панели навигации:
<ul> <li><a href="#">Главная</a></li> <li><a href="#">Новости</a></li> <li><a href="#">Контакты</a> <ul> <li><a href="#">Адрес</a></li> <li><a href="#">Телефон</a></li> <li><a href="#">Email</a></li> </ul> </li> <li><a href="#">О нас</a></li> </ul>
Попробовать »
Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент <li> список снова был преобразован в блочный элемент:
#navbar ul { display: none; } #navbar li:hover ul { display: block; }
Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.
#navbar, #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar li { float: left; } #navbar ul li { float: none; }
Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.
#navbar ul { display: none; position: absolute; top: 100%; } #navbar li { float: left; position: relative; } #navbar { height: 30px; }
Попробовать »
Высота для родительского списка была добавлена специально, так как браузеры не учитывают в качестве содержимого элемента плавающий контент, то без добавления высоты наш список будет проигнорирован браузером и контент, следующий за списком, будет обтекать наше меню.
Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:
#navbar ul { display: none; background-color: #f90; position: absolute; top: 100%; } #navbar li:hover ul { display: block; } #navbar, #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar { height: 30px; background-color: #666; padding-left: 25px; min-width: 470px; } #navbar li { float: left; position: relative; height: 100%; } #navbar li a { display: block; padding: 6px; width: 100px; color: #fff; text-decoration: none; text-align: center; } #navbar ul li { float: none; } #navbar li:hover { background-color: #f90; } #navbar ul li:hover { background-color: #666; }
Попробовать »
Как создать раскрывающееся меню в HTML
В HTML мы можем легко создать раскрывающееся меню в документе Html, используя следующие различные способы:
Использование HTML-формы
Использование внутреннего CSS
Использование HTML-формы
Если мы хотим создать раскрывающееся меню в документе Html с помощью формы, мы должны выполнить шаги, указанные ниже. Используя эти шаги, мы можем легко создать раскрывающееся меню:
Шаг 1: Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим использовать форму для создания раскрывающегося меню.
<Голова> <Название> Создайте выпадающее меню с помощью HTML-формы <Тело> Эта страница поможет вам понять, как создать раскрывающееся меню в HTML-документе. И этот раздел поможет вам понять, как создать раскрывающееся меню с помощью формы Html.
Шаг 2: Теперь мы должны поместить курсор в ту точку тега тела документа Html, где мы хотим отобразить раскрывающееся меню.И затем мы должны ввести тег
в этой точке.
<Тело> Эта страница поможет вам понять, как создать раскрывающееся меню в документе Html. И этот раздел поможет вам понять, как создать раскрывающееся меню с помощью формы Html. <форма>
Шаг 3: Теперь мы должны определить теги и
Шаг 4: Теперь мы должны определить тег опции в соответствии с количеством значений, которые должны отображаться в раскрывающемся меню.
<форма> Выбрать автомобили <выбор>
Шаг 5: И, наконец, мы должны сохранить файл Html, а затем запустить файл.
<Голова> <Название> Создайте выпадающее меню с помощью HTML-формы <Тело> Эта страница поможет вам понять, как создать раскрывающееся меню в HTML-документе. И этот раздел поможет вам понять, как создать раскрывающееся меню с помощью формы Html. <форма> Выбрать автомобили <выбор>
Проверить это сейчас
Вывод вышеуказанного HTML-кода показан на следующем снимке экрана:
Использование внутреннего CSS
Если мы хотим создать раскрывающееся меню в документе Html с использованием таблицы стилей внутреннего каскадирования, мы должны выполнить шаги, указанные ниже.Используя эти шаги, мы можем легко создать раскрывающееся меню:
Шаг 1: Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим использовать внутренний CSS для создания раскрывающегося меню.
Шаг 2: Теперь мы должны поместить курсор сразу после закрытия тега title в теге заголовка документа Html, а затем определить стили внутри тега
Шаг 3: Затем мы должны использовать другой класс, который определяет раскрывающийся список.
.падать { дисплей: встроенный блок; позиция: относительная }
Шаг 4: Теперь нам нужно создать еще один класс, который используется для описания того, как появляется раскрывающееся меню. Этот класс содержит различные атрибуты, которые показаны в следующем блоке.
.dropdown-content { позиция: абсолютная; цвет фона: светло-серый; минимальная ширина: 200 пикселей; дисплей: нет; z-индекс: 1; }
Шаг 5: Теперь нам нужно добавить еще один класс для определения цвета и размера текста в раскрывающемся меню.
.dropdown-content a { черный цвет; отступ: 12 пикселей 16 пикселей; текстовое оформление: нет; дисплей: блок; }
Шаг 6: И, наконец, в теге стиля мы должны отредактировать поведение раскрывающегося меню при наведении курсора. Итак, мы можем легко использовать следующий код в нашем теге стиля для редактирования.
.dropdown-content a: hover { цвет фона: оранжевый; } .dropdown: hover .dropdown-content { дисплей: блок; } .dropdown: hover .dropbtn { цвет фона: серый; }
Шаг 7: Теперь нам нужно поместить курсор в тег тела, где мы хотим показать раскрывающееся меню. Затем мы должны вставить следующий код в тег body.

Html CSS JavaScript
Шаг 8: И, наконец, мы должны сохранить файл Html, а затем запустить файл в браузере.
<Голова> <Название> Создайте раскрывающееся меню с помощью внутреннего CSS <стиль> .dropbtn { цвет фона: желтый; черный цвет; отступ: 10 пикселей; размер шрифта: 12 пикселей; } .падать { дисплей: встроенный блок; позиция: относительная } .dropdown-content { позиция: абсолютная; цвет фона: светло-серый; минимальная ширина: 200 пикселей; дисплей: нет; z-индекс: 1; } .dropdown-content a { черный цвет; отступ: 12 пикселей 16 пикселей; текстовое оформление: нет; дисплей: блок; } .dropdown-content a: hover { цвет фона: оранжевый; } .dropdown: hover .dropdown-content { дисплей: блок; } .dropdown: hover .dropbtn { цвет фона: серый; } <Тело> Эта страница поможет вам понять, как создать раскрывающееся меню в HTML-документе. И этот раздел поможет вам понять, как создать раскрывающееся меню с помощью внутреннего CSS.

Html CSS JavaScript
Проверить это сейчас
Вывод вышеуказанного Html-кода показан на следующем снимке экрана:
Как создать раскрывающееся меню в HTML и CSS
Здравствуйте, читатели! Сегодня в этом блоге вы узнаете, как создать минимальную строку раскрывающегося меню с подменю только в HTML и CSS.Строка раскрывающегося меню — это элемент вашего веб-сайта, который позволяет отображать множество веб-страниц в одном месте.
Выпадающее меню — это графический элемент управления, предназначенный для помощи посетителям в поиске определенных страниц, содержимого или функций на вашем веб-сайте.
Как вы можете видеть на изображении, это строка раскрывающегося меню, основанная только на HTML и CSS. На веб-странице есть пункты меню, одно фоновое изображение. Но когда вы наведете курсор на определенное меню, появится подменю.По сути, сначала подменю скрыто, но при наведении курсора на пункт меню появляется конкретное подменю меню.
Вы можете посмотреть видеоинструкцию ниже, чтобы узнать больше. Там я красиво сказал и шаг за шагом показал, как создавалось это выпадающее меню.

По сути, для его создания я использовал два типа программного кода. Один из них — это HTML, который помог построить структуру этой строки меню. Другой — это программный код CSS, который помог его разработать. Щелкните здесь, чтобы загрузить исходный код.
HTML-код:
На главную WordPress Тема Плагины Руководства Веб-дизайн Ресурс Ссылки Руководства HTML / CSS JQuery Вне Разное Вещи Outher Stuff Графический дизайн Вдохновение Связаться О компании
Войти в полноэкранный режимВыйти из полноэкранного режима
Код CSS:
html { background-image: url (image.jpg); размер фона: обложка; фон-повтор: без повторения; высота: 700 пикселей; background-position: center; } тело{ размер шрифта: 22 пикселя; высота строки: 32 пикселя; цвет: #ffffff; семейство шрифтов: «Open Sans», без засечек; } nav { цвет фона: # 1289dd; } nav ul { отступ: 0; маржа: 0; стиль списка: нет; положение: относительное; } nav ul li { дисплей: встроенный блок; цвет фона: # 1289dd; } nav a { дисплей: блок; отступ: 0 10 пикселей; цвет: #fff; высота строки: 60 пикселей; размер шрифта: 20 пикселей; текстовое оформление: нет; } / * Скрыть раскрывающийся список по умолчанию * / nav ul ul { дисплей: нет; позиция: абсолютная; верх: 60 пикселей; } / * наведение * / nav a: hover { цвет фона: # 000000; } / * Отображение раскрывающегося списка при наведении * / nav ul li: hover> ul { дисплей: наследовать; } / * Раскрывающийся список Fisrt Tier * / nav ul ul li { ширина: 170 пикселей; float: нет; отображение: элемент списка; положение: относительное; } / * ============ Второй, третий и другие уровни =========== * / nav ul ul ul li { положение: относительное; верх: -60 пикселей; слева: 170 пикселей; } / * Измените это, чтобы изменить символ раскрывающегося списка * / li> a :: after {content: '+';} li> a: only-child :: after { содержание: ''; }
Войти в полноэкранный режимВыйти из полноэкранного режима
Вы также можете скачать файлы с исходным кодом по данной ссылке.Щелкните здесь, чтобы загрузить исходный код.
Всплывающих меню
Всплывающие меню
Как использовать панель поведения Dreamweaver для создания всплывающих меню
В этом руководстве вы узнаете, как использовать панель поведения Dreamweaver для создания небольших всплывающих меню. Такое поведение помогает создавать раскрывающиеся меню, раскрывающиеся меню. пр.
Необходимые знания
В этом руководстве вы узнаете, как создавать всплывающие меню с помощью поведения Dreamweaver, и, таким образом, предполагается, что вы знакомы с некоторыми программами для дизайна, даже если вы новичок в Adobe Dreamweaver.Однако будьте уверены, что нашим подробным инструкциям может следовать даже новичок.
Вы здесь ::: Главная >> Бесплатные учебные материалы >> Руководства по Dreamweaver >> Всплывающие меню
Adobe Dreamweaver имеет генератор всплывающих окон, который автоматически генерирует код CSS и код JavaScript. Например, вы можете использовать всплывающее меню для организации нескольких параметров навигации, связанных с кнопкой. Вы можете создать сколько угодно уровней подменю во всплывающем меню.Каждый элемент всплывающего меню отображается в виде ячейки HTML или изображения, которая имеет состояние «Вверху», состояние «Наведение» и текст в обоих состояниях.
Примечание: Всплывающее меню — это не то же самое, что графическое всплывающее меню.
Как создавать и редактировать всплывающие меню
Всплывающие меню можно легко создать с помощью «Показать всплывающее меню» на панели поведения Dreamweaver (аналогично всплывающему меню Fireworks). Параметры можно установить с помощью диалогового окна для создания горизонтального или вертикального всплывающего меню.Вы можете использовать это диалоговое окно для установки или изменения цвета, текста и положения всплывающего меню.
Например, : См. Наши популярные ссылки — услуги, портфолио, цены и предложения, веб-продукты, бесплатные ресурсы и о нас
Чтобы создать всплывающее меню для ссылки (текст или изображение), создайте ссылку, выберите ее и откройте панель «Поведение» (Shift + F3).
Нажмите кнопку «Добавить» (+) и выберите «Показать всплывающее меню» во всплывающем меню «Действия».
Задайте параметры для всплывающего меню с помощью диалогового окна, которое появляется с использованием следующих вкладок:
Содержание — для установки имени, структуры, URL-адреса и цели отдельных пунктов меню.
Внешний вид — для настройки внешнего вида состояния меню (вверх / вниз) и для выбора шрифта для текста пункта меню.
Advanced — для установки свойств ячеек меню, например ширины, высоты, цвета, ширины границы, отступа текста и длительности задержки до появления меню после того, как пользователь наводит указатель на триггер.
Позиция — для установки позиции меню относительно инициирующего изображения или ссылки.
Чтобы изменить всплывающее меню, сначала выберите ссылку, а затем дважды щелкните всплывающее меню в столбце «Действия» на панели «Поведение».
Сохраните и протестируйте файл в веб-браузере. Вот и все, что вы узнали, как создавать всплывающие меню с помощью Dreamweaver Behaviors.

Требуется программное обеспечение
Adobe Dreamwever (Macromedia Dreamweaver до версии 8).Пожалуйста, проверьте совместимые версии, перечисленные в поле ниже. Поскольку в этой серии руководств рассматриваются основные функции Dreamweaver для создания всплывающих меню с использованием поведения Dreamweaver, в большинстве случаев подойдет любая версия этого программного обеспечения.
Версии Dreamweaver, совместимые с этим учебным курсом
Dreamweaver 4-8 | Dreamweaver CS3 | Dreamweaver CS4 / CS5 / CS6
Примечание : Инструкции в этом руководстве одинаковы для всех версий Dreamweaver, перечисленных выше; Снимки экрана (если есть) могут отличаться. Рекомендуемая версия: Dreamweaver CS6
Поставьте отметку «Нравится», +1, дайте ссылку на этот ресурс SmartWebby и поделитесь им, если вы нашли его полезным. Спасибо!
Как создать всплывающее меню с помощью jQuery Mobile?
Как создать всплывающее меню с помощью jQuery Mobile?
jQuery Mobile — это веб-технология, используемая для создания адаптивного контента, доступного на всех смартфонах, планшетах и настольных компьютерах. В этой статье мы создадим кнопку всплывающего меню с помощью jQuery Mobile.
Подход: Добавьте скрипты jQuery Mobile, необходимые для вашего проекта.

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

< html >

ссылка отн. = "таблица стилей" href =

< сценарий src src

> < скрипт src = скрипт 9 9

< корпус >
9012 5 < центр >
< h2 > GeeksforGeeks h2 >
25
25
23
Всплывающее меню с использованием jQuery Mobile
h5 >

< data-rel = "popup"
data-transition = "slideup"
class = "ui-btn ui-corner-corner
ui-btn-inline ui-icon-gear
90 126 ui-btn-icon-left ui-btn-a "
title = " Щелкните здесь! " > Меню GeeksforGeeks
a >

< div popup data-роль = "GFGMenu" тема данных = "b" >
< ul data-role = data-role = data-role вставка = "true"
style = "min-width: 210px;" >

< li data-role = «list-divider» > Выберите вариант 2 li> li < li > < a href = "#" > Структура данных a > li > < li > < a href = "#" > Алгоритм a > 000 li > li > < a href = "#" > HTML a > li 901 25>
< li > < a href = «#» > CSS a 9012 905>
< li > < a href = "#" > JavaScript a 126>
ul >
div >
125 >

html >
Выход:

Адаптивное мобильное меню
в Bootstrap
Это подробный обзор адаптивного меню Bootstrap.Бесплатная версия содержит области с ограниченным доступом, выделенные серым цветом.
Список прокрутки доступен с правой стороны, что позволяет выбирать варианты для различных шаблонов, таких как Android, Compact Gray и mac.
Существует пять различных тем значков, которые можно использовать с кнопками при нажатии на вкладку значков.
Процесс создания
Процесс инициации прост; Пожалуйста, выберите вкладку «Шаблон», затем, чтобы установить свой первый пункт меню, нажмите заметную зеленую кнопку.Откроется пункт меню, который вы можете изменить позже, если захотите.
Следующим шагом является настройка меню в горизонтальном или вертикальном исполнении. В рамках этого обзора мы рассмотрим настройку горизонтального дизайна с адаптивными функциями раскрывающегося меню. Чтобы приступить к работе с первым пунктом меню, нажмите заметную зеленую кнопку, после чего убедитесь, что вкладка «Шаблон» работает, и выберите шаблон, соответствующий вашим потребностям. Чтобы применить выбранный шаблон, просто дважды щелкните его.
После завершения описанного выше процесса вы можете приступить к настройке меню. Для этого вы будете использовать заметную зеленую кнопку, маленькую кнопку зеленого цвета, зеленые указатели будут использоваться для перемещения по структуре меню, а для удаления ненужных элементов используется красная кнопка «минус». Стоит отметить, что навигация изменяется по отношению к принятому шаблону, и для обеспечения эффективного использования требуется постоянная практика.
Значки можно использовать для включения изображений в меню для создания комплексного дизайна.Здесь представлены подходящие примеры изображений разного размера, которые можно выбрать.
Для дальнейшего улучшения дизайна меню необходимо настроить свойства Bootstrap Responsive Menu. Свойства содержат пункт меню, цель, ссылку, подсказку в основе структуры меню. Всплывающее окно дает вам возможность внести изменения в значок. Следует отметить, что кнопка меню становится зеленой, когда галочка рядом с ней становится «активной».
В этом разделе можно изменять ключевые элементы адаптивного меню Bootstrap, а также подменю.Доступны следующие параметры:
Нормальный шрифт: отображение фона и цвета шрифта по умолчанию для кнопки.
Наведение шрифта: позволяет изменять цвета фона и шрифта.
Bootstrap Responsive Menu radius: Радиус меню помогает изменить структуру кнопки.
Радиус предмета: регулирует радиус предмета.
Режим RTL: этот режим позволяет изменять структуру меню для чтения справа налево.
Управление шрифтом: регулирует тип и размер шрифта, а также позволяет подчеркивать, выделять жирным шрифтом и курсивом.
Размер: регулирует размер кнопки и предоставляет возможность выбора между автоматическим размером, пользовательскими настройками ширины и высоты и шириной 100%.
Рекомендуется сохранить вашу работу, чтобы вы могли продолжить в другой раз с того места, где вы остановились, если хотите, и для этого щелкните значок диска. Доступны также другие варианты: «Вставить на страницу» и «Опубликовать». Например, если вы хотите сохранить свою работу, вам потребуется добавить имя файла и сохранить структуру меню, адаптирующуюся к загрузке, в формате HTML.
Как только вы щелкнете по кнопке «Сохранить», отобразится предварительный просмотр, показывающий, как ваша работа будет отображаться в браузере (это может быть некрасивый вид, но дает вам представление о том, как ваша работа будет выглядеть).
Когда вы перейдете к папке с файлами, в которой вы сохранили файл HTML5, вы легко найдете этот файл. Папка, состоящая из файлов изображений и чистого документа CSS, используемых в дизайне, также будет найдена в папке с файлами.
Когда все это будет сделано, вы сможете свободно использовать созданные вами веб-страницы и файлы.Наслаждаться!
На заметку о бесплатной и платной версиях
Чтобы воспользоваться замечательными функциями программы и другими преимуществами, содержащимися в коммерческой версии, вам необходимо приобрести лицензию. Коммерческая версия дает вам возможность настраивать многоколоночные меню и включает в себя полный набор значков и шаблонов меню.
Всплывающее меню Учебное пособие по созданию всплывающего меню.
Как создать всплывающее меню и добавить его на сайт?
Всплывающее меню широко используется для веб-навигации, оно может отображать свои подменю при взаимодействии с пользователем, например, при наведении курсора мыши на пункт меню или щелчке по пункту меню для отображения дополнительных элементов ссылки.Всплывающее меню выполнено в стиле иерархии; вы увидите только элемент меню верхнего уровня на веб-сайте, если не задействовано поведение мыши.
Всплывающее меню выглядит так:
Всплывающее меню отличается тонким корпусом и большим объемом. Вы можете добавить неограниченное количество пунктов подменю в верхнее меню. Всплывающее меню специально применяется для дизайна веб-сайтов с компактной структурой и разнообразным содержанием. Он не только четко классифицирует веб-страницы для веб-сайта, но и переключается на целевую страницу одним щелчком мыши.Всплывающее меню может быть вертикальным или горизонтальным, что является неплохим элементом декора для дизайна сайта.
В настоящее время многие известные компании используют всплывающее меню в качестве панели навигации для навигации по своим веб-сайтам, например Microsoft, Adobe, Amazon и т. Д. Но как я могу создать собственное всплывающее меню? Наберитесь терпения, я покажу вам, как создать всплывающее меню с помощью Sothink DHTML Menu.
Sothink DHTML Menu позволяет создать всплывающее меню для компактного веб-сайта. Благодаря встроенным шаблонам и богатым предустановленным стилям вы можете создать всплывающее меню, удобное для SE, в один клик.Полностью настройте всплывающее меню в соответствии с веб-дизайном. Свободно интегрируйтесь с веб-редакторами для создания всплывающих меню.
Скачать Sothink DHTML Menu >>
Следуй за мной, чтобы открыть всплывающее меню сейчас:
Запуск всплывающего меню со встроенными шаблонами Запуск меню Sothink DHTML. Окна шаблонов открываются, и вы можете выбрать всплывающее меню «Простой> Классический серебристый».
Добавить элементы подменю для этого всплывающего меню
Выберите пункт меню, для которого необходимо добавить элементы подменю ниже, и нажмите кнопку «Добавить элемент подменю» на панели меню, чтобы добавить элементы подменю.
Изменить текст и ссылку для всплывающего меню

Измените текст и ссылку для своего веб-сайта. Щелкните текст на панели меню, выберите параметр «Пункт меню> Общие» и отредактируйте текст и ссылку на панели свойств ниже.
4. Задайте папку ресурсов, чтобы всплывающее меню работало в интрасети или Интернете.
Задайте папку ресурсов для сохранения файлов JS и изображений в конкретный каталог, чтобы всплывающее меню отображалось правильно.Введите «Global> Resource Folder», чтобы установить их.
5. Опубликовать всплывающее меню и отобразить его на веб-странице.
Опубликуйте файлы ресурсов, код меню или код меню JavaScript в определенной папке; и вставьте два фрагмента кода в теги «head» и «body» на веб-странице.
Отметьте кнопку на панели инструментов и выберите опцию «Просмотреть / скопировать код…»; откроется диалоговое окно, следуйте советам, чтобы скопировать и вставить коды на веб-страницу; и отметьте опцию «Копировать файлы ресурсов», чтобы скопировать ресурс в указанную папку.
Завершите вышеуказанные шаги, вы можете предварительно просмотреть меню локально; и загрузите все файлы ресурсов на веб-сервер, чтобы просмотреть всплывающее меню в Интернете.
Настройка раскрывающихся меню в вашем интернет-магазине · Справочный центр Shopify
Эта страница была напечатана 11 июня 2021 г. Чтобы просмотреть текущую версию, посетите https://help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus.
Вы можете использовать раскрывающиеся меню, чтобы сгруппировать продукты, коллекции или страницы вместе и упростить для клиентов навигацию по вашему интернет-магазину.Например, если у вас много продуктов, вы можете добавить их в коллекции, а затем использовать раскрывающееся меню в главном меню для организации коллекций. Это может помочь покупателю найти тот тип продуктов, который он ищет.
Вы также можете добавлять, удалять или редактировать пункты меню в раскрывающихся меню или в меню вашего интернет-магазина по умолчанию.
Вы можете просматривать и изменять навигацию в своем интернет-магазине на странице Navigation в вашем Shopify Админ.
Примечание
В большинстве случаев вам необходимо создать элемент, прежде чем вы сможете установить на него ссылку.Например, вам нужно создать коллекцию, прежде чем вы сможете добавить ее в меню.
Вы можете создавать раскрывающиеся меню, создавая или перемещая пункты меню так, чтобы они были «вложены» под элементом верхнего уровня. Элемент верхнего уровня отображается в главном меню вашего интернет-магазина, а элементы вложенного меню отображаются в раскрывающемся меню. Элемент верхнего уровня может иметь до двух уровней вложенных раскрывающихся меню:
Все темы будут отображать вложенные элементы в виде раскрывающихся меню из главного меню, а некоторые темы будут отображать вложенные элементы в виде раскрывающихся меню. в других местах.
Внешний вид и расположение главного меню и раскрывающихся меню в вашем интернет-магазине зависит от темы вашего интернет-магазина. Некоторые темы будут отображать значок рядом с названием раскрывающегося меню в главном меню, чтобы помочь клиентам распознать раскрывающееся меню.
Примечание
Убедитесь, что вы обновили свою тему, чтобы в ней отображались все три уровня меню в вашем интернет-магазине.
Вы можете добавить раскрывающееся меню из любого пункта главного меню.

Наконечник
Чтобы увидеть больше видео, посетите наш канал YouTube.
Добавить раскрывающееся меню из главного меню
Шагов:
От администратора Shopify перейдите в интернет-магазин > Navigation .
В приложении Shopify нажмите Магазин .
В разделе Каналы продаж коснитесь Интернет-магазин .
Нажмите Навигация .
В приложении Shopify нажмите Магазин .
В разделе Каналы продаж коснитесь Интернет-магазин .
Нажмите Навигация .
Щелкните имя главного меню.
Выберите один из пунктов меню, который будет заголовком раскрывающегося меню, или добавьте новый элемент меню, который будет заголовком.Если вы не хотите, чтобы заголовок ссылался на что-либо, вы можете ввести # в поле Ссылка при добавлении пункта меню.
Добавить элементы меню для включения в новое раскрывающееся меню. Щелкните Добавить элемент меню , введите имя элемента меню и введите или выберите место назначения для ссылки.
Щелкните и перетащите элементы меню, чтобы вложить их под элементом заголовка.
Щелкните Сохранить в меню .
Примечание
Вы можете изменить главное меню по умолчанию для большинства тем, отредактировав настройки в разделе Заголовок темы.
.

Comments

Leave Comment

Как сделать меню всплывающее в html: Как сделать всплывающее меню при наведении

Как Создать Выпадающее Меню CSS

грамотная навигация сайта с помощью стилей

Проблема

Решение: «:focus-inside»

Что насчет ARIA?

Поддержка браузерами

PSD to HTML

Выпадающее меню на HTML / CSS без использования JavaScript

Как создать выпадающее меню с помощью HTML и CSS

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

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

В завершение

Как сделать многоуровневое выпадающее меню только с HTML и CSS (возможно, крошечное JavaScript)

3 ответа

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

Создание меню с помощью CSS и HTML

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

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

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

Как создать раскрывающееся меню в HTML

Использование HTML-формы

Использование внутреннего CSS

Как создать раскрывающееся меню в HTML и CSS

Всплывающих меню

Всплывающие меню

Как использовать панель поведения Dreamweaver для создания всплывающих меню

Необходимые знания

Требуется программное обеспечение

Версии Dreamweaver, совместимые с этим учебным курсом

Поставьте отметку «Нравится», +1, дайте ссылку на этот ресурс SmartWebby и поделитесь им, если вы нашли его полезным. Спасибо!

Как создать всплывающее меню с помощью jQuery Mobile?

HTML

в Bootstrap

Всплывающее меню Учебное пособие по созданию всплывающего меню.

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

Настройка раскрывающихся меню в вашем интернет-магазине · Справочный центр Shopify

Примечание

Примечание

Наконечник

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

Шагов:

Примечание

Leave a Comment Отменить ответ

Leave a Comment
Отменить ответ