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

html — Как при наведении курсора на текст сделать выпадающий список с номерами телефонов , заключенных в div?

Вопрос задан 1 год 3 месяца назад

Изменён 1 год 3 месяца назад

Просмотрен 230 раз

Есть сайт, пытаюсь добавить такое вот всплывающее окно(см. ниже пример) по наведению курсора на определенный текст

<p title="Этот текст будет показан при наведении">Просто текст</p>

текст показывает при наведении курсором, а как туда «засунуть» следующий div?

<div>
                <div>
                                        <a href="tel:+79829349099"><span>+7 (982)</span> 934-90-99</a>
                    <div>Работаем без выходных, с 8:00 до 21:00</div>
                </div>

просто в title никак не получается вписать этот участок кода

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

<div>
        <ul>
            <li><u><a href="#">Просто текст</a></u></li>
            <li><u><a href="#">Просто текст</a></u></li>
            <li><u><a href="#">Просто текст</a></u>
                <ul><div>
                    <div><li><a href="#">Просто текст</a></li></div>
                    <div><li><a href="#">Просто текст</a></li></div>
                    <div><li><a href="#">Просто текст</a></li></div>
                    <div><li><a href="#">Просто текст</a></li></div>
                    <div><li><a href="#">Просто текст</a></li></div>
                </div></ul></li>
            <li><u><a href="#">Просто текст</a></u></li>
            <li><u><a href="#">Просто текст</a></u></li>
        </ul>
    </div>

. main {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.main > li {
    display: inline-block;
    position: relative;
}
.main > li:hover > ul {
    visibility: visible;
    opacity: 0.9;
    transition: all 0.2s ease-in-out; 
}
.main > li > ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    opacity: 0.1;
    visibility: hidden;
    background: #FFFFFF;
    position: absolute;
    top: 50px;
    left: 0;
} 
li.content{
    margin-right: -13px;
}
li.content::after {
    content: " / ";
    color: white;
    font-size: 20px;
    padding-top: 10px;
    margin-left: 13px;
}
li.content:last-child::after{
    content: none;
}
div {
    background: #d6161d;
    height: 50px;
    color: white;
    font-family: Trebuchet MS;
}
ul.main {
    margin-left: 100px;
}
div > ul > li {
    margin-left: 30px;
    padding-top: 10px;
}
a {
    color: #FFFFFF;
}
#shadow {
    box-shadow: 0 0 10px #aeaeae;
    height: 184px;
}
li > ul > li {
    width: 250px;
    height: 30px;
    padding-top: 10px;
} 
div.  pouring {
    background: #FFFFFF;
    width: 225px;
    height: 36px;
    color: #e5e5e5; 
    border-bottom: 0.5px solid #e5e5e5;
}
#first-div{
    height: 39px;
}
a.pass{
    color: #a7a7a7; 
    justify-content: center;
    position: relative;
    top: 7px;
    display: block;
    width: 200px;
    height: 27px;
    font-size: 14px;
    text-decoration: none;
}
div#first-div a.pass {
    top: 11px;
}
a.pass:hover{
    text-decoration: underline;
}
.mark div a{
    margin-left: 15px;
}
.mark div:hover,
.mark div:hover a,
.mark a:hover {
    display: block;
    background-color: #e5e5e5;
    color: #d73135;
    align-items: center;
}
ul {
    height: 100%;
    margin: 0;
}
li {
    list-style-type: none;
    display: inline-block;
    height: 100%
}

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

2

Ваш ответ

Зарегистрируйтесь или войдите

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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

li {
  list-style: none;
}

.menu {
  display: flex;
  justify-content: center;
  max-width: 700px;
  max-height: 90px;
  height: 100%;
  margin: auto;
  background-color: black;
  border: 1px solid #fff;
}

.menu:hover {
  border: 1px solid coral;
}

.categories a {
  color: #fff;
  text-decoration: none;
  margin-right: 25px;
  padding: 10px 0px;
}

.categories a:hover {
  color: coral;
}

