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

Leave a Comment / Html / By /

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

Перед написанием стилей для выпадающего меню необходимо создать структуру HTML документа. Данная структура будет представлять из себя обычный скелет сайта с добавленными тегами для меню. Меню будем создавать используя списки <UL> или <OL>.

Итак приступим к написанию основной структуры сайта


<!DOCTYPE html>
<html>
  <head>
    <title> Выпадающее меню на CSS </title>
  </head>
  <body>
   
  </body>

После того как написали основную структуру сайта необходимо создать структуру нашего меню. Для начала создадим меню верхнего уровня с помощью тегов <NAV> и <UL>


<nav>
  <ul>
    <li><a href='#'>Главная</a></li>
    <li><a href='#'>HTML</a></li>
    <li><a href='#'>CSS</a></li>
    <li><a href='#'>PHP</a></li>
    <li><a href='#'>JavaScript</a></li>
  </ul>
</nav>



Меню верхнего уровня у нас создано. Теперь необходимо назначить стили для элементов меню.


nav {
     margin: 50px 0;
     bacground-color: #E94f56;
    }
nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
        position: relative;
       }
nav ul li {
           margin: 0px -7px 0 0;
           display: inline-block;
           background-color: #E94f56;
           }
nav a {
       display: block;
       padding: 0 10px;
       color: #ffff;
       font-size: 23px;
       line-height: 60px;
       text-decoration: none;
       }
nav a:hover {
             backgroung-color: #000001;
            }

Проверим то что у нас получилось.


 

Теперь наше меню выглядит как меню. Теперь нам необходимо создать вложенное меню. Его мы создаем путем добавления внутрь тега <LI> еще одного списка <UL>. То есть у нас получается список в списке. Создадим структуру с вложенным меню.


<nav>
  <ul>
    <li><a href='#'>Главная</a></li>
    <li><a href='#'>HTML</a>
        <ul>
            <li><a href='#'>История HTML</a></li>
            <li><a href='#'>Структура HTML</a></li>
            <li><a href='#'>HTML5</a></li>  
        </ul>
    </li>
    <li><a href='#'>CSS</a></li>
    <li><a href='#'>PHP</a></li>
    <li><a href='#'>JavaScript</a></li>
  </ul>
</nav>

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

nav ul ul {
        display: none;
        position: absolute;
        top100%;
       }
nav ul li:hover>ul {
            display: inherit;
           }
nav ul ul li {
       min-width: 180px;
       float: none;
       display:list-item;
       position: relative;
       }

Должно получиться следующее

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

     li> a:after {content: '+'}
     li> a:only-child:after {content:'';}

В итоге у нас получилось следующее

 

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

Основы Laravel

Пройдя курс, Вы узнаете:

— Как установить и настроить Laravel

— Всю необходимую базу по Laravel

— Как создавать несложные сайты на Laravel

Общая продолжительность курса 4.5 часа, плюс множество упражнений и поддержка!

Чтобы получить Видеокурс,
заполните форму

E-mail:
Имя:

Другие курсы

Как создать профессиональный Интернет-магазин

После семинара:

— Вы будете знать, как создать Интернет-магазин.

— Вы получите бесплатный подарок с подробным описанием каждого шага.

— Вы сможете уже приступить к созданию Интернет-магазина.

Записаться

Другие курсы

В древности люди учились для того, чтобы совершенствовать себя.

Ныне учатся для того, чтобы удивить других.

Конфуций

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

Привожу HTML-код:

<ul>
  <li>
    <a href="#">Главная</a>
  </li>
  <li>
    <a href="#">Меню 1</a>
    <ul>
      <li>
        <a href="#">Подменю 1</a>
      </li>
      <li>
        <a href="#">Подменю 2</a>
      </li>
      <li>
        <a href="#">Подменю 3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Меню 2</a>
    <ul>
      <li>
        <a href="#">Подменю4</a>
      </li>
      <li>
        <a href="#">Подменю 5</a>
      </li>
      <li>
        <a href="#">Подменю 6</a>
      </li>
      <li>
        <a href="#">Подменю7</a>
      </li>
      <li>
        <a href="#">Подменю 8</a>
      </li>
    </ul>
  </li>
</ul>

И CSS-код:

ul. menu {
  display: inline-block;
  margin: 0;
  padding: 0;
}
ul.menu li {
  float: left;
  list-style: none;
}
ul.menu li a {
  display: block;
  padding: 8px 20px 10px;
  text-decoration: none;
}
ul.menu li ul {
  display: none;
  padding-left: 10px;
}
ul.menu li:hover ul {
  display: block;
  position: absolute;
}
ul.menu li:hover ul li {
  float: none;
}
ul.menu li:hover ul li a {
  padding: 6px 0 8px;
}

Безусловно, здесь дан чуть ли не минимум свойств. Чтобы это всё украсить, нужно менять стили. Что касается HTML-кода, то он идентичен и для горизонтального, и для вертикального меню.

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

Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

  • Создано 06.03.2013 04:25:07
  • Михаил Русаков

Предыдущая статьяСледующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov. ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.

Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

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

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov. ru»]Как создать свой сайт[/URL]

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

спросил

Изменено 6 лет, 8 месяцев назад

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

0

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

Я пытаюсь использовать горизонтальный список в веб-части 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

    Попробуйте отобразить : блок в раскрывающемся списке UL.

    1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    спросил

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

    Просмотрено 47 тысяч раз

    10

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

    Взгляните на эту картинку:

    Я хочу, чтобы элементы выпадающего меню располагались стопкой слева направо (по горизонтали). Кажется, я не могу заставить это работать, пытался использовать класс «list-inline», упомянутый в официальная документация, которая только усугубляет ситуацию.

    Вот HTML:

    I'm using Bootstrap 3

    • html
    • css
    • twitter-bootstrap

    Enclose those li into a ul list and the class as list-inline like этот

    Проверьте этот Скриншот

    Вот JSFIDDLE

    Обновления1:

    Как я упоминал в комментариях, Класс: выпадающий-Меню имеет MIN-WIDTH AS 160045. Следовательно, он фиксируется по ширине. Попробуйте переопределить его.

    Обновления2:

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

     .dropdown-menu{
минимальная ширина: 200 пикселей;
}

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

     #Numberlist.dropdown-menu{
минимальная ширина: 200 пикселей;
}

    Найдите разницу в этом JSFiddle

    7

    выпадающее меню ограничено шириной контейнера li.

    просто добавьте:

     .dropdown-menu {
    поле справа:-1000px;
}
.выпадающее меню > ли {
    отображение: встроенный блок;
}

    2

    Должна быть возможна полная ширина - 100% ширина меню

    .navbar-nav {position: relative; }

    li. dropdown {position: static;}

    .dropdown-menu {width: 100%;}

    .dropdown-menu > li {display:

    9004;} } или около того… основная идея состоит в том, чтобы расположить выпадающее меню относительно меню, а не ли… как справедливо указывает migli

    "раскрывающееся меню ограничено шириной контейнера li."

    0

    Комбинация

     
      
                <ул>

    с

     .выпадающее меню {
    поле справа:-1000px;
}

    и некоторые дополнительные стили внешнего вида сработали для меня. Спасибо!

    2

    Чтобы добавить к решению @dj.cowan, я удалил свойство позиции .navbar-nav, используя вместо этого позицию .navbar по умолчанию, которая затем сделала раскрывающийся список шириной 100% страницы. Затем я добавил float:right к li в очередь под navbar-right.

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

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