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

Содержание

Меню многоуровневое горизонтальное и вертикальное CSS

Хотите навсегда избавиться от простатита, геморроя, молочницы и других воспалительных заболеваний?
Эффективное лечение народными средствами!
Прополис + эфирные масла целебных растений + масло какао

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

Для того чтоб переделать вертикальное меню в горизонтальное, достаточно изменить лишь одно значение в стилях. О чём я укажу в комментариях в коде.

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

1. Вертикальное

 

 

2. Горизонтальное

 

Код:

HTML


<div>
<ul>
<li><a href="">Meny1</a>
<ul>
<li><a href="">Meny 1-2</a>
<ul>
<li><a href="">Meny 1-2-1</a></li>
<li><a href="">Meny 1-2-2</a></li>
</ul>
</li>
<li><a href="">Meny 1-3</a>
<ul>
<li><a href="">Meny 1-3-1</a></li>
<li><a href="">Meny 1-3-2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Meny 2</a>
<ul>
<li><a href="">Meny 2-1</a>
<ul>
<li><a href="">Meny 2-1-1</a></li>
<li><a href="">Meny 2-1-2</a></li>
</ul>
</li>
<li><a href="">Meny 2-2</a>
<ul>
<li><a href="">Meny 2-2-1</a></li>
<li><a href="">Meny 2-2-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

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

Стили для всех блоков, имеющихся и добавленных, будут одинаковыми.

CSS


.nav {
background: white;
text-align: center;
}
.nav a {
text-decoration: none;
display: block;
transition: .5s linear;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.topmenu > li {
display: block;
/*Если вместо block задать inline-block,
меню будет горизонтальным*/
position: relative;
width: 200px;
}
.topmenu > li > a {
font-weight: bold;
padding: 10px 30px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
color: #1c1c1c;
border: 1px solid #999;
}
.submenu {
position: absolute;
left: 10px;
z-index: 5;
width: 240px;
visibility: hidden;
opacity: 0;
transform: translateY(10px);
transition: .5s ease-in-out;
}
.submenu li {
position: relative;
border: 1px solid #999;
margin:2px;
}
.submenu a {
background: white;
color: #1c1c1c;
text-align: center;
font-size: 14px;
letter-spacing: 1px;
padding: 10px 20px;
}
.submenu .submenu {
position: absolute;
top: 0;
left: 200px;

}
.nav li:hover > .submenu {
visibility: visible;
opacity: 1;
transform: translateY(0px);
}

Желаю творческих успехов.

В раздел > > >

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

Многоуровневое горизонтальное меню на HTML и CSS

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

Делать наше меню заново нету смысла, по-этому сегодня мы просто возьмем за основу “Простое горизонтальное меню”, которое я описывал здесь. Так что вы можете просто скачать исходники нашего меню и дописать всего пару строчек.

HTML

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

<ul>
        <li><a href="#">О нас</a></li>
        <li>
                <a href="#">Статьи</a>
                <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li>
                            <a href="#">jQuery</a>
                            <ul>
                                <li><a href="#">Вступление</a></li>
                                <li><a href="#">Начальный</a></li>
                                <li><a href="#">Продвинутый</a></li>
                            </ul>
                        </li>
                </ul>
        </li>
        <li>
                <a href="#">Видео курс</a>

        </li>
        <li>
                <a href="#">Материалы</a>
        </li>
        <li>
                <a href="#">Форум</a>
        </li>
</ul>

CSS

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

#menu {
        padding: 0;
        margin: 0;
        font-family:  Verdana;
        }
#menu li {
        list-style: none;
        float: left;
        height: 30px;
        padding: 0;
        margin: 0;
        width: 150px;
        text-align: center;
        background:  #95DF8E;
        position: relative;
        padding-top: 12px;
        }
#menu li ul{
        list-style: none;
        padding: 0;
        margin: 0;
        width: 150px;
        display: none;
        position: absolute;
        left: 0;
        top: 42px;
        }
#menu li ul li{
        float: none;
        height: 30px;
        margin: 0;
        width: 150px;
        text-align: center;
        background: #95DF8E;
        }
#menu li a{
        display: block;
        width: 150px;
        height: 30px;
        color:    #006A35;
        text-decoration: none;
        }

  #menu li:hover ul{
          display: block;
          }
  #menu li:hover{
          background: #35C835;
          }
  #menu li ul li ul{
    left:150px;
    top: 0;
  }
  #menu li ul li ul li{display: none;}
  #menu li ul li:hover ul li{display: block;}

Готово

Вот и все – наше превращение закончено. Но не увлекайтесь – больше не значит лучше. Подсказка: если в вашем меню не все пункты меню разворачиваются – пометьте те, которые могут развернутся(например, знаком “+”, или картинкой на фоне)


CSS горизонтальное меню с 3-м подменю отображается вертикально

Это многоуровневое горизонтальное меню. Я пытаюсь сделать подменю 3-го уровня вертикальным (1-й &-й уровень останется горизонтальным)

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

Можно ли это сделать? Пожалуйста помочь.

<style>
    /**
     * horizontal navigation (SO)
     */
    body {
        background: url('.jpg') 50% 50%;
    }

    /* Targeting both first and second level menus */

    #nav {position: relative;}
    #nav li {
        list-style:none;
        float: left;
    }
    #nav li a {
        display: block;
        padding: 8px 12px;
        text-decoration: none;
    }
    #nav li a:hover {
        background-color:red;
        color:#FFF;
        opacity:1;
    }

    /* Targeting the first level menu */
    #nav {  
        top:150px;
        min-width:850px;
        background:#fff;
        opacity:0.5;
        display: block;
        height: 34px;
        z-index: 100;
        position: absolute;
    }
    #nav > li > a {
    }

    /* Targeting the second level menu */
    #nav li ul {
        color: #333;
        display: none;
        position: absolute; 
        width:850px;
    }
    #nav li ul li {
        display: inline;
    }
    #nav li ul li a {
        background: #fff;
        border: none;
        line-height: 34px;
        margin: 0;
        padding: 0 8px 0 10px;
    }
    #nav li ul li a:hover {
        background-color:red;
        color:#FFF;
        opacity:1;
    }

    /* Third level menu */
    #nav li ul li ul{
        top: 0;
    }
    ul.child {
    background-color:#FFF;  
    }
    /* A class of current will be added via jQuery */
    #nav li.current > a {
        background: #f7f7f7;
        float:left;
    }
    /* CSS fallback */
    #nav li:hover > ul.child {
        left:0;
        top:34px;
        display:inline;
        position:absolute;
        text-align:left;
    }
    #nav li:hover > ul.grandchild  {
        display:block;
    }