.btn {
  display: inline-block;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 50px;
  padding: 10px;
  cursor: pointer;
  outline: none;
  letter-spacing: 3px;
}

.
 
  btn:hover {
  background-color: transparent;
  border: 1px solid coral;
  color: coral;
}

ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.categories>li {
  align-items: center;
  display: flex;
  list-style: none;
  position: relative;
  z-index: 1;
}

.submenu {
  z-index: -1;
  padding: 10px 0px;
  background-color: black;
  overflow: hidden;
  display: none;
  width: 200px;
  position: absolute;
  line-height: 1.5rem;
  top: 40px;
  left: 0;
}

.submenu li {
  width: 200px;
  display: block;
}

.submenu li a {
  display: block;
  background-color: transparent;
}

.submenu li:hover {
  display: block;
  padding-left: 5px;
  background-color: transparent;
}

.categories li:hover .submenu {
  display: block;
  border-left: 1px solid coral;
  border-bottom: 1px solid coral;
}

.
  categories button:hover+.submenu {
  color: coral;
}

<nav>
  <ul>
    <li><a href="#"><button type="">iPhone</button> </a>
      <ul>
        <li><a href="#">iPhone X</a></li>
        <li><a href="#">iPhone 8 Plus</a></li>
        <li><a href="#">iPhone 8</a></li>
        <li><a href="#">iPhone 7 Plus</a></li>
      </ul>
    </li>
    <li><a href="#"><button type="">iPad</button></a>
      <ul>
        <li><a href="#">iPad Pro</a></li>
        <li><a href="#">iPad 2017</a></li>
        <li><a href="#">iPad Mini</a></li>
        <li><a href="#">iPad Air 2</a></li>
      </ul>
    </li>
    <li><a href="#"><button type="">Mac</button></a>
      <ul>
        <li><a href="#">iMac Pro</a></li>
        <li><a href="#">iMac 2017</a></li>
        <li><a href="#">iMac 2016</a></li>
        <li><a href="#">iMac 2015</a></li>
      </ul>
    </li>
    <li><a href="#"><button type="">Watch</button></a>
      <ul>
        <li><a href="#">Watch Series 1</a></li>
        <li><a href="#">Watch Series 2</a></li>
        <li><a href="#">Watch Series 3</a></li>
        <li><a href="#">Watch Series 3 (Edition)</a></li>
      </ul>
    </li>
    <li><a href="#"><button type="">Accessories</button></a>
      <ul>
        <li><a href="#">Apple Mini DisplayPort</a></li>
        <li><a href="#">Мышь Apple Magic Mouse 2</a></li>
        <li><a href="#">Apple USB-C Digital AV </a></li>
        <li><a href="#">Трекпад Apple Magic Trackpad 2 </a></li>
      </ul>
    </li>
  </ul>
</nav>

• html
• css
• hover

3

Я не менял структуру и не менял вашу вёрстку , но исправил и интересующий фрагмент css выглядит так :

li:hover a>. btn { border: 1px solid green;color: green;}

и сама реализация такая :

li {
  list-style: none;
}

.menu {
  display: flex;
  justify-content: center;
  max-width: 700px;
  max-height: 90px;
  height: 100%;
  margin: auto;
  background-color: black;
  border: 1px solid #fff;
}

.menu:hover {
  border: 1px solid coral;
}

.categories a {
  color: #fff;
  text-decoration: none;
  margin-right: 25px;
  padding: 10px 0px;
}

.categories a:hover {
  color: coral;
}

.btn {
  display: inline-block;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 50px;
  padding: 10px;
  cursor: pointer;
  outline: none;
  letter-spacing: 3px;
}

.btn:hover {
  background-color: transparent;
  border: 1px solid coral;
  color: coral;
}

ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul. categories>li {
  align-items: center;
  display: flex;
  list-style: none;
  position: relative;
  z-index: 1;
}

.submenu {
  z-index: -1;
  padding: 10px 0px;
  background-color: black;
  overflow: hidden;
  display: none;
  width: 200px;
  position: absolute;
  line-height: 1.5rem;
  top: 40px;
  left: 0;
}

