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

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

Создал меню на 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>

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

О сайтеПравилаКонтакты

» Статьи » Разработка » Выпадающее меню на HTML и CSS

  • Инструменты
  • Заработок
  • Раскрутка

28 января 2015 . Антон Кулешов

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

Перед прочтением предлагаю рассмотреть — горизонтальное меню для сайта.

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

Итак, структура HTML:

<div>
   <!-- #navigation -->
  <div>
       <!-- #menu -->
        <div>
         <!-- #nav-->
          <ul>
               <!-- Home Item -->
                <li>
                  <a href="#">Главная</a>
                   <!-- Level 1 -->
                  <ul>
                      <li><a href="#">Пункт №1</a></li>
                     <li><a href="#">Пункт №2</a></li>
                     <li><a href="#">Пункт №3</a></li>
                     <li><a href="#">Пункт №4</a></li>
                     <li><a href="#">Пункт №5</a></li>
                     <li><a href="#">Пункт №6 - Урв.
2</a> <!-- Level 2 --> <ul> <li><a href="#">Подпункт №1</a></li> <li><a href="#">Подпункт №2</a></li> <li><a href="#">Подпункт №3 - Урв. 3</a> <!-- Level 3 --> <ul> <li><a href="#">Подпункт №1</a></li> <li><a href="#">Подпункт №2</a></li> <li><a href="#">Подпункт №3 - Урв. 4</a> <!-- Level 4 --> <ul> <li><a href="#">Подпункт №1</a></li> <li><a href="#">Подпункт №2</a></li> <li><a href="#">Подпункт №3</a></li> </ul> <!-- END Level 4 --> </li> </ul> <!-- END Level 3 --> </li> </ul> <!-- END Level 2 --> </li> </ul> <!-- END Level 1 --> </li> <!-- END Home Item --> <!-- Portfolio Item --> <li> <a href="#">Портфолио</a> <ul> <li><a href="#">Пункт №1</a></li> <li><a href="#">Пункт №2</a></li> <li><a href="#">Пункт №3</a></li> <li><a href="#">Пункт №4</a></li> <li><a href="#">Пункт №5</a></li> </ul> </li> <!-- END Portfolio Item --> <!-- Blog Item --> <li> <a href="#">Блог</a> <ul> <li><a href="#">Пункт №1</a></li> <li><a href="#">Пункт №2</a></li> <li><a href="#">Пункт №3</a></li> <li><a href="#">Пункт №4</a></li> </ul> </li> <!-- END Blog Item --> <li><a href="#">Сервисы</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Написать нам</a></li> </ul> <!-- END #nav --> <!-- Search Form --> <form action="#"> <input type="text" value="Поиск.
.." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" /> </form> <!-- END Search Form --> </div> <!-- END #menu --> </div> <!-- END #navigation --> </div>

В оберточный div помещаем заготовку нашего меню и форму для строки поиска. Первый уровень нашего меню представляет собой основные пункты меню, которые будут видны всегда, запихнуты они в элементы li списка ul с id=nav. Обворачиваем их в ссылки и начинаем наращивать нашу структуру – кладем списки ul без id в нужные элементы li корневого списка. Необходим еще один уровень вложенности? — Всегда, пожалуйста, выбираем li и засовываем туда еще один список. Количество уровней не ограничено, но не злоупотребляйте этим, иначе меню станет просто неюзабельным.

Далее подключаем уже готовый файл CSS:

<link href="style-menu.css" rel="stylesheet" type="text/css" />

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

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

#nav li a:hover,
#nav li ul li a:hover{
  transition-property: color, background;
 transition-duration: 0.5s, 0.5s; 
   transition-timing-function: linear, ease-out;
}
.searchfield:focus,
.searchfield:not(:focus){
  transition-property: width; 
    transition-duration: 0.5s, 0.5s; 
   transition-timing-function: linear, ease-out;
}
#menu_div:hover,
#navigation:hover,
#nav li ul a, 
#menu_div,
#navigation, 
#nav li a, 
#menu_div:not(:hover), 
#navigation:not(:hover){
 transition-property: opacity;
   transition-duration: 0.5s, 0.5s;
    transition-timing-function: linear, ease-out;
}

В transition-property указываем необходимое нам свойство: цвет, прозрачность, длину, ширину, фон и т.п., transition-duration – задает скорость изменения указанного свойства, transition-timing-function – стиль изменения свойства – довольно интересный атрибут, но об этом расскажу как-нибудь в следующий раз.

#Меню

Ещё одно адаптивное меню Два способа сделать меню для сайта на HTML и CSS Аккордеон меню на CSS Растянутый на всю ширину HTML список Плавный скроллинг и плавающее меню

Комментарии не найдены

Как сделать вкладки-табы для сайта на jQuery

Два способа сделать меню для сайта на HTML и CSS

Популярное

1 Пишем парсер контента на PHP2 Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте3 Лучший способ прижать футер используя flexbox4 Пишем первый модуль для 1С-Битрикс с использованием ядра D75 Делаем подгрузку контента при прокрутке страницы

Обратите внимание

html — Использование CSS для горизонтального отображения выпадающего меню

спросил

Изменено 7 лет, 3 месяца назад

Просмотрено 5к раз