</style>


<!-- content to be placed inside <body>…</body> -->
<ul>
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Products</a>
        <ul>
            <li><a href="#">Hard Drives</a></li>
            <li><a href="#">Monitors</a></li>
            <li><a href="#">Speakers</a>
                <ul>
                    <li><a href="#">10 watt</a></li>
                    <li><a href="#">20 watt</a></li>
                    <li><a href="#">30 watt</a></li>
                </ul>
            </li>
            <li><a href="#">Random Equipment</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Services</a>
        <ul>
            <li><a href="#">Repairs</a></li>
            <li><a href="#">Installations</a></li>
            <li><a href="#">Setups</a></li>
        </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

jsFiddle демо: http://jsfiddle.net/fJQ59/

css

Поделиться

Источник


Milacay    

28 декабря 2012 в 18:07

2 ответа


  • ASP.NET горизонтальное меню с подменю, появляющимся ниже, также горизонтальное

    У меня есть горизонтальное меню с UL/LI markup, которое я хочу преобразовать в ASP:Menu в .net 3.5. Я бы хотел, чтобы выбор в подменю отображался в горизонтальном меню под главным меню при нажатии на пункт главного меню. Я тоже хочу: укажите, какой пункт меню выбран, выделив / выделив жирным…

  • CSS выпадающее меню — неверный размер подменю

    Я делаю горизонтальное навигационное меню css. Как я могу сделать так, чтобы ширина подменю автоматически подстраивалась под его содержимое? как в главном меню, совсем. Мой css: http://pastebin.com/Kpx4s3fH Текст просто складывается обратно. EDIT: и html http://pastebin.com/xaC0kvud



1

Добавьте в свой стиль следующие коды

#nav li ul li ul li { display: block; float: none; }

Поделиться


Mayki Nayki    

28 декабря 2012 в 18:23



1

Вот отправная точка для вас:

HTML

​<ul>
  <li>
    Option One
    <ul>
      <li>
        Second Row One
        <ul>
          <li>
            Third Row One
          </li>
          <li>
            Third Row Two
          </li>
          <li>
            Third Row Three
          </li>
        </ul>
      </li>
      <li>
        Second Row Two
      </li>
      </ul>   
  </li>
  <li>
    Option Two
  </li>
  <li>
    Option Three
  </li>
</ul>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

ul {
  width: 600px;
  list-style-type: none;
}
ul > li,
ul > li > ul > li {
  position: relative;
  float: left;
  padding: 3px 5px;
  margin: 10px 5px;
  cursor: pointer;
}

/*****************************
This next line is the key to
making the third row vertical:
******************************/
ul ul ul li {
  float: none;
}

li > ul {
  display: none;
}
li:hover > ul {
  position: absolute;
  display: block;
  width: 600px;
}

Посмотреть на JSFiddle

Поделиться


jamesplease    

28 декабря 2012 в 18:23


Похожие вопросы:

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

Есть ли способ создать горизонтальное подменю для вертикальной структуры меню с помощью bootstrap я не видел ни одного подменю с вертикальной ориентацией главного меню. Примерная структура структуры…

css горизонтальное навигационное меню плавает справа, вертикальные подменю не выровнены с главным меню

Я создал горизонтальное навигационное меню в css, плавающее слева. Это прекрасно работает. Когда я меняю поплавок вправо (и меняю порядок li верхнего уровня), все в порядке, за исключением того, что…

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

У меня есть следующий сайт http://jsfiddle.net/Me4fw/4/ , на котором я пытаюсь реализовать горизонтальное выпадающее меню css, имеющее подменю, которое также является горизонтальным. Я перепробовал…

ASP.NET горизонтальное меню с подменю, появляющимся ниже, также горизонтальное

У меня есть горизонтальное меню с UL/LI markup, которое я хочу преобразовать в ASP:Menu в .net 3.5. Я бы хотел, чтобы выбор в подменю отображался в горизонтальном меню под главным меню при нажатии…

CSS выпадающее меню — неверный размер подменю

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

CSS Горизонтальное Подменю

в основном у меня есть бок о бок горизонтальное меню, как вы можете видеть здесь: http://www.дополнения-today.co.uk/walnutgarth4/availability.php то, что я пытаюсь сделать, это сделать так, чтобы…

html горизонтальное меню отображается вертикально на firefox 4

я только что пошел тестировать сайт в firefox 4 (бета-версия 10), и горизонтальное меню отображается вертикально. В chrome меню горизонтально, как это: но в firefox 4 он появляется вот так: Я…

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

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

css подменю меню горизонтальное

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

CSS подменю меню не отображается

У меня возникла проблема CSS с меню на старом сайте, над которым недавно работали. Проблема в том, что подменю под главным меню отображается как очень тонкая линия без возможности выбрать какой-либо…

dropdown » Скрипты для сайтов

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

Mega dropdown меню

Mega dropdown меню — jQuery плагин для реализации большого выпадающего меню с множеством подкатегорий для сайтов с большим количеством контента.

13 879
Скрипты / Accordion

Вертикальное accordion меню

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

5 175
Скрипты / Accordion

Flat accordion menu — вертикальный аккордеон

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

15 881
Скрипты / Menu & Nav

Адаптивное много-уровневое меню

Сегодня сделаем адаптивное много-уровневое меню. Для мобильной версии добавим несколько строчек jаvascript кода. Для лучшего восприятия пунктов навигации, добавим для каждого иконки, воспользовавшись уже знакомым нам по предыдущим урокам — font-awesome.css

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

Адаптивное многоуровневое меню

Экспериментальное меню позволяющее с экономить пространство на вашем сайте, где требуется использование много уровневого меню. «Детки» заменяют собой «родителей» не загромождая страницу. Меню можно устанавливать на страницы с адаптивным дизайном.

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

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

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

6 117
Скрипты / Menu & Nav

Дерево меню на jQuery

Древовидное меню на jQuery, как и положено с возможностью раскрытия и скрытия пунктов и подпунктов.

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

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

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

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

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

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

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

Выпадающее адаптивное меню

Адаптивное выпадающее CSS3 меню, которое при уменьшении окна браузера превращается в меню вида аккордеон. Проверено в Chrome, Opera, FireFox, IE9, iPad, iPhone. В IE7 и IE8 работает только выпадающее подменю, адаптивность теряется.

3 196
Скрипты / Menu & Nav

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

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

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

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

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

Многоуровневое вертикальное меню

<div>

    <ul>

        <li>

            <a href=»#»>Пункт меню 1</a>

            <input type=»checkbox» checked=»checked» />

            <label for=»1″></label>

            <ul>

                <li>

                    <a href=»#»>Пункт меню 1.1</a>

                    <input type=»checkbox» checked=»checked»/>

                    <label for=»1.1″></label>

                    <ul>

                        <li>

                            <a href=»#»>Пункт меню 1.1.1</a>

                        </li>

                        <li>

                            <a href=»#»>Пункт меню 1.1.2</a>

                        </li>

                        <li>

                            <a href=»#»>Пункт меню 1.1.3</a>

                        </li>

                    </ul>

                </li>

                <li>

                    <a href=»#»>Пункт меню 1.2</a>

                </li>

                <li>

                    <a href=»#»>Пункт меню 1.3</a>

                </li>

            </ul>

        </li>    

        <li>

            <a href=»#»>Пункт меню 2</a>

            <input type=»checkbox» />

            <label for=»2″></label>

            <ul>

                <li>

                    <a href=»#»>Пункт меню 2.1</a>

                </li>

                <li>

                    <a href=»#»>Пункт меню 2.2</a>

                </li>

                <li>

                    <a href=»#»>Пункт меню 2.3</a>

                </li>

                <li>

                    <a href=»#»>Пункт меню 2.4</a>

                </li>

            </ul>

        </li>

        <li>

            <a href=»#»>Пункт меню 3</a>

            <input type=»checkbox» />

            <label for=»3″></label>

            <ul>

                <li>

                    <a href=»#»>Пункт меню 3.1</a>

                </li>

                <li>

                    <a href=»#»>Пункт меню 3.2</a>

                </li>

            </ul>

        </li>

        <li>

            <a href=»#»>Пункт меню 4</a>

            <input type=»checkbox» />

            <label for=»4″></label>

            <ul>

                <li>

                    <a href=»#»>Пункт меню 4.1</a>

                </li>

                <li>

                    <a href=»#»>Пункт меню 4.2</a>

                </li>

                <li>

                    <a href=»#»>Пункт меню 4.3</a>

                </li>

            </ul>

        </li>

    </ul>

</div>

Создаем горизонтальное меню CSS

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

Создаем горизонтальное меню CSS

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

Шаг 1: Откройте любой HTML — редактор и напишите код HTML с элементами списка ul-li и сохраните файл с расширением .html:

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Horizontal CSS Menu Bar</title>
<body>
<ul id=”menu”>
    <li><a href=”#”>Link1</a></li>
    <li><a href=”#”>Link2</a>
          <ul>
            <li><a href=”#”>Link2.1</a></li>
            <li><a href=”#”>Link2.2</a></li>
            <li><a href=”#”>Link2.3</a></li>
         </ul>
    </li>
    <li><a href=”#”>Link3</a>
          <ul>
          <li><a href=”#”>Link3.1</a></li>
          <li><a href=”#”>Link3.2</a></li>
          </ul></li>    
    <li><a href=”#”>Link4</a></li>
</ul>
</body>
</html>

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

• Link1
• Link2
o Link2.1
o Link2.2
o Link2.3
• link3
o Link3.1
o Link3.2
• link4

Шаг 2: Здесь мы добавляем CSS в HTML разметку. Этот тип CSS кода называется внутренним. Во внешнем CSS мы размещаем код в отдельном файле, сохраняя его с расширением .css и подключая на странице HTML. Преимущество использования внешнего CSS заключается в его многократном использовании. Чтобы сделать его проще, мы добавили внутренний CSS. Для этого разместите тег <style> под head в HTML и напишите CSS код внутри блока <style>. Для начала мы добавим несколько основных свойств, чтобы установить ширину, высоту, цвет фона:

<style>
/* Main */
    #menu{
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;  
    background: #111;
    }
</style>

После добавления CSS:

Шаг 3: Теперь закруглите угол, чтобы придать ему красивый внешний вид. Для этого используйте свойство CSS border-radius и установите значение 50px:

#menu{
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;  
    background: #111;
    border-radius: 50px;
}

После добавления CSS:

Он выглядит лучше, правда?

Шаг 4: Теперь упорядочим структуру будущего горизонтального резинового меню для сайта. Все элементы ‘li’ будут находиться в одной строке, а все элементы ‘ul’ будут располагаться ниже:

#menu li{
    float: left;
    padding: 0 0 10px 0;
    position: relative; 
}

После добавления CSS:

Шаг 5: Настроим свойства для тега ‘a’ (при наведении курсора мыши) такие как цвет, оформления текста, шрифт:

#menu a{
    float: left;
    height: 25px;
    padding: 0 25px;
    color: #CC6600;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000; 
}

После добавления CSS:

Шаг 6: Добавьте еще одно свойство, чтобы цвет ссылок изменялся при нажатии:

#menu li:hover > a{
    color: #CC3333; 
}

Шаг 7: Теперь добавьте два CSS блока для элементов ‘ul’. Первый блок будет скрывать все элементы ‘ul’, также необходимо задать такие свойства отображения как цвет, внутренний отступ, позиция. Второй блок — для отображения всех элементов ‘ul’ при наведении курсора мыши на элементы ‘li’:

#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    background: #222; }
   #menu li:hover > ul{
    display: block; 
}

После добавления CSS:

Шаг 8: Установите padding (внутренний отступ) 0, margin (внешний отступ) 0 для всех элементов, чтобы многоуровневое горизонтальное меню для сайта лучше смотрелось:

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block; 
}

Шаг 9: Установите свойства для всех элементов ‘а’, которые располагаются под тегом ‘ul’:

#menu ul a{    
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
 }

Шаг 9: Добавьте еще несколько строк, чтобы улучшить визуальные эффекты оригинального горизонтального меню для сайта, установите правильный размер шрифта для черного фона:

#menu:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ” “;
    clear: both;
    height: 0;
 }

После добавления CSS:

На этом все. Мы успешно создали горизонтальное меню. Теперь добавим еще несколько строк, чтобы придать нашей панели меню более профессиональный вид.

Дополнительный шаг 1: Для отображения указателя под выделенной ссылкой добавьте код, представленный ниже:

#menu ul li:first-child a:after{
    content: ”;
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #FF0000;
}

После добавления CSS:

Дополнительный шаг 2: Установите свойство border-radius 5px под элементом ‘#menu ul’, который придаст небольшое закругление для всех тегов ul:

После добавления CSS:

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

Данная публикация является переводом статьи «Create horizontal menu bar using HTML and CSS» , подготовленная редакцией проекта.

» Создание меню :: Горизонтальное :: Многоуровневое меню

<div>

    <ul>

        <!— Пункт меню 1 —>

        <li><a href=»#»>Пункт 1</a>

            <ul>

                <li><a href=»#»>подпункт 1.1</a></li>

                <li><a href=»#»>подпункт 1.2</a>

                    <ul>

                        <li><a href=»#»> подпункт 1.2.1 </a>

                            <ul>

                                <li><a href=»#»> подпункт 1.2.1.1 </a></li>

                                <li><a href=»#»> подпункт 1.2.1.2</a>

                                    <ul>

                                        <li><a href=»#»> подпункт 1.2.1.2.1 </a></li>

                                        <li><a href=»#»> подпункт 1.2.1.2.2</a></li>

                                        <li><a href=»#»> подпункт 1.2.1.2.3</a></li>

                                        <li><a href=»#»> подпункт 1.2.1.2.4</a></li>

                                        <li><a href=»#»> подпункт 1.2.1.2.5</a></li>

                                    </ul>

                                </li>

                                <li><a href=»#»> подпункт 1.2.1.3</a></li>

                                <li><a href=»#»> подпункт 1.2.1.4</a></li>

                                <li><a href=»#»> подпункт 1.2.1.5</a></li>

                            </ul>

                        </li>

                        <li><a href=»#»> подпункт 1.2.2</a>

                            <ul>

                                <li><a href=»#»> подпункт 1.2.2.1 </a></li>

                                <li><a href=»#»> подпункт 1.2.2.2 </a></li>

                                <li><a href=»#»> подпункт 1.2.2.3 </a></li>

                                <li><a href=»#»> подпункт 1.2.2.4 </a></li>

                                <li><a href=»#»> подпункт 1.2.2.5 </a></li>

                            </ul>

                        </li>

                        <li><a href=»#»> подпункт 1.2.3</a></li>

                        <li><a href=»#»> подпункт 1.2.4</a></li>

                        <li><a href=»#»> подпункт 1.2.5</a>

                            <ul>

                                <li><a href=»#»> подпункт 1.2.5.1 </a></li>

                                <li><a href=»#»> подпункт 1.2.5.2</a></li>

                                <li><a href=»#»> подпункт 1.2.5.3</a></li>

                                <li><a href=»#»> подпункт 1.2.5.4</a></li>

                                <li><a href=»#»> подпункт 1.2.5.5</a></li>

                            </ul>

                        </li>

                    </ul>

                </li>

                <li><a href=»#»>подпункт 1.3</a>

                    <ul>

                        <li><a href=»#»> подпункт 1.3.1 </a></li>

                        <li><a href=»#»> подпункт 1.3.2 </a></li>

                        <li><a href=»#»> подпункт 1.3.3 </a></li>

                        <li><a href=»#»> подпункт 1.3.4 </a></li>

                        <li><a href=»#»> подпункт 1.3.5 </a></li>

                    </ul>

                </li>

                <li><a href=»#»>подпункт 1.4</a></li>

                <li><a href=»#»>подпункт 1.5</a>

                    <ul>

                        <li><a href=»#»>подпункт 1.5.1 </a></li>

                        <li><a href=»#»> подпункт 1.5.2</a></li>

                        <li><a href=»#»> подпункт 1.5.3</a></li>

                        <li><a href=»#»> подпункт 1.5.4</a></li>

                        <li><a href=»#»> подпункт 1.5.5</a></li>

                    </ul>

                </li>

            </ul>

        </li>

        <!— Пункт меню 2 —>

        <li><a href=»#»>Пункт 2</a>

            <ul>

                <li><a href=»#»>подпункт 2.1</a>

                    <ul>

                        <li><a href=»#»> подпункт 2.1.1 </a>

                            <ul>

                                <li><a href=»#»> подпункт 2.2.1.1 </a></li>

                                <li><a href=»#»> подпункт 2.2.2.2 </a></li>

                                <li><a href=»#»> подпункт 2.2.3.3 </a></li>

                                <li><a href=»#»> подпункт 2.2.4.4 </a></li>

                                <li><a href=»#»> подпункт 2.2.5.5 </a></li>

                            </ul>

                        </li>

                        <li><a href=»#»> подпункт 2.1.2</a></li>

                        <li><a href=»#»> подпункт 2.1.3</a></li>

                        <li><a href=»#»> подпункт 2.1.4</a></li>

                        <li><a href=»#»> подпункт 2.1.5</a></li>

                    </ul>

                </li>

                <li><a href=»#»>подпункт 2.2</a></li>

                <li><a href=»#»>подпункт 2.3</a></li>

                <li><a href=»#»>подпункт 2.4</a></li>

                <li><a href=»#»>Длинный подпункт, длинный подпункт</a></li>

            </ul>

        </li>

        <!— Пункт меню 3 —>

        <li><a href=»#»>Длинный пункт меню 3</a>

            <ul>

                <li><a href=»#»>подпункт 3.1</a>

                    <ul>

                        <li><a href=»#»> подпункт 3.1.1 </a></li>

                        <li><a href=»#»> подпункт 3.1.2 </a></li>

                        <li><a href=»#»> подпункт 3.1.3 </a></li>

                        <li><a href=»#»> подпункт 3.1.4 </a></li>

                        <li><a href=»#»> подпункт 3.1.5 </a></li>

                    </ul>

                </li>

                <li><a href=»#»>подпункт 3.2</a>

                    <ul>

                        <li><a href=»#»> подпункт 3.2.1 </a></li>

                        <li><a href=»#»> подпункт 3.2.2 </a></li>

                        <li><a href=»#»> подпункт 3.2.3 </a></li>

                        <li><a href=»#»> подпункт 3.2.4 </a></li>

                        <li><a href=»#»> подпункт 3.2.5 </a></li>

                    </ul>

                </li>

                <li><a href=»#»>подпункт 3.3</a></li>

                <li><a href=»#»>подпункт 3.4</a></li>

                <li><a href=»#»>подпункт 3.5</a></li>

            </ul>

        </li>

        <!— Пункт меню 4 —>

        <li><a href=»#»>Пункт 4</a>

            <ul>

                <li><a href=»#»>подпункт 4.1</a>

                    <ul>

                        <li><a href=»#»> подпункт 4.1.1 </a></li>

                        <li><a href=»#»> подпункт 4.1.2 </a></li>

                        <li><a href=»#»> подпункт 4.1.3 </a></li>

                        <li><a href=»#»> подпункт 4.1.4 </a></li>

                        <li><a href=»#»> подпункт 4.1.5 </a></li>

                    </ul>

                </li>

                <li><a href=»#»>подпункт 4.2</a></li>

                <li><a href=»#»>подпункт 4.3</a>

                    <ul>

                        <li><a href=»#»> подпункт 4.3.1 </a></li>

                        <li><a href=»#»> подпункт 4.3.2 </a></li>

                        <li><a href=»#»> подпункт 4.3.3 </a></li>

                        <li><a href=»#»> подпункт 4.3.4 </a></li>

                        <li><a href=»#»> подпункт 4.3.5 </a></li>

                    </ul>

                </li>

                <li><a href=»#»>подпункт 4.4</a></li>

                <li><a href=»#»>подпункт 4.5</a></li>

            </ul>

        </li>

        <!— Пункт меню 5 —>

        <li><a href=»#»>Пункт 5</a>

            <ul>

                <li><a href=»#»>подпункт 5.1</a>

                    <ul>

                        <li><a href=»#»> подпункт 5.1.1 </a></li>

                        <li><a href=»#»> подпункт 5.1.2 </a></li>

                        <li><a href=»#»> подпункт 5.1.3 </a></li>

                        <li><a href=»#»> подпункт 5.1.4 </a></li>

                        <li><a href=»#»> подпункт 5.1.5 </a></li>

                    </ul>

                </li>

                <li><a href=»#»>подпункт 5.2</a></li>

                <li><a href=»#»>подпункт 5.3</a></li>

                <li><a href=»#»>подпункт 5.4</a></li>

                <li><a href=»#»>подпункт 5.5</a></li>

            </ul>

        </li>

    </ul>

</div>

html — трехуровневое меню CSS с первым слоем в горизонтальной компоновке

html — трехуровневое меню CSS с первым слоем в горизонтальной компоновке — qaru

Спросил

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

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

Не после какой-либо функции наведения, просто красивый макет, примерно так:

  Верхний элемент 1 Верхний элемент 2 Верхний элемент 3
 подпункт 1 подпункт 1 подпункт 1
 подпункт 2 подпункт 2 подпункт 2
  подпункт 1 подпункт 3 подпункт 3
  подпункт 2 подпункт 4 подпункт 4
 подпункт 5 подпункт 5 подпункт 5
  

случайный

9,4121010 золотых знаков6464 серебряных знака7878 бронзовых знаков

Создан 20 янв.

Энди Энди

2511 серебряных знаков33 бронзовых знака

2

Как насчет этого:

Live Demo

CSS:

  #footer {
    перелив: авто;
    фон: #ddd
}
.external {
    стиль списка: нет;
    ширина: 33%;
    плыть налево;
    маржа: 0;
    заполнение: 0
}
.первый {
    font-weight: жирный
}
.outer ul {
    стиль списка: нет;
    маржа: 0;
    отступ: 0 0 0 18 пикселей
}
  

HTML:

  
  

Создан 20 янв.

тридцать точек

213k4545 золотых знаков381381 серебряный знак340340 бронзовых знаков

3

Или, если вам нужен чистый css, как насчет чего-то вроде этого:
http: // jsfiddle.net / pLFqd / 2/

Изменить: Пропустил бит о том, что не требуется функциональность наведения, попробуйте простой пример, прикрепленный

Создан 20 янв.

Хоуксби

2,7681717 серебряных знаков2929 бронзовых знаков

1

вот материал для копирования и вставки, с которым можно поиграть:

  

<стиль>
    li.level1 {float: left; дисплей: встроенный; margin-right: 20 пикселей}
    ul.level2 {display: inline}
    li.level2 {дисплей: блок; padding-left: 20px}
    ul.level3 {display: inline}
    li.level3 {display: block; padding-left: 20px}



  • яблоко
  • банан
    • банан 1
      • банан 1 А
      • банан 1 млрд.
    • банан 2
  • вишня
    • вишня 1
    • вишня 2
  • дддд

Создан 20 янв.

Деркшар

1,93622 золотых знака1212 серебряных знаков2626 бронзовых знаков

lang-html

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Принимать все файлы cookie

Настроить параметры

css — горизонтальное меню с несколькими подменю

css — горизонтальное меню с несколькими подменю — qaru

Спросил

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

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

  / * Меню панели навигации * /

nav {
  цвет: # F00;
  минимальная ширина: 100%;
}

nav ul {
  отступ: 0;
  маржа: 0;
  стиль списка: нет;
  положение: относительное;
}

nav ul li {
  дисплей: встроенный блок;
  float: нет;
  белое пространство: nowrap;
}

nav a {
  дисплей: блок;
  отступ: 0 10 пикселей;
  цвет: # F00;
  размер шрифта: 20 пикселей;
  высота строки: 30 пикселей;
  текстовое оформление: нет;
}

nav a: hover {
  цвет: #FFF;
  цвет фона: #CCC;
  переход: все.3с легкость;
}

nav ul ul {
  дисплей: нет;
  позиция: абсолютная;
  верх: 100%;
}

nav ul li: hover> ul {
  дисплей: наследовать;
  переход: вся легкость .3s;
}

nav ul ul li {
  минимальная ширина: 170 пикселей;
  отображение: элемент списка;
  положение: относительное;
}

nav ul ul ul {
  позиция: абсолютная;
  верх: 0;
  осталось: 100%;
}  
    

Создан 03 окт.

Хайме Хайме

2111 серебряный знак22 бронзовых знака

0

Извините, если я что-то упускаю, но это то, что вы ищете?
https: // codepen.io / will0220 / ручка / VMMgMb

Это

  nav ul ul li {
 отображение: элемент списка;
}
  

Требует удаления свойства отображения, display: list-item принудительно помещает его в строки. Надеюсь это поможет!

Создан 03 окт.

будет

1,93711 золотых знаков1111 серебряных знаков1818 бронзовых знаков

Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками css html submenu или задайте свой вопрос.

lang-html

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Принимать все файлы cookie

Настроить параметры

CSS Горизонтальное меню с 3-м подменю, отображаемое по вертикали

Это многоуровневое горизонтальное меню.Я пытаюсь сделать подменю 3-го уровня вертикальным (1-й и 2-й уровни останутся горизонтальными)

Итак, если я наведу курсор на «Продукты», он отобразит жесткие диски, мониторы и динамики … по горизонтали. Однако, когда я наводил курсор на колонки, теперь он должен отображать 10 Уолтов, 20 Уолтов … вертикально, как раскрывающийся список.

Можно ли это сделать? Пожалуйста помоги.

  <стиль>
    / **
     * горизонтальная навигация (SO)
     * /
    тело {
        фон: url ('. jpg') 50% 50%;
    }

    / * Ориентация на меню первого и второго уровня * /

    #nav {позиция: относительная;}
    #nav li {
        стиль списка: нет;
        плыть налево;
    }
    #nav li a {
        дисплей: блок;
        отступ: 8px 12px;
        текстовое оформление: нет;
    }
    #nav li a: hover {
        цвет фона: красный;
        цвет: #FFF;
        непрозрачность: 1;
    }

    / * Ориентация на меню первого уровня * /
    #nav {
        верх: 150 пикселей;
        минимальная ширина: 850 пикселей;
        фон: #fff;
        непрозрачность: 0.5;
        дисплей: блок;
        высота: 34 пикс;
        z-индекс: 100;
        позиция: абсолютная;
    }
    #nav> li> a {
    }

    / * Ориентация на меню второго уровня * /
    #nav li ul {
        цвет: # 333;
        дисплей: нет;
        позиция: абсолютная;
        ширина: 850 пикселей;
    }
    #nav li ul li {
        дисплей: встроенный;
    }
    #nav li ul li a {
        фон: #fff;
        граница: нет;
        высота строки: 34 пикселя;
        маржа: 0;
        отступ: 0 8px 0 10px;
    }
    #nav li ul li a: hover {
        цвет фона: красный;
        цвет: #FFF;
        непрозрачность: 1;
    }

    / * Меню третьего уровня * /
    #nav li ul li ul {
        верх: 0;
    }
    ул.ребенок {
    цвет фона: #FFF;
    }
    / * Класс тока будет добавлен через jQuery * /
    #nav li.current> a {
        фон: # f7f7f7;
        плыть налево;
    }
    / * Резервный CSS * /
    #nav li: hover> ul.child {
        слева: 0;
        верх: 34px;
        дисплей: встроенный;
        позиция: абсолютная;
        выравнивание текста: слева;
    }
    #nav li: hover> ul.grandchild {
        дисплей: блок;
    }




…  ->

 

jsFiddle Demo: http: // jsfiddle.net / fJQ59 /

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

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

желательно:

  вариант1 вариант2 вариант3
              |
           submenu_option1 submenu_option2
  

вместо:

  вариант1 вариант2 вариант3
              |
           submenu_option1
              |
           submenu_option2
  

CSS:

  ул.AspNet-Меню
{
    положение: относительное;
}


ул.АспНет-Меню,
ул.АспНет-Меню ул.
{
    маржа: 0;
    отступ: 0;
    дисплей: блок;

}

ul.AspNet-Меню li
{
    положение: относительное;
    стиль списка: нет;
    плыть налево;
}

ul.AspNet-Menu li a,
ul.AspNet-Меню li span
{
    дисплей: блок;
    текстовое оформление: нет;
}

ул.АспНет-Меню ул.
{
    видимость: скрыта;
    позиция: абсолютная;
}

ul.AspNet-Menu li: hover ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ул.
{
    видимость: скрыта;
}

ul.AspNet-Menu li: hover ul,
ул.AspNet-Menu li li: hover ul,
ul.AspNet-Menu li li li: hover ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
{
    видимость: видимая;
}

ul.AspNet-Меню li
{
    отступ: 2px 2px 2px 2px;
}
  

HTML:

  
  

Думаю, здесь начинает разваливаться:

  ул.АспНет-Меню ул.
{
    видимость: скрыта;
    позиция: абсолютная;
}
  

, где задано абсолютное положение. Кстати, я использую элемент управления меню Asp.Net с CSSFriendlyAdapters.

Будем признательны за любые советы или помощь!

Спасибо,

Терри

Pure CSS Многоуровневая навигация — меню.css

Автор: craigerskine
Просмотров Всего: 14329 просмотров
Официальная страница: Перейти на веб-сайт
202 Последнее обновление:
Лицензия: MIT

Предварительный просмотр:

Описание:

menu.css — это крошечная библиотека CSS для создания многоуровневых (до 4) горизонтальных выпадающих меню или вертикальных расширяющихся меню без какого-либо JavaScript.

Как использовать:

1. Импортируйте таблицу стилей menu.css в файл HTML.

  

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

  

3.Создайте вертикальное раскрывающееся меню из списка навигации следующим образом:

  

Теги: раскрывающееся меню

Простое горизонтальное меню с прокруткой только с CSS • iamsteve

Я уже давно задавался вопросом об альтернативном подходе к адаптивной навигации.Что-то, что не связано со значком переключения «гамбургер». Это сложно, потому что у нас нет того места, которое есть у нативных приложений.

Хотя я, конечно, не первый, кто использовал эту идею, она использовалась в ранних версиях приложения Facebook и используется на некоторых страницах веб-сайта Apple. Это шаблон, который мог бы стать идеальной заменой меню «гамбургер». Итак, в этом посте цель состоит в том, чтобы использовать только CSS для горизонтальной прокрутки навигации.

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

Обычно фиксированные элементы, потому что для них требуется два касания

Принцип работы Mobile Safari на iOS ужасен для всего, что закреплено в нижней части области просмотра. Централизация его в области просмотра слева или справа может скрыть контент, что, в свою очередь, будет не менее раздражающим. Затем все сводится к тому, что более неудобно для пользователя; поскольку есть несколько хороших примеров использования нижней навигации на веб-сайте.

Любой список, например

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

Проще говоря, он не лучше «гамбургера». У вас все еще есть те же проблемы, и, как правило, не слишком очевидно, что вы перепрыгнули со страницы.Это может быть немного неудобно, если вы не найдете то, что хотели, в рамках навигации.

Так чем же лучше горизонтальная навигация?

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

Реализация

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

CSS

Здесь работают два свойства: white-space: nowrap и overflow-x: auto . Вам нужно убедиться, что элементы не обертываются, иначе они будут работать нормально, и разрешение прокрутки с использованием auto означает, что прокрутка будет доступна при необходимости.Это небольшое количество CSS заставит любую область иметь горизонтальную прокрутку.

  / *
[1]: все элементы помещаются в одну строку, вызывая переполнение при необходимости.
[2]: автоматическое переполнение означает, что полоса прокрутки не будет отображаться, если она не нужна.
[3]: Сделайте плавную прокрутку на устройствах iOS раньше
[4]: Скрыть уродливые полосы прокрутки в Edge, пока прокручиваемая область не будет зависать.
[5]: скрыть полосу прокрутки в браузерах WebKit.
* /
.scroll {
  белое пространство: nowrap; / * [1] * /
  переполнение-x: авто; / * [2] * /
  -webkit-overflow-scrolling: сенсорный; / * [3] * /
  -ms-overflow-style: -ms-autohiding-scrollbar; / * [4] * /}

/ * [5] * /
.scroll :: - webkit-scrollbar {
  дисплей: нет; }
  

Важно использовать -webkit-overflow-scrolling , поскольку это добавляет динамику и упрощает использование областей прокрутки. Однако, начиная с Safari 13, это поведение по умолчанию. По умолчанию на устройствах Android легче прокручивать страницу, поэтому вам не о чем беспокоиться. -ms-overflow-style: -ms-autohiding-scrollbar позволяет пользователям IE 10, 11 и Edge иметь полосу прокрутки для использования при наведении курсора.

Затем вы можете захотеть полностью скрыть полосу прокрутки.Вы можете сделать это, выбрав псевдоэлемент :: - webkit-scrollbar и улучшив его внешний вид для пользователей Windows Chrome. Однако после краткого тестирования в Windows прокрутка может быть затруднена. Я считаю, что это может зависеть от вашей мыши.

Наконец, вам может быть интересно узнать о Firefox, кажется, на момент написания этого способа нет.

HTML

  <заголовок>
   Логотип 
  

  

В зависимости от того, какую область вы хотите прокрутить, вы можете применить стили к заголовку или навигации.

Сценарии использования

Убедитесь, что для элементов не задана ширина.

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

Недостатки

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

Требуется аффорданс

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

Не совсем идеально, если пользователь просматривает в Windows с узким окном.

Горизонтальная прокрутка не самая лучшая на настольном компьютере (если у вас нет Magic Mouse). Если вы работаете в Windows, без перетаскивания полосы прокрутки просто не обойтись.Единственный разумный метод скрытия полос прокрутки существует для IE11 и Edge, если вы хотите, чтобы он вел себя аналогично OS X. Если это проблема для вас, есть решение.

Flickity

Что-то, на что я хочу обратить внимание, будет реализовывать это с помощью Flickity. Мне нравится Flickity из-за ванильной реализации Javascript. Использование этого метода будет означать, что полосы прокрутки скрыты. Удобство использования будет увеличиваться на всех типах устройств благодаря различным способам взаимодействия с ними.

После внедрения Flickity вы можете оставить .прокрутите CSS и добавьте к нему следующее:

  .scroll :: - webkit-scrollbar {
  дисплей: нет; }
  

Как я уже упоминал ранее, я сказал использовать это осторожно. Однако в сочетании с Flickity вы можете без проблем скрыть полосу прокрутки.

Edit: с тех пор я написал сообщение об улучшении горизонтальной прокрутки с помощью плавности.

Использование flexbox

Возможно, вас заинтересует альтернативный подход с flexbox. Основное различие между использованием подхода с встроенным блоком и подхода flex заключается в том, что код имеет тенденцию быть немного аккуратнее.

Как вы думаете?

Это разумный способ отображения навигации в зависимости от того, с чем вам приходится конкурировать на разных устройствах. Вы использовали что-нибудь подобное в недавних проектах? Я хочу услышать в твиттере.

47 Bootstrap Menus

Коллекция бесплатных Bootstrap Navigation Menu Примеры кода : отзывчивый , боковая панель, раскрывающийся список, фиксированный, вертикальный, горизонтальный, гамбургер и т. Д. Обновление коллекции за май 2020 года. 23 новинки.

  1. Меню CSS
  2. Меню jQuery
  3. Меню JavaScript
  4. Меню React JS
Автор
  • BBBootstrap Team
О коде

Боковое меню Bootstrap 5 с кнопкой переключения

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: пиктограммы.css

Версия начальной загрузки: 5.0.0

О коде

Меню начальной загрузки V14

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js, popper.js

Версия начальной загрузки: 4.3,1

О коде

Меню начальной загрузки V18

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js, popper.js

Версия начальной загрузки: 4.3,1

О коде

Меню начальной загрузки V19

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js, popper.js

Версия начальной загрузки: 4.3,1

О коде

Меню начальной загрузки V20

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js, popper.js

Версия начальной загрузки: 4.3,1

Автор
  • Envato Tuts +
О коде

Как преобразовать таблетки (вкладки) начальной загрузки в раскрывающееся меню

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Версия начальной загрузки: 4.6.0

О коде

Меню начальной загрузки V07

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: icomoon.css, owl.carousel.css, jquery.js, popper.js

Версия начальной загрузки: 4.3.1

О коде

Меню начальной загрузки V05

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: icomoon.css, owl.carousel.css, jquery.js, popper.js

Версия начальной загрузки: 4.3.1