.submenu li {
  width: 200px;
  display: block;
}

li:hover a>.btn {
  border: 1px solid green;
  color: orange;
}

.submenu li a {
  display: block;
  background-color: transparent;
}

.submenu li:hover {
  display: block;
  padding-left: 5px;
  background-color: transparent;
}

.categories li:hover .submenu {
  display: block;
  border-left: 1px solid coral;
  border-bottom: 1px solid coral;
}

.categories button:hover+.submenu {
  color: coral;
}

<nav>
  <ul>
    <li><a href="#"><button type="">iPhone</button> </a>
      <ul>
        <li><a href="#">iPhone X</a></li>
        <li><a href="#">iPhone 8 Plus</a></li>
        <li><a href="#">iPhone 8</a></li>
        <li><a href="#">iPhone 7 Plus</a></li>
      </ul>
    </li>
    <li><a href="#"><button type="">iPad</button></a>
      <ul>
        <li><a href="#">iPad Pro</a></li>
        <li><a href="#">iPad 2017</a></li>
        <li><a href="#">iPad Mini</a></li>
        <li><a href="#">iPad Air 2</a></li>
      </ul>
    </li>
    <li><a href="#"><button type="">Mac</button></a>
      <ul>
        <li><a href="#">iMac Pro</a></li>
        <li><a href="#">iMac 2017</a></li>
        <li><a href="#">iMac 2016</a></li>
        <li><a href="#">iMac 2015</a></li>
      </ul>
    </li>
    <li><a href="#"><button type="">Watch</button></a>
      <ul>
        <li><a href="#">Watch Series 1</a></li>
        <li><a href="#">Watch Series 2</a></li>
        <li><a href="#">Watch Series 3</a></li>
        <li><a href="#">Watch Series 3 (Edition)</a></li>
      </ul>
    </li>
    <li><a href="#"><button type="">Accessories</button></a>
      <ul>
        <li><a href="#">Apple Mini DisplayPort</a></li>
        <li><a href="#">Мышь Apple Magic Mouse 2</a></li>
        <li><a href="#">Apple USB-C Digital AV </a></li>
        <li><a href="#">Трекпад Apple Magic Trackpad 2 </a></li>
      </ul>
    </li>
  </ul>
</nav>

Я переписал код, суть в том что при наведении на . category ссылки изменяют цвет а так как .submenu потомок класса .category происходит наведение так-же и по .category. Я удалил button потому-что для кнопок меню лучше использовать просто ссылки.

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
}

.menu {
  padding: 10px;
  background: #222;
}
.menu .categories {
  display: flex;
  list-style-type: none;
}
.menu .categories .category {
  padding: 0 10px;
}
.menu .categories .category a {
  color: #fff;
}
.menu .categories .category:hover a {
  color: #ff7300;
}
.menu .categories .category:hover .submenu {
  display: block;
}
.menu .categories .category .submenu {
  list-style-type: none;
  position: absolute;
  background: #222;
  padding: 10px;
  display: none;
}
.menu .categories . category .submenu li a {
  color: #fff;
}
.menu .categories .category .submenu li a:hover {
  color: #ff7300;
}

<nav>
   <ul>
      <li>
         <a href="#">IPhone</a>
         <ul>
            <li><a href="#">iPhone X</a></li>
            <li><a href="#">iPhone 8 Plus</a></li>
            <li><a href="#">iPhone 8</a></li>
            <li><a href="#">iPhone 7 Plus</a></li>
         </ul>
      </li>
      <li>
         <a href="#">IPhone</a>
         <ul>
            <li><a href="#">iPhone X</a></li>
            <li><a href="#">iPhone 8 Plus</a></li>
            <li><a href="#">iPhone 8</a></li>
            <li><a href="#">iPhone 7 Plus</a></li>
         </ul>
      </li>      <li>
         <a href="#">IPhone</a>
         <ul>
            <li><a href="#">iPhone X</a></li>
            <li><a href="#">iPhone 8 Plus</a></li>
            <li><a href="#">iPhone 8</a></li>
            <li><a href="#">iPhone 7 Plus</a></li>
         </ul>
      </li>      <li>
         <a href="#">IPhone</a>
         <ul>
            <li><a href="#">iPhone X</a></li>
            <li><a href="#">iPhone 8 Plus</a></li>
            <li><a href="#">iPhone 8</a></li>
            <li><a href="#">iPhone 7 Plus</a></li>
         </ul>
      </li>      <li>
         <a href="#">IPhone</a>
         <ul>
            <li><a href="#">iPhone X</a></li>
            <li><a href="#">iPhone 8 Plus</a></li>
            <li><a href="#">iPhone 8</a></li>
            <li><a href="#">iPhone 7 Plus</a></li>
         </ul>
      </li>
   </ul>
