Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Горизонтальное выпадающее меню на 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 не будет опубликован. Обязательные поля помечены *