О коде

Адаптивный бутстрап бокового меню

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

Версия начальной загрузки: 4.5.2

Автор
  • BBBootstrap Team
О коде

Bootstrap 5 Красочная панель навигации с анимацией

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

Версия начальной загрузки: 5.0.0

Автор
  • Сантану Патра
О коде

Панель навигации Cool Bootstrap

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Версия начальной загрузки: 4.1.1

Автор
  • Иван Гроздич
О коде

Эффект меню

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Версия начальной загрузки: 4.5.0

О коде

Панель навигации Bootstrap 4

Панель навигации Bootstrap 4 с логотипом и названием бренда.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 4.3.1

Автор
  • Начальный
О коде

Bootstrap Sticky Navbar

Создайте липкую верхнюю панель навигации с помощью служебных классов Bootstrap 4.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 4.3.1

О коде

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: bootsnav.css, jquery.js, bootsnav.js

Версия начальной загрузки: 3.3,0

О коде

Стиль раскрывающегося меню начальной загрузки 83

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: bootsnav.css, jquery.js, bootsnav.js

Версия начальной загрузки: 3.3.0

О коде

Стиль раскрывающегося меню начальной загрузки 75

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: bootsnav.css, jquery.js, bootsnav.js

Версия начальной загрузки: 3.3.0

Автор
  • Сваруп Кумар Куйла
О коде

Меню с Awesome Hover

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Версия начальной загрузки: 4.1.3

Автор
  • Омкар Байлкери
О коде

Bootstrap 4 Mega

Bootstrap 4 мега-панель навигации меню со значками.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 4.3.1

Автор
  • Начальный
О коде

Bootstrap Прозрачная панель навигации

Меню начинается с прозрачной строки заголовка. Затем, когда посетитель вашего сайта прокручивает страницу вниз, он становится непрозрачным, что улучшит доступность вашего меню.Кроме того, панель меню адаптивна, а пункты меню скрыты в минималистичном гамбургер-меню. Прозрачная панель навигации Bootstrap хорошо смотрится как на настольных компьютерах, так и на мобильных устройствах.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 4.3.1

О коде

Bootstrap 4 Navbar

С помощью Bootstrap панель навигации может расширяться или сворачиваться в зависимости от размера экрана.Стандартная панель навигации создается с помощью класса .navbar , за которым следует адаптивный класс сворачивания: .navbar-expand-xl. ... sm (размещает панель навигации вертикально на очень большом, большом, среднем или маленьком экранах).

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 4.3.1

Автор
  • BBBootstrap Team
О коде

Bootstrap 4 Выпадающее меню Megamenu

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Версия начальной загрузки: 4.3.1

Автор
  • Rajesh Kr. Das
О коде

Меню начальной загрузки

Меню начальной загрузки с плавным переходом границы.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: popper.js

Версия начальной загрузки: 4.3.1

О коде

Многоуровневое меню начальной загрузки

Многоуровневое меню начальной загрузки при наведении курсора Bootstrap3.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Версия начальной загрузки: 3.4.0

Автор
  • начальный
О коде

Начальная панель навигации с логотипом

Создайте панель навигации Bootstrap 4 с изображением логотипа.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 4.3.1

Автор
  • Начальный
О коде

Bootstrap Вертикальная панель навигации

Создайте фиксированную боковую панель, используя вертикальную навигацию Bootstrap 4 и медиа-объекты.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 4.3.1

Автор
  • Иван Гроздич
О коде

Меню адаптивного загрузчика 4 - Светлый / Темный

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Версия начальной загрузки: 4.1.3

Автор
  • Тристан Коттам Меулеманс
О коде

Bootstrap адаптивная навигационная панель

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: -

Версия начальной загрузки: 3.3.7

Автор
  • Триш Рекуэро
О коде

Эффект подчеркивания меню начальной загрузки

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Версия начальной загрузки: 4.0.0

О коде

Bootstrap 4 Navbar с раскрывающейся анимацией

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Версия начальной загрузки: 4.0.0

Автор
  • Харун Коджаман
О коде

Меню начальной загрузки для одной страницы

Одностраничное меню Bootstrap + jQuery с эффектом плавной прокрутки, если щелкнуть элемент меню, измените активный статус и прокрутите до раздела.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Версия начальной загрузки: 3.3.7

Автор
  • Райан де Андрадес
О коде

Меню начальной загрузки + подменю

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 3.3.5

Автор
  • Джейкоб Летт
О коде

Bootstrap 4 Мега Выпадающее меню Navbar

Mega Dropdown Menu Navbar - раскрывающееся меню полной ширины фрагмента кода Bootstrap 4.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Версия начальной загрузки: 4.1.3

Автор
  • Захари Каль
О коде

Минимальная начальная панель навигации

Минимальная панель навигации Bootstrap.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 3.3,7

О коде

Перетаскиваемое меню начальной загрузки

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js, jquery-ui.js

Версия начальной загрузки: 3.3.7

О коде

Боковая панель фиксированной навигации

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: линеариконы.js, jquery.js

Версия начальной загрузки: 3.3.6

Сделано с
  • HTML (Haml) / CSS (SCSS) / JS
О коде

Полноэкранное меню начальной загрузки

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Версия начальной загрузки: 3.3.6

Автор
  • Скотт Маршалл
О коде

Адаптивная анимированная навигация

Полностью адаптивное анимированное меню навигации для Bootstrap буквально копирует и вставляет, и все готово.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 3.3.1

Автор
  • Клинт Беттига
Сделано с
  • HTML (Haml) / CSS (SCSS) / JS
О коде

Bootstrap Navbar Toggle Показать / Скрыть

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 2.3.2

О коде

Заголовок синий

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 4.1.3

О коде

Эффект меню заголовка стиля

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 4.1.1

О коде

Меню Accordian

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 4.0.0

О коде

Адаптивная боковая панель меню навигации

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css, jquery.js

Версия начальной загрузки: 4.0.0

О коде

Адаптивное боковое меню

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Версия начальной загрузки: 4.0.0

О коде

Bootstrap Mega Menu

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Версия начальной загрузки: 3.3.0

О коде

Мега Меню

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Версия начальной загрузки: 3.3.0

О коде

Мега Меню

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: jquery.js

Версия начальной загрузки: 3.3.0

.

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

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