</nav>

Ваш ответ

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как сделать выпадающий список при наведении курсора html

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

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

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

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

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

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

А что же делать с мобильными браузерами? — или на планшетах спросите вы.

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

Пара слов о преимуществе выпадающих меню:

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

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

к менюПредставляю вашему вниманию первый пример: простое вертикальное выпадающее меню вправо при наведении.

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

Html для вертикального меню

Думаю в плане понимания html у вас не возникнет никаких сложностей, типичные списки с тегами ul и li. Смотрим код:

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

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

к менюСо стилями CSS вопрос немного по сложнее. Я вам покажу код только самого меню, а остальные стили вы сможете посмотреть когда скачаете пример.

Вот эта строчка CSS

Посмотреть что у нас получилось в этом примере можно на скине:

Как работает вертикальное выпадающее меню css вы можете увидеть в режиме демо ниже, или скачав пример:

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

Это еще не конец, идем дальше.

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

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

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

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

Для более сложных меню, вам потребуется сделать немножко больше правок. Смотрим стили:

Вот и все. У нас получилось вот такое меню. Слева кликабельный скин, справа демо и ссылка на скачивание примера:

Выпадающий список HTML

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

Выпадающее меню со списком элементов на HTML

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

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

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

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

Первый шаг к нашему выпадающему списку в меню сделан и вот что получилось. Результат:

Мда. Пока не очень, да? Обычный список какой-то (похож на этот), ведь классы menu и submenu я использовал, а стили не написал.

Добавлю немного CSS-магии. Пропишу прямо в html-файле — в <head><style></style></head>. CSS-код:

Ого! В жизни не видел ничего прекраснее этого минималистичного выпадающего списка. Без JavaScript и обращения к фрилансерам!

Выпадающий при наведении список меню на HTML

И снова мы изобретаем меню на чистом CSS, без использования JS.

Учитывая то, что вы видели в предыдущей части статьи, думаю выглядит многообещающе. А все благодаря чему? Потому что мы умеем присваивать нужным элементам стиль «display:none» и прописывать в CSS чтобы при наведении на него приоритетным было что-то типа «inline-block» взамен «none».

Давайте немного подробнее остановимся на вышеприведенном коде. В нем я присвоил «id=&#187;menu&#187;» основному списку, то есть всему выпадающему меню. Я сделал это для того чтобы обозначить сразу родительские элементы выпадающего списка и сделать их видимыми.

Дальше. В каждый из разделов я вложил дополнительные списки <ul>, которые содержат в себе выпадающие ссылки (см. также как вставить ссылку в HTML). Они будут появляться при наведении.

Перейдем к CSS. Код:

<style >
/* Обнуляю отступы и убираю маркеры у списков. */
ul , li &#123;
margin : 0 ;
padding : 0 ;
list-style-type : none ;
&#125;

/* Задаю параметры для основного, родительского блока, меню выпадающего списка. */
# menu &#123;
display : block ;
position : absolute ;
top : 20px ;
left : 20px ;

/* Задаю стили для блоков выпадающего списка. */
# menu > li &#123;
display : inline-block ;
height : 20px ;
/* Считаем координаты относительно исходного места. */
position : relative ;
&#125;