Я пытаюсь использовать горизонтальный список в веб-части SharePoint. Я просматривал этот код снова и снова и не могу найти проблему. По какой-то причине список по-прежнему отображается вертикально. Есть идеи?

CSS

 ул{
        заполнение: 0;
        стиль списка: нет;
        ширина:100%;
        выравнивание текста: по центру;
        высота: 100 пикселей;
        фон: #ffffff центр без повторов;
    }
    уль ли {
        дисплей: встроенный блок;
        плыть налево; отступ: 25px 25px 0 125px;
        маржа: 0;
        положение: родственник;
        размер шрифта: 25px; вес шрифта: полужирный; цвет: #FFFFFF;
        выравнивание текста: по центру;
    }
    уль ли а {
        дисплей: блок;
        цвет: #FFF; отступ: 10px 5px;
        текстовое оформление: нет;
    }
    уль ли а:наведите{
    }
    ул ли ул. выпадающий список {
        минимальная ширина: 150 пикселей; /* Устанавливаем ширину раскрывающегося списка */
        ширина: 100%;
        дисплей: нет;
        положение: абсолютное;
        z-индекс: 999;
        слева: 0;
        плыть налево;
    }
    ul li:наведите ul. dropdown{
        дисплей: встроенный; /* Показать раскрывающийся список */
        фон: #FFFFFF;
        слева: 0;
        ширина:100%;
        маржа: 0;
        заполнение: 0;
    }
    ul li ul.dropdown li {
        дисплей: встроенный;
        плыть налево;
        фон: #FFFFFF;
    }
 

Список HTML (все еще в процессе; просто тестирую, прежде чем исправить весь текст/ссылки)

 
    
    
  • Контакты
  • Я не занимался этим годами, но мой босс хочет, чтобы я попробовал и уладил эту работу. -_-

    • html
    • css

    Здесь у вас есть раскрывающийся список

     ul li ul. dropdown {
        ширина: 100%;
    }
     

    , который имеет ширину 100% по сравнению с

     ul li {
        положение: родственник;
    }
     

    , который здесь виноват. Удаление «Position:relative» выше устраняет вашу проблему.

    Ваш ul.dropdown плавает горизонтально, но его ширина заставляет элементы располагаться вертикально. Чтобы проверить это, вы можете установить его min-width примерно до 900px: DEMO

    Поскольку ваш ul.dropdown является дочерним элементом своего родителя li , для которого установлено значение display: inline-block; положение: родственник; , он привязан к своим границам, используя width: 100% .

    Чтобы решить эту проблему, вы можете удалить position: относительный ваших элементов li , чтобы удалить эту границу. Теперь его ширина : 100% относится к вашему телу .

    РАБОЧАЯ ДЕМО

    1

    Попробуйте display:block в UL. dropdown и display:inline-block в UL.dropdown LI .

    1

    просто удалить (положение: относительное;) из списка «ul li» появится горизонтально. код будет выглядеть так:

     ul li {
        дисплей: встроенный блок;
        плыть налево;
        отступ: 25px 25px 0 125px;
        маржа: 0;
        размер шрифта: 25px;
        вес шрифта: полужирный; цвет: #FFFFFF;
        выравнивание текста: по центру;
    }
     

    просто замените этот код своим. Спасибо

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

    Зарегистрируйтесь с помощью Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя электронную почту и пароль

    Опубликовать как гость

    Электронная почта

    Требуется, но никогда не отображается

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    html — элементы выпадающего меню CSS идут горизонтально

    Я искал эту проблему в stackoverflow, но ничего не нашел.

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

    HTML

     
    заголовок <ул>
  • Главная
  • Биография
  • Фото
  • Меер <ул>
  • учебники
  • инхурен
  • CSS

     /*заголовок*/
    # заголовок {
        цвет фона: #5c931ф;
    }
    #заголовок ул {
        тип стиля списка: нет;
    }
    #заголовок ли {
        ширина: 100 пикселей;
        граница: 1px сплошной черный;
        дисплей: встроенный;
        цвет фона: #000;
        цвет: #808080;
        положение: родственник;
        выравнивание текста: по центру;
    }
    #заголовок li:hover {
        цвет синий;
    }
    /*выпадающее меню*/
    .выпадающий ул{
        дисплей: нет;
    }
    .dropdown: наведите указатель {
        дисплей: блок;
        положение: абсолютное;
    }
     

    Как сделать элементы раскрывающегося списка вертикальными?

    • HTML
    • CSS
    • раскрывающееся меню

    Вы активно объявили li для отображения встроенных здесь:

     #header li {
    . ..
    дисплей: встроенный;
    ...
    }
     

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

    Редактировать: раньше я не замечал вложенных li .

    Добавить:

     #header .dropdown li {
        дисплей: блок;
    }
     

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

     #header > ul > li {
    ширина: 100 пикселей;
    граница: 1px сплошной черный;
    дисплей: встроенный;
    цвет фона: #000;
    цвет: #808080;
    положение: родственник;
    выравнивание текста: по центру;
    }
     
    2

    Добавьте/измените следующий код:

     .dropdown ul li{
         дисплей: блок;
    }
    .dropdown: наведите указатель {
        дисплей: встроенный;
        положение: абсолютное;
        сверху: 0;
        слева: 0;
        плыть налево;
    }
     

    Ссылка на JS Fiddle:

    http://jsfiddle.

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

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *