Разное

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

04.07.2021

Содержание

menu — Выравнивание выпадающего меню на css

На этот вопрос уже дан ответ здесь:

Закрыт 3 года назад.

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        header{
            width: 100%;
            border: 1px solid gray;
            padding: 20px;
        }
        .
 
 wrapper{
            width: 80%;
            margin: 0 auto;
        }
        .wrapper:after{
            content: '';
            display: block;
            clear: both;
            overflow: hidden;
        }
        nav{
            width: 50%;
            float: right;
            clear: both;
        }
        .item{
            float: left;
            margin-right: 30px;
        }
        .dropdown{
            display: none;
        }
        .drop:hover + .dropdown{
            display: block;
            position: absolute;
            width: 100%;
            background: green;
            border: 1px solid gray;
        }
    </style>
</head>
<body>

<header>
    <div>
        <nav>
            <ul>
                <li>
                    <a href="#">item1</a>
                    <ul>
                        <li><p>item</p></li>
                        <li><p>item</p></li>
                        <li><p>item</p></li>
                    </ul>
                </li>
                <li>
                    <a href="#">item2</a>
                    <ul>
                        <li><p>item</p></li>
                        <li><p>item</p></li>
                        <li><p>item</p></li>
                    </ul>
                </li>
                <li>
                    <a href="#">item3</a>
                    <ul>
                        <li><p>item</p></li>
                        <li><p>item</p></li>
                        <li><p>item</p></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</header>

</body>
</html>

Выпадающее меню с использованием только CSS и недокументированных возможностей элемента флажка

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

 

 

Разметка

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

 

<div>
    <input type="checkbox">
    <label for="checkbox_toggle">Click to Expand</label>
    <ul>
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link Two</a></li>
        <li><a href="#">Link Three</a></li>
        <li><a href="#">Link Four</a></li>
    </ul>
</div>

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

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

Недокументированные возможности элемента флажка

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

 

input[type=checkbox]{
    display: none;
}

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

 

А вот и недокументированная возможность.

Если объединить псевдокласс :checked с родственным селектором ~, можно изменять свойства CSS элементов, следующих за элементом флажка. Это причина, по которой нужно, чтобы элемент флажка располагался выше других элементов в дереве объектов документа.

 

input[type=checkbox]:checked ~ ul {
    display: block
}

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

Надеемся, вам понравился этот урок.

Автор урока Danny Markov

Перевод — Дежурка

Смотрите также:

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

В предыдущей статье “Создаем вертикальное меню на CSS” был освещен вопрос построения вертикального меню с подменю.

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

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

Код, написанный на SASS (SCSS) короче и логически читается проще, чем CSS. Поэтому, рекомендую изучить этот вопрос в статьях “SASS (SCSS) в картинках — Часть 1”, “SASS (SCSS) в картинках — Часть 2”.

Мы же приступим к созданию горизонтального меню с подменю “на коленках”. Почему говорю так? Дело в том, что существует масса готовых примеров и кода, а также генераторов различных меню. Но они неинтересны — нам нужно разобраться в принципе построения и возможности самому написать такую навигацию.

Как обычно, начинаем с каркаса меню, выполненного на HTML:

<ul>
  <li>
    <a href="#">Link_1</a>
      <ul>
      <li>
        <a href="#">Link_1-1</a>
      </li>
      <li>
        <a href="#">Link_1-2</a>
      </li>
      <li>
        <a href="#">Link_1-3</a>
      </li>
      <li>
        <a href="#">Link_1-4</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Link_2</a>
  </li>
  <li>
    <a href="#">Link_3</a>
      <ul>
      <li>
        <a href="#">Link_3-1</a>
      </li>
      <li>
        <a href="#">Link_3-2</a>
      </li>
      <li>
        <a href="#">Link_3-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Link_4</a>
  </li>
  <li>
    <a href="#">Link_5</a>
      <ul>
      <li>
        <a href="#">Link_5-1</a>
      </li>
      <li>
        <a href="#">Link_5-2</a>
      </li>
      <li>
        <a href="#">Link_5-3</a>
      </li>
      <li>
        <a href="#">Link_5-4</a>
      </li>
      <li>
        <a href="#">Link_5-5</a>
      </li>
    </ul>
  </li>
</ul>

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

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

Приступим к оформлению нашего меню с помощью CSS. Сразу оговорюсь, что примеры кода, представленного здесь, написаны на SASS (SCSS). Начнем с того, что расположим навигацию горизонтально:

.hormenu{
  margin: 50px 0 0 50px;
  overflow: hidden;
  li{
    float: left;
    margin-left: 1px;
    &:first-child{
      margin-left: 0;
    }

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

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

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

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

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

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

a{
  display: block;
  line-height: 25px;
  height: 25px;
  width: 130px;
  text-align: center;
  background-color: #ccc;
  color: #ccc - #555;
  position: relative;
}

Продолжим стилизацию нашей навигации и займемся подменю, а точнее — его подпунктами . Уберем у этих элементов плавание влево и левый , чтобы они не наследовали эти свойства. Убираем плавание, чтобы элементы расположились вертикально, а левый — убрать “лесенку”:

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

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

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

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

.sub-hormenu{
  display: none;

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

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

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

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

. 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;
     }
   }
 }

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