/* Задаю стили, чтобы скрыть дочерние блоки выпадающего списка. Ну и немного украшаю. */
# menu > li > ul &#123;
position : absolute ;
top : 20px ;
left : 10px ;
display : none ;
background-color : bisque ;
border-radius : 5px ;
width : 185px ;
font-size : 14px ;
padding : 10 0 10 10 ;
&#125;

/* Так я делаю прежде скрытую часть видимой — при наведении курсора. */
# menu > li : hover > ul &#123;
display : block ;
&#125;
</style >

Что хочу отметить дополнительно.

«#menu > li» означает, что стили будут применены только к дочерним элементам по отношению к тегу «ul#menu», а не ко всем как могли подумать некоторые. Внимательнее!

«Position: relative;» — отсчитывает координаты от угла одного из разделов в главном списке, откуда выпадают дочерние элементы.

Последнее: выпадающий список по примеру выше на HTML (см. также особенности HTML) и CSS в оформлении меню сайта это удобная вещь. Для ПК и десктопов. На мобильных устройствах и планшетах нет мышки и курсоров, поэтому такой вариант не подойдет.

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

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

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

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

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

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

Теперь давайте вооружимся магией стилей — при помощи CSS я трансформирую все серии вложенных списков <ul> в крутое и удобное в использовании выпадающее меню с несколькими элементами.

Перейдем к CSS-коду. Что-то мне стало скучно туда-сюда бегать, поэтому я хорошенько его прокомментировал прямо в стилях. Да и вам удобнее будет, если будете пользоваться этим решением.

CSS-код, помещенный в <head> страницы:

Готово! Финальный результат:

БОНУС — суперкрутой выпадающий список на ХТМЛ и ЦСС

Четвертый и последний на сегодня. Я устал, вы устали — думаю четыре выпадающих меню будет достаточно для того, чтобы выбрать наиболее оптимальный вариант для себя.

Тоже делаем список со ссылками, отображающимися при наведении. Никаких анимаций, модных выездов, мигания — только чистый кроссбраузерный код, простой и эффективный. Вместо «display:none;» использую «left: -9999px;». Ну там сами увидите.

< ul class = «ddropdownn» >
< li class = «ddropdownn-top» >
< a class = «ddropdownn-top» href = «/» > Красноярский край < / a >
< ul class = «ddropdownn-inside» >
< li >< a href = «/» > Минусинск < / a >< / li >
< li >< a href = «/» > Ачинск < / a >< / li >
< li >< a href = «/» > Красноярск < / a >< / li >
< li >< a href = «/» > Железногорск < / a >< / li >
< li >< a href = «/» > Канск < / a >< / li >
< li >< a href = «/» > Норильск < / a >< / li >
< / ul >
< / li >

< li class = «ddropdownn-top» >
< a class = «ddropdownn-top» href = «/» > Свердловская область < / a >
< ul class = «ddropdownn-inside» >
< li >< a href = «/» > Екатеринбург < / a >< / li >
< li >< a href = «/» > Верхняя Пышма < / a >< / li >
< li >< a href = «/» > Нижний Тагил < / a >< / li >
< li >< a href = «/» > Первоуральск < / a >< / li >
< li >< a href = «/» > Асбест < / a >< / li >
< li >< a href = «/» > Каменск-Уральский < / a >< / li >
< / ul >
< / li >
< / ul >

CSS-код, который я поместил в <head>:

Результат (без наведения курсора):

Результат (при наведении курсора):

Итоги: скачать готовый html+css код выпадающего списка меню

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

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

Я подготовил для вас архив, который вы можете скачать. Там все 4 выпадающих списка — html код и css стили прямо в файле. Там думаю разберетесь.

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

В этой статье мы разберём, как происходит создание выпадающего меню на HTML, CSS и JavaScript.

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

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

Сперва на HTML и CSS сделаем выпадающее меню которое будет проявляться при наведении мышки, вот его HTML.

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

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

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

