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

1

margin

li{
  float: none;
  margin: 0 0 1px 0;

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

a{
  background-color: #ccc + #111;
  color: #ccc - #333;
  &:hover{
    background-color: #ccc + #222;
  }
}

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

1

dislay: none

.sub-hormenu{
  display: none;

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

1

hormenu

&:hover .sub-hormenu{
  display: block;
}

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

1

:after

Как раз здесь нам и понадобиться относительное позиционирование для ссылок, о котором говорилось ранее. Создание стрелки “поручим” отдельному классу

1

arrow

. arrow:after{
  content: '';
  position: absolute;
  top: 50%;
  left: 80%;
  width: 0;
  height: 0;
  border-top: 4px solid #ccc - 666;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  margin-top: -2px;
}

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

@import "compass/reset";
 a{
   text-decoration: none;
 }
 .arrow:after{
   content: '';
   position: absolute;
   top: 50%;
   left: 80%;
   width: 0;
   height: 0;
   border-top: 4px solid #ccc - 666;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   margin-top: -2px;
 }
 .hormenu{
   margin: 50px 0 0 50px;
   overflow: hidden;
   li{
     float: left;
     margin-left: 1px;
     &:first-child{
       margin-left: 0;
     }
     &:hover .
  sub-hormenu{
       display: block;
     }
     .sub-hormenu{
       display: none;
       li{
         float: none;
         margin: 0 0 1px 0;
         a{
           background-color: #ccc + #111;
           color: #ccc - #333;
           &:hover{
             background-color: #ccc + #222;
           }
           &:after{
             content: none;
           }
         }
       }
     }
     a{
       display: block;
       line-height: 25px;
       height: 25px;
       width: 130px;
       text-align: center;
       background-color: #ccc;
       color: #ccc - #555;
       position: relative;
     }
   }
 }

… и то, как оно выглядит:

На этом все.

Cоздание выпадающего меню на HTML и CSS просто

Автор статьи: admin

Метки: CSS / HTML / Как сделать

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

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

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

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

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

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

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

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

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

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

Примечание:

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

В первом селекторе мы добавляем высоту, чтобы было проще менять позицию, во втором, добавляем позицию top равного 45 пикселем, также устанавливаем свойство visibility: hidden, которое отвечает за скрытие элемента, и opacity: 0, для прозрачности, значение ноль, означает что элемент полностью прозрачен.

В последнем селекторе который мы изменяем, который ещё отвечает за наведение мышки, убираем display и добавляем visibility: visible, для показа элемента, top равный 25 пикселям и opacity: 1, для полной не прозрачности.

Также появилось свойство transition, для плавных переходов, мы задаём ему время перехода 400 миллисекунды.

Вывод:

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

Подписываетесь на соц-сети:

Оценка:

Количество оценивших: 1
Средняя оценка: 5,00

Загрузка…

Поделится:

Также рекомендую:

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

Ранее на этой неделе я искал простое руководство по горизонтальному выпадающему меню только для CSS, предназначенное для новичков в CSS. И я не смог найти его, так что вот как построить это меню….

• Пункт 1
• Пункт 2
  • Пункт 2.1
  • Пункт 2.2
• Пункт 3
  • Пункт 3.1
  • Пункт 3.2
  • Пункт 3.3
• Пункт 4
  • Пункт 4.1
  • Пункт 4.2
  • Пункт 4.3

Я собираюсь сделать это в два этапа:

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

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

 

Элемент 1
Элемент 2
Элемент 3
Элемент 4
 

Ничего особенного. Теперь давайте посмотрим на css:

 ul#horiznav{
маржа: 0;
padding:0;/*установите оба значения на ноль, чтобы устранить несоответствия браузера*/
list-style-type:none;/*избавьтесь от маркеров*/
height:32px/*просто чтобы избежать возможных проблем с плавающей запятой*/
}

#горизонт ли{
float:left;/* перемещаем элемент li так, чтобы меню располагалось горизонтально. ..*/
ширина: 150 пикселей/*... и установите ширину*/
}

#горизнав ли а{
display:block;/*сделать ссылку блочным элементом...*/
width:150px;/*...с фиксированной шириной...*/
line-height:30px;/*...и установите высоту строки, чтобы центрировать текст по вертикали*/
text-align:center;/*центрировать текст по горизонтали...*/
color:white;/*...раскрасить в белый цвет...*/
text-decoration:none;/*...и удалить подчеркивание по умолчанию*/
цвет фона:#EA9531;/*сделайте ссылку оранжевым фоном...*/
border:1px сплошной белый/*...и белая рамка...*/
}

#horiznav li a:hover{
color:#333333/*изменить цвет текста на :hover*/
}
 

См. комментарии в css для объяснения. Главное, что делает меню горизонтальным, — это плавающий элемент

Хорошо, теперь CSS. Нам нужно сделать несколько дополнений — отмечены красным:

ul#horiznav, #horiznav ul{/*также удалите маркеры из раскрывающегося списка ul*/
маржа: 0;
заполнение: 0;
тип стиля списка: нет;
высота: 32px
}

#горизонт ли{
плыть налево;
ширина: 152 пикселя;
position:relative/*установить position:relative в качестве начальной точки для абсолютного позиционирования выпадающего списка*/
}

#горизнав ли а{
дисплей:блок;
ширина: 150 пикселей;
высота строки: 30 пикселей;
выравнивание текста: по центру;
белый цвет;
текстовое оформление: нет;
цвет фона:#EA9531;
граница: 1px сплошной белый
}

#horiznav li a:hover{
цвет:#333333
}

#горизонт ли ул{
display:none;/*скрыть раскрывающийся список*/
position:absolute;/*абсолютное позиционирование. .*/
left:0;/*...выравниваем левый край с левым краем родительского li...*/
top:32px/*...и 32px вниз сверху - 30px высота + 2px для границы*/
}

#horiznav li: hover ul {
display:block/*отображать ul при наведении курсора на родительский li*/
}

#horiznav li ul a{
background-color:#FFB33B/*изменить цвет фона раскрывающегося списка*/
} 

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

 

Элемент 1

Подпункт 1
Второй подэлемент
Номер Трес


 

 #navbar {
положение: абсолютное;
сверху: 0;
справа: 0;
маржа: 0;
заполнение: 0;}
#навбар ли {
стиль списка: нет;
плыть налево; } 

 #navbar li a {
дисплей: блок;
отступ: 3px 8px;
преобразование текста: верхний регистр;
текстовое оформление: нет;
цвет: #999;
вес шрифта: полужирный; }
#navbar li a:hover {
цвет: #000; } 

 #navbar li ul {
дисплей: нет; }
#navbar li:hover ul, #navbar li.hover ul {
положение: абсолютное;
дисплей: встроенный;
слева: 0;
ширина: 100%;
маржа: 0;
заполнение: 0; } 

 #navbar li:hover li, #navbar li.hover li {
плыть налево; }
#navbar li:hover li a, #navbar li.hover li a {
цвет: #000; }
#navbar li li a:hover {
цвет: #357; }