На этом все.

cssdropdown menu

горизонтальное » Скрипты для сайтов

7 607 Скрипты / Menu & Nav

Эффект зачеркивания при наведении в меню

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

5 329 Скрипты / Menu & Nav

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

Небольшой скрипт, который поможет в создании более эстетического адаптивного горизонтального меню. Если размер экрана не позволяет отобразить все пункты горизонтального меню, то данный скрипт перемещает эти пункты в выпадающее меню — «три точки». Использование этого скрипта, позволит отображать адаптивную иконку (гамбургер), тогда, когда вы сами это решите, так как меню теперь будет всегда смотреться аккуратно.

5 693 Скрипты / Menu & Nav

Диагональное меню на CSS

Используя возможности CSS3 в этом уроке сделаем диагональное меню, и напишем media queries, чтобы придать ему адаптивности.

2 700 Скрипты / Menu & Nav

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

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

5 103 Скрипты / Menu & Nav

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

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

2 987 Скрипты / Menu & Nav

Размытое меню на CSS3

Простое горизонтальное меню с эффектом размытия и с элементом адаптивности. Используется CSS3 и HTML5.

2 887 Скрипты / Menu & Nav

HorizontalNav — горизонтальная навигация

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

4 032 Скрипты / Menu & Nav

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

Горизонтальное меню с выпадающими подпунктами. Выпадающие элементы используют jQuery, все остальное оформлено на CSS. В демо включен практически макет сайта, осталось только заполнить центральную часть контентом и нарисовать красивую шапку. Но можно использовать и только саму идею меню.

2 014 Скрипты / Menu & Nav

Меню с эффектом подпрыгивания

Интересное подпрыгивающее меню (bounce), сделанное с помощью псевдо элементов и пользовательских атрибутов на CSS3. В примере простое горизонтальное и горизонтальное с выпадающими под пунктами меню.

2 994 Скрипты / Menu & Nav

Многоуровневое выпадающее меню

Многоуровневое выпадающее меню на CSS2. При этом работает оно в IE5.5, IE6, IE7, IE8, Firefox, Opera, Safari(PC) и Google Chrome.

2 079 Скрипты / Menu & Nav

Многоцветное меню на CSS3

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

2 724 Скрипты / Menu & Nav

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

Выпадающее меню на CSS3 сделанное на базе UI созданного Владимиром Кудиновым.

Создать выпадающее меню в Joomla при помощи модулей и Bootstrap

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

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

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

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

Чтобы изменить формат меню и сделать его выпадающим, вам необходимо зайти в “Менеджер расширений”. Затем перейдите в модули и найдите в списке стандартное расширение для элемента меню Joomla. Вам необходимо открыть “Основные параметры” модуля, чтобы изменить его тип. Потом перейдите в “Дополнительные параметры”, пока не доберетесь до суффиксов CSS-классов в настройках. Именно от выбранного суффикса зависит то, как будет отображаться модуль в Joomla. Вам необходимо выбрать пункт vmenu (возможно, в названии будут присутствовать и другие буквы). Также не забудьте выбрать “Отображение на всех страницах”, дабы избежать путаницы.

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

Есть еще один способ, как без использования Bootstrap и посторонних модулей сделать выпадающее навигационное меню в Joomla 3. Для этого вам необходимо будет лишь создать пункты меню специального типа. Перейдите в настройки определенной менюшки и в окно создания пунктов. Далее напишите имя пункта, а в типе укажите “Статьи” и выберите ссылку на необходимую страницу. Не забудьте указать родительское меню и сохранить изменения.

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

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

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

Чтобы создать меню в Bootstrap, необходимо использовать элемент navbar – это сокращенно навигационный бар. Вы сможете создать меню любого типа при помощи данного элемента, но нужно будет поработать с прописью его функций. Navbar в Bootstrap можно будет сделать адаптивным, с привязкой к прокрутке (как поисковая строка в Яндексе) и фиксированным. Вам нужно будет заключить navbar в специальный тег <nav>. Чтобы в Bootstrap сделать именно меню навигации, вам нужно будет оформить его в виде списка с тегами <ul><li>. Для формирования выпадающего эффекта укажите для родительского элемента li класс dropdown, а для дочерних – dropdown-menu.

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

Это мощный, высоко настраиваемый модуль для Joomla. Рекомендуется скачивать данное расширение с проверенных источников, так как иногда злоумышленники внедряют в структуру модуля вредоносное ПО для заражения сайтов вирусами. Модуль поддерживает любую ориентацию для меню (горизонтальную и вертикальную). Вам придется разобраться в настройках модуля самостоятельно, так как админка расширения доступна только на трех языках: английский, испанский и словацкий.