Дальше настраиваем внешний вид, делаем FlexBox и задаём отступы, самое главное, что нужно сделать, это тегам <ul> , которые находятся внутри тега <li> , сделать позиционирование absolute и добавить ему свойство display: none , что бы блок не показывался на экране.

Последнее важное изменение, это при наведении мышкой на <li> , внутри которого есть <ul> , он появлялся, вот что получилось.

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

Примечание:

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

Поле со списком | htmlbook.ru

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

<select атрибуты>
  <option атрибуты>Пункт 1</option>
  <option атрибуты>Пункт 2</option> 
</select>

Тег <select> выступает контейнером для пунктов списка и определяет его вид, будет ли это раскрывающийся список или же список с одним или множественным выбором. Вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка, ширина списка при этом определяется автоматически исходя из длины текста внутри <option>. Ниже представлен список множественного выбора, в котором пункты выделяются с помощью клавиши Ctrl и Shift и раскрывающийся список.

Атрибуты тега <select>

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

multiple

Наличие multiple сообщает браузеру отображать содержимое элемента <select> как список множественного выбора. Конечный вид списка зависит от используемого атрибута size. Если он отсутствует, то высота списка равна количеству пунктов, если значение size меньше числа пунктов, то появляется вертикальная полоса прокрутки.

Для выбора нескольких значений списка применяются клавиши Ctrl и Shift совместно с курсором мыши.

В примере 1 показано создание списка множественного выбора.

Пример 1. Список множественного выбора

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><select name="select" size="3" multiple>
    <option selected value="s1">Чебурашка</option>
    <option value="s2">Крокодил Гена</option>
    <option value="s3">Шапокляк</option>
    <option value="s4">Крыса Лариса</option>
   </select>
   <input type="submit" value="Отправить"></p> 
  </form>
 </body>
</html>

name

Определяет уникальное имя элемента <select>. Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения серверным обработчиком.

size

Устанавливает высоту списка. Если значение size равно единице, то список превращается в раскрывающийся. Значение по умолчанию зависит от атрибута multiple. Если он присутствует, то размер списка равен числу элементов. Когда multiple нет, то значение атрибута size равно 1.

Атрибуты тега <OPTION>

Тег <option> также имеет атрибуты, влияющие на вид списка, они представлены далее.

selected

Делает текущий пункт списка выделенным. Если у тега <select> добавлен атрибут multiple, то можно выделять более одного пункта.

value

Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя/значение», где имя задаётся атрибутом name тега <select>, а значение — атрибутом value выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным.

label

Предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри <option>. Если атрибут label присутствует, то текст внутри тега <option> игнорируется и в списке выводится значение label. Браузер Firefox не поддерживает этот атрибут.

Создание списка показано в примере 2.

Пример 2. Использование списка

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><strong>Выбери персонажа</strong></p>
   <p><select name="hero">
    <option value="s1">Чебурашка</option>
    <option value="s2" selected>Крокодил Гена</option>
    <option value="s3">Шапокляк</option>
    <option value="s3" label="Лариса">Крыса Лариса</option>
   </select> 
   <input type="submit" value="Отправить"></p>
  </form> 
 </body>
</html>

Группирование элементов списка

При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется тег <optgroup>. Он представляет собой контейнер, внутри которого располагаются теги <option> объединённые в одну группу. Особенностью тега <optgroup> является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Для добавления заголовка группы используется атрибут label, как показано в примере 3.

Пример 3. Группирование элементов списка

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><select name="food">
    <optgroup label="Русская кухня">
     <option value="r1">Закуска Барская</option>
     <option value="r2">Раки, фаршированные по-царски</option>
     <option value="r3">Биточки в горшочке</option>
    </optgroup>
    <optgroup label="Украинская кухня">
     <option value="u1">Галушки славянские</option>
     <option value="u2">Пампушки украинские</option>
     <option value="u3">Жаркое по-харьковски</option>
    </optgroup>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Результат примера показан на рис.  1.

Рис. 1. Группированный список

формы

HTML по теме

• Тег <optgroup>
• Тег <option>
• Тег <select>

Псевдокласс :hover | htmlbook.ru

Краткая информация

Версии CSS

Описание

Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.

Синтаксис

элемент:hover { . .. }

Значения

Нет.

Пример 1

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>hover</title>
  <style>
   a:link {
    color: #0000d0; /* Цвет ссылок */
    padding: 2px; /* Поля вокруг текста */ 
   }
   a:hover {
    background: #786b59; /* Цвет фона под ссылкой */ 
    color: #ffe; /* Цвет ссылки */ 
   } 
  </style>
 </head>
 <body>
  <p><a href="1.html">Ссылка 1</a></p>
  <p><a href="2.html">Ссылка 2</a></p>
  <p><a href="3.html">Ссылка 3</a></p> 
 </body>
</html>

В данном примере псевдокласс :hover применяется к ссылке (тегу <a>), при этом меняется цвет ссылки и фона под ней. Результат примера показан на рис. 1.

Рис. 1. Результат использования псевдокласса :hover для ссылок

Пример 2

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>hover</title>
  <style>
   ul {
    width: 180px; /* Ширина меню */
    list-style: none; /* Для списка убираем маркеры */
    margin: 0; /* Нет отступов вокруг */
    padding: 0; /* Убираем поля вокруг текста */
    font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
    font-size: 10pt; /* Размер названий в пункте меню */
   }
   li ul {
    position: absolute; /* Подменю позиционируются абсолютно */
    display: none; /* Скрываем подменю */
    margin-left: 165px; /* Сдвигаем подменю вправо */
    margin-top: -2em; /* Сдвигаем подменю вверх */
   }
   li a {
    display: block; /* Ссылка как блочный элемент */
    padding: 5px; /* Поля вокруг надписи */
    text-decoration: none; /* Подчеркивание у ссылок убираем */
    color: #666; /* Цвет текста */
    border: 1px solid #ccc;/* Рамка вокруг пунктов меню */
    background-color: #f0f0f0; /* Цвет фона */
    border-bottom: none; /* Границу снизу не проводим */
   }
   li a:hover {
    color: #ffe; /* Цвет текста активного пункта */
    background-color: #5488af; /* Цвет фона активного пункта */
   }
   li:hover ul { 
    display: block; /* При выделении пункта курсором мыши отображается подменю */
   }
   . brd {
    border-bottom: 1px solid #ccc; /* Линия снизу */
   }
  </style>
 </head>
 <body>
  <ul>
   <li><a href="russian.html">Русская кухня</a>
    <ul> 
     <li><a href="linkr1.html">Бефстроганов</a></li> 
     <li><a href="linkr2.html">Гусь с яблоками</a></li> 
     <li><a href="linkr3.html">Крупеник новгородский</a></li> 
     <li><a href="linkr4.html">Раки по-русски</a></li> 
    </ul> 
   </li> 
   <li><a href="ukrainian.html">Украинская кухня</a> 
    <ul> 
     <li><a href="linku1.html">Вареники</a></li> 
     <li><a href="linku2.html">Жаркое по-харьковски</a></li> 
     <li><a href="linku3.html">Капустняк черниговский</a></li> 
     <li><a href="linku4.html">Потапцы с помидорами</a></li> 
    </ul> 
   </li>
   <li><a href="caucasus. html">Кавказская кухня</a> 
    <ul> 
     <li><a href="linkc1.html">Суп-харчо</a></li> 
     <li><a href="linkc2.html">Лилибдж</a></li> 
     <li><a href="linkc3.html">Чихиртма</a></li> 
     <li><a href="linkc4.html">Шашлык</a></li> 
    </ul> 
   </li> 
   <li><a href="asia.html">Кухня Средней Азии</a></li> 
  </ul>
 </body>
</html>

В данном примере псевдокласс :hover добавляется к элементу списка (тег <li>) для создания двухуровневого меню. Результат примера показан на рис. 2.

Рис. 2. Использование :hover для создания меню

Браузеры

В браузере Internet Explorer до версии 6.0 включительно псевдокласс :hover работает только для ссылок.

Псевдоклассы

CSS по теме