Большое преимущество использования именно модуля Ari Ext Menu для формирования выпадающего меню – это совместимость с любым браузером мира, а также автоматическая адаптация менюшки под устройства с маленькими расширениями. Установка расширения ничем не отличается от стандартной. Еще одна особенность модуля – это наличие анимационного эффекта. Он настраивается через пункт настроек Transittion type в админке – есть два вида анимации. Также в админке вы сможете настроить оформление расширения. А если доступных возможностей для вас окажется мало, то можете отредактировать файл menu.min.css, который определяет стиль элемента.

Обычно, описанного выше расширения достаточно, чтобы реализовать любую задумку в меню навигации. Но модуль Jquery Jumpmenu JT также заслуживает место быть в данном обзоре, так как имеет одну отличительную особенность – он занимает минимум места на сайте, потому не сильно нагружает браузеры юзеров и повышает скорость загрузки менюшки. Кроме того, созданная вами навигация так же будет адаптивной, как и с Ari Ext Menu. Установка модуля производится через стандартные возможности Joomla. Скачайте архив расширения и установите его в админке при помощи специального менеджера. Не забудьте определить позицию для модуля.

Как убрать выпадающее меню?

Здравствуйте, не силен в программировании. Помогите убрать выпадающее меню на сайте kdc-tok.tmbreg.ru/

Вот код, с ним нужно что-то сделать. Заранее спасибо!

/*
Template Name: PlusBusiness
File: Navigation CSS
Author: OS Templates
Author URI: www.os-templates.com/
Licence: Creative Commons Attribution-Share Alike 3.0 Unported License
*/

#topnav{
display:block;
float:right;
margin:7px 0 0 0;
padding:0;
list-style:none;
font-size:14px;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#topnav ul, #topnav li{
float:left;
list-style:none;
margin:0;
padding:0;
}

#topnav li a:link, #topnav li a:visited, #topnav li a:hover{
display:block;
margin:0;
padding:15px 20px;
color:#999999;
background-color:#333333;
}

#topnav ul ul li a:link, #topnav ul ul li a:visited{
border:none;
}

#topnav li.last a{
margin-right:0;
}

#topnav li a:hover, #topnav ul li.active a{
color:#FFFFFF;
background-color:#B2C629;
}
#topnav li li a:link, #topnav li li a:visited{
width:150px;
float:none;
margin:0;
padding:7px 10px;
font-size:12px;
font-weight:normal;
}

#topnav li ul{
z-index:9999;
position: absolute;
left: -999em;
height:auto;
width:170px;
border-left:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
}

.menu .sub{
display: none;
}

#topnav li ul a{width: 140px;}

#topnav li ul ul{margin: -32px 0 0 0;}

#topnav li:hover ul ul{left: -999em;}

#topnav li:hover ul, #topnav li li:hover ul{left:auto;}

#topnav li:hover{ position: static;}

#topnav li.last a{margin-right:0;}

/* ———————————————-Column Navigation————————————-*/

#column .subnav{display:block; width:250px; padding:25px; background-color:#F9F9F9; margin-bottom:30px;}

#column .subnav h3{
margin:0 0 20px 0;
padding:0 0 14px 0;
font-size:20px;
font-weight:normal;
font-family:Georgia, «Times New Roman», Times, serif;
color:#666666;
background-color:#F9F9F9;
line-height:normal;
border-bottom:1px dotted #666666;
}

#column .subnav ul{
margin:0;
padding:0;
list-style:none;
}

#column .subnav li{
margin:0 0 3px 0;
padding:0;
}

#column .subnav ul ul, #column .subnav ul ul ul, #column .subnav ul ul ul ul, #column .subnav ul ul ul ul ul{border-top:none; padding-top:0;}

#column .subnav a{
display:block;
margin:0;
padding:5px 10px 5px 20px;
color:#777777;
background:url(../images/green_file.gif) no-repeat 10px center #F9F9F9;
text-decoration:none;
border-bottom:1px dotted #666666;
}

#column .subnav a:hover{color:#B2C629; background-color:#F9F9F9;}

#column .subnav ul ul a, #column .subnav ul ul ul a, #column .subnav ul ul ul ul a, #column .subnav ul ul ul ul ul a{background:url(../images/black_file.gif) no-repeat #F9F9F9;}
#column .subnav ul ul a{padding-left:40px; background-position:30px center;}
#column .subnav ul ul ul a{padding-left:50px; background-position:40px center;}
#column .subnav ul ul ul ul a{padding-left:60px; background-position:50px center;}
#column .subnav ul ul ul ul ul a{padding-left:70px; background-position:60px center;}

* {box-sizing: border-box;}
form {
position: relative;
width: 300px;
margin: 0 auto;
}
input, button {
border: none;
outline: none;
border-radius: 3px;
}
input {
width: 100%;
height: 42px;
background: #F9F0DA;
padding-left: 15px;
}
button {
height: 26px;
width: 26px;
position: absolute;
top: 8px;
right: 8px;
background: #F15B42;
cursor: pointer;
}
button:before {
content: «\f105»;
font-family: FontAwesome;
color: #F9F0DA;
font-size: 20px;
font-weight: bold;
}

Раскрывающееся меню

CSS: полное руководство

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

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

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

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

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

Найдите свой учебный лагерь