• Псевдокласс :hover

Статьи по теме

• Атрибут data-*
• Всплывающая подсказка на CSS
• Наложение и порядок слоёв
• Полоски при наведении
• Псевдоклассы
• Рамки и границы
• Свойства ссылок
• Цвет ссылок

Рецепты CSS

• Как изменить вид ссылки при наведении на нее курсора мыши?
• Как сделать, чтобы цвет рамки вокруг изображения-ссылки менялся при наведении на него курсора мыши?
• Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
• Как сделать, чтобы строка таблицы меняла цвет при наведении на нее курсора мыши?

Организация выпадающего списка при наведении курсора на словосочетание — Вопрос от Січинці школа

• Вопросы
• Горячие
• Пользователи
• Вход/Регистрация

>

Категории вопросов

Задать вопрос +

Основное

• Вопросы новичков (16345)
• Платные услуги (2084)
• Вопросы по uKit (81)

Контент-модули

• Интернет-магазин (1430)
• Редактор страниц (236)
• Новости сайта (497)
• Каталоги (805)
• Блог (дневник) (111)
• Объявления (294)
• Фотоальбомы (431)
• Видео (255)
• Тесты (60)
• Форум (575)

Продвижение сайта

• Монетизация сайта (218)
• Раскрутка сайта (2446)

Управление сайтом

• Работа с аккаунтом (5289)
• Поиск по сайту (425)
• Меню сайта (1754)
• Домен для сайта (1526)
• Дизайн сайта (13441)
• Безопасность сайта (1463)
• Доп. функции (1304)

Доп. модули

• SEO-модуль (225)
• Опросы (62)
• Гостевая книга (98)
• Пользователи (431)
• Почтовые формы (317)
• Статистика сайта (196)
• Соц. постинг (212)
• Мини-чат (91)

Вебмастеру

• JavaScript и пр. (642)
• PHP и API на uCoz (233)
• SMS сервисы (10)
• Вопросы по Narod. ru (422)
• Софт для вебмастера (39)

…

Bootstrap Dropdown Hover

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

Зависимости компонентов

Требуются файлы jQuery, Bootsrap 3.x CSS и JavaScript. Зависит от компонента Bootstrap Dropdown и animate.css, если вы хотите использовать анимацию.

Установка

Просто включите стиль Dropdownhover и файлы сценариев после Bootstrap.

 

  <голова>
    
    
    <ссылка href="css/bootstrap. min.css" rel="таблица стилей">
    
    <ссылка href="css/animate.min.css" rel="таблица стилей">
    
  
  <тело>
     
Привет, мир!
 
          
 

Пример

Оберните триггер раскрывающегося списка и раскрывающееся меню в .dropdown , поскольку это важно. Добавьте data-hover="dropdown" к основной кнопке действия или ссылке, чтобы активировать событие hover .

 <дел>
  
   Раскрывающийся список 
  
  <ул>
    
Действие
    
Другое действие
    

      Еще один раскрывающийся список
      <ул>
        
Действие
        
Другое действие
        

          Еще один раскрывающийся список
          <ул>
          . ..
          
        
        
Что-то еще здесь
        
Отдельная ссылка
       
    
    
Что-то еще здесь
    
Отдельная ссылка
  
 

Выравнивание

В основном выпадающее меню позиционируется с помощью CSS, но если выпадающее меню находится за пределами области просмотра, оно позиционируется с помощью JavaScript в соответствии с окном. Также выпадающее меню поддерживает классы .dropdown-menu-right и .pull-right для выравнивания выпадающего меню вправо.

Возможны проблемы с обрезкой

Выпадающее меню использует CSS и JavaScript для позиционирования, но есть некоторые проблемы с «длинными» выпадающими меню на маленьких экранах. Плагин автоматически пытается найти лучшее решение, но есть вероятность, что часть выпадающего списка будет обрезана. Поэтому старайтесь избегать выпадающих меню, которых больше 9. 0017 500px высота.

 

  ...

или же

...

 

Tree

Добавьте data-hover="dropdown" в