Товаров: 0 (0р.)

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

Содержание

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

<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>

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

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

<!—[if gte IE 5.5]>
<script language=»JavaScript» src=»nav-h.js» type=»text/JavaScript»></script>
<![endif]—>

Скачать JavaScript

<ul>
<li><a href=»index.html»>Главная</a></li>
<li><a href=»templates.html»>Шаблоны, рецепты +</a>
<ul>
<li><a href=»templates.html»>Шаблоны, заготовки +</a>
<ul>
<li><a href=»temp1.html»>Шаблон 1</a></li>
<li><a href=»temp2.html»>Шаблон 2</a></li>
<li><a href=»temp3.html»>Шаблон 3</a></li>

<li><a href=»temp4.html»>Шаблон 4</a></li>
<li><a href=»temp5.html»>Шаблон 5</a></li>
<li><a href=»temp6.html»>Шаблон 6</a></li>
<li><a href=»temp7.html»>Шаблон 7</a></li>
<li><a href=»temp8.html»>Шаблон 8</a></li>
</ul>
</li>
<li><a href=»faq.html»>Рецепты HTML</a></li>
<li><a href=»faq-css.html»>Рецепты CSS</a></li>
</ul>
</li>
<li><a href=»#»>Менюшки +</a>
<ul>
<li><a href=»#»>Вертикальные +</a>
<ul>
<li><a href=»menu1.html»>Вертикальное меню 1</a></li>
<li><a href=»menu2.html»>Вертикальное меню 2</a></li>
<li><a href=»menu3.html»>Вертикальное меню 3</a></li>
<li><a href=»menu4.html»>Вертикальное меню 4</a></li>
<li><a href=»menu5.html»>Вертикальное меню 5</a></li>
</ul>
</li>
<li><a href=»#»>Горизонтальные +</a>
<ul>
<li><a href=»menu6.html»>Горизонтальное меню 1</a></li>
<li><a href=»menu7.html»>Горизонтальное меню 2</a></li>
<li><a href=»menu8.html»>Горизонтальное меню 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=»/gb»>Гостевая книга</a></li>
<li><a href=»submit.html»>Контакт</a></li>
</ul>

ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
}

ul#navmenu-v:after {
clear: both;
display: block;
font: 1px/0px serif;
content: «.»;
height: 0;
visibility: hidden;
}

ul#navmenu-v li {
float: left;
display: block !important;
display: inline;
position: relative;
}

ul#navmenu-v a {
border: 1px solid #FFF;
border-right-color: #527337;
border-bottom-color: #527337;
padding: 0 6px;
display: block;
background: #A2C585;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;

height: 1%;
}

ul#navmenu-v a:hover,
ul#navmenu-v li:hover a,
ul#navmenu-v li.iehover a {
background: #648B43;
color: #FFF;
}

ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a {
background: #648B43;
color: #BCD6A7;
}

ul#navmenu-v li:hover li a:hover,
ul#navmenu-v li:hover li:hover a,
ul#navmenu-v li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover a {
background: #648B43;
color: #FFF;
}

ul#navmenu-v li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li a {
background: #648B43;
color: #BCD6A7;

}

ul#navmenu-v li:hover li:hover li a:hover,
ul#navmenu-v li:hover li:hover li:hover a,
ul#navmenu-v li.iehover li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover a {
background: #648B43;
color: #FFF;
}

ul#navmenu-v li:hover li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li.iehover li a {
background: #648B43;
color: #BCD6A7;
}

ul#navmenu-v li:hover li:hover li:hover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover li a:hover {
background: #648B43;
color: #FFF;
}

ul#navmenu-v ul,
ul#navmenu-v ul ul,

ul#navmenu-v ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}

ul#navmenu-v li:hover ul ul,
ul#navmenu-v li:hover ul ul ul,
ul#navmenu-v li.iehover ul ul,
ul#navmenu-v li.iehover ul ul ul {
display: none;
}

ul#navmenu-v li:hover ul,
ul#navmenu-v ul li:hover ul,
ul#navmenu-v ul ul li:hover ul,
ul#navmenu-v li.iehover ul,
ul#navmenu-v ul li.iehover ul,
ul#navmenu-v ul ul li.iehover ul {
display: block;
}

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

<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>

jquery — многоуровневое — простое вертикальное меню css

Многоуровневое(до 3-х уровней) Вертикальное меню с бутстрапом/JQuery

(2)

Возможно, это не тот ответ, который вы ищете, но это то, что я сделал бы в вашем случае.

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

Для того, что вы хотите сделать, я бы в основном очистил ВСЕ классы в html и просто удалил элементы из контейнера, я мог бы делать меню, как вы показываете на изображении (ну, ему нужен дополнительный стиль, например добавление значков стрелок, теней и такой, но дело в том, чтобы показать вам другой способ сделать это).

HTML:

<div>        
            <ul>

                <li>
                    <a tabindex="-1" href="#">Client Advice</a>
                    <ul>

                        <li><a tabindex="-1" href="#">Pre-advice</a></li>
                        <li><a href="#">Strategy & Technical</a></li>
                        <li><a href="#">Research</a></li>
                        <li>
                            <a href="#">APL & Products</a>
                            <ul>
                                <li >
                                    <a href="#">
                                        Approved Product List                                        
                                    </a>

                                    <ul>
                                        <li >Platforms</li>
                                        <li >Managed Funds</li>
                                        <li >Wealth Protection</li>
                                        <li >Listed Securities</li>
                                        <li >Wealth Protection</li>
                                        <li >Listed Securities</li>
                                        <li >Listed Securities</li>
                                    </ul>

                                </li>
                                <li ><a href="#">Model Portfolios</a></li>
                                <li ><a href="#">Non-approved Products</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Implementation</a></li>
                        <li><a href="#">Review</a></li>
                        <li><a href="#">Execution Only</a></li>
                    </ul>
                </li>
                <li ><a href="#">Personal Development</a></li>
                <li ><a href="#">Practice</a></li>
                <li ><a href="#">News</a></li>
            </ul>

    </div>

И только этот css (обратите внимание, что когда я вызываю непосредственно тег <a> вам может потребоваться назвать его другим способом:

html, body {
    margin:0;
    padding:0;
    height:100%;
}
* {box-sizing: border-box;}
.container {
    height:100%;
}
a {
    color:#fff;
    text-decoration:none;
    border-bottom:1px dotted #fff;
    padding:0px 0px 20px 0px;
    width:100%;
    display:block;
    height:100%;
}
li {
    padding:20px 20px 0 20px;
    width:100%;
    color:#fff;
}
.container ul {height:100%;}
.container > ul {
    width:250px;
    background-color:#224490;
    position:relative;
    overflow:visible;
}
.container > ul > li {}
.container > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul {
    display:none;
    position:absolute;
    right:-250px;
    top:0;
    width:250px;
    background-color:#18316a;
}
.container > ul > li:hover > ul {
    display:block;
}
.container > ul > li > ul >li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li > ul {
    display:none;
    position:absolute;
    right:-250px;
    top:0;
    width:250px;
    background-color:#112551;
}
.container > ul > li > ul > li:hover ul {
    display:block;
}
.container > ul > li > ul > li > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li ul li ul li {
    border-bottom:1px dotted #fff;
    padding:20px;
}

И я просто сохранил классы, которые активируют скрипт, поэтому не трогайте его.

FIDDLE

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

Как сделать многоуровневое меню?

Автор: Администратор

Просмотров: 1911

Теги: меню, menu, ul li

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

Начнём с основ, все мы знаем как делаются простые одноуровневые меню через HTML. По сути такое меню представляет из себя обычный <ul> список, элементами которого являются пункты меню-ссылки. Пример такого простого меню:

<ul>
	<li><a href="/">Первый пункт</a></li>
	<li><a href="/">Второй пункт</a></li>
	<li><a href="/">Третий пункт</a></li>
	<li><a href="/">Четвертый пункт</a></li>
</ul>

В случае, когда мы хотим сделать многоуровневое меню, то нужно так же сделать многоуровневый список. А делается он по следующему принципу, в том <li>, в котором должны быть подпункту меню добавляют ещё одно одноуровневое меню <ul>. В итоге у вас по-умолчанию будет получается вертикальное многоуровневое меню.

Давайте рассмотрим пример:

<ul>
	<li><a href="/">Первый пункт</a>
		<ul>
			<li><a href="/">1.1</a></li>
			<li><a href="/">1.2</a></li>
			<li><a href="/">1.3</a></li>
		</ul>
	</li>
	<li><a href="/">Второй пункт</a></li>
	<li><a href="/">Третий пункт</a>
		<ul>
			<li><a href="/">3.1</a></li>
			<li><a href="/">3.2</a></li>
			<li><a href="/">3.3</a></li>
		</ul>
	</li>
	<li><a href="/">Четвертый пункт</a></li>
</ul>

А вот так это будет выглядеть:

Выпадающее многоуровневое навигационное меню на CSS3

#nav {

     float: left;

   font: bold 12px Arial, Helvetica, Sans-serif;

     border: 1px solid #121314;

     border-top: 1px solid #2b2e30;

     -webkit-border-radius: 5px;

     -moz-border-radius: 5px;

     border-radius: 5px;

     overflow: hidden;

}

 

#nav ul {

margin:0;

padding:0;

list-style:none;

}

 

#nav ul li {

float:left;

}

 

#nav ul li a {

   float: left;

color:#d4d4d4;

     padding: 10px 20px;

text-decoration:none;

     background:#3C4042;

background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );

background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );

background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );

box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;

border-left: 1px solid rgba(255, 255, 255, 0.05);

        border-right: 1px solid rgba(0,0,0,0.2);

text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);

}

 

#nav li ul {

     background:#3C4042;

     background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );

     background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );

     background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );

     border-radius: 0 0 10px 10px;

     -moz-border-radius: 0 0 10px 10px;

     -webkit-border-radius: 0 0 10px 10px;

     left: -999em;

     margin: 35px 0 0;

     position: absolute;

     width: 160px;

     z-index: 9999;

     box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;

     -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;

     -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;

     border: 1px solid rgba(0, 0, 0, 0.5);

}

 

#nav li ul a {

     background: none;

     border: 0 none;

     margin-right: 0;

     width: 120px;

     box-shadow: none;

     -moz-box-shadow: none;

     -webkit-box-shadow: none;

     border-bottom: 1px solid transparent;

     border-top: 1px solid transparent;

}

Вертикальное выпадающее меню | PHPClub

Вертикальное выпадающее меню

Здравствуйте, всем
Пока хочу обсудить проблему создания меню в общем виде, т.к. не уверен, правильно ли я эту проблему представляю, поскольку считаю себя еще новичком, хотя копал эту тему в интернете довольно много. Хотелось бы, чтобы содержание меню было каким-то образом задано в виде, например, массива, а его вид в HTML-тэгах был бы создан автоматически. И еще — имею ввиду именно вертикальное меню и именно раздвигающееся при раскрытии подменю (подменю,раскрывающееся под родительским пунктом с некоторым смещением). Вариант меню, подменю которого выстраивается справа от меню (выпадающее подменю), я не рассматриваю, т.к. для многоуровневые подменю будут занимать много места на странице по горизонтали. Итак, меню с раскрывающимися подменю.
В основном вопрос построения меню на странице сайта в интернете решается средствами сложных CSS с привлечением небольшого кода на JavaScript для поодержки IE 6. Есть варианты решений с простыми CSS, но объемным и сложным кодом на JavaScript. Оба этих подхода на мой взгляд имеют свои недостатки. В решениях со сложными CSS динамическое сворачивание или раскрытие подменю задается псевдоклассом hover и оно довольно сложно выглядит для многоуровневых меню и не очень понятно, как автоматически создать эти CSS. Вообще то CSS должны отвечать только за визуальное оформление элементов страницы, а управлять их видимостью, их перепостроением при различных действиях пользователя удобнее в соответсвующих обработчиках событий на JavaScript.
Вариант со сложным кодом JavaScript плох тем, что весь этот код принимается клиентским браузером и визуальное отображение меню строится скриптом после загрузки всей страницы. При этом скрипту надо каким-то образом передать информацию о том какая ветка подменю должна быть показана, а остальные скрыты.
Я прихожу к выводу, что должно быть комбинированное решение — основное построение HTML-тэгов меню надо выполнить на стороне сервера PHP-кодом, а на JavaScript надо реализовать только обработку событий от мышки пользователя. Задача обработчика состоит в скрытии одного подменю и в отображении другого.
И последнее соображение. Хоть в интернете все примеры используют меню на основе списков <ul>, я прихожу к выводу, что надо использовать таблицы, т.к. у них больше возможностей дизайнерского оформления.
Прошу прощения за длинный опус, но если мои доводы правильны, то готов делиться своими разработками по мере их реализации.

 

Вертикальное многоуровневое меню навигации на чистом CSS

Автор: Viettu
Просмотров Всего: 56,935 просмотров
Официальная страница: Перейти на сайт
10 декабря 2014 г.
Лицензия: MIT

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

Описание:

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

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

Создайте многоуровневое меню навигации, используя вложенные списки Html. Добавьте класс has-sub в списки, в которых есть одно или несколько подменю.

Необходимые стили CSS для меню навигации.

 .navigation {
  отступ: 0;
  маржа: 0;
  граница: 0;
  высота строки: 1;
}

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

.navigation ul {
  положение: относительное;
  z-индекс: 500;
  плыть налево;
}

.navigation ul li {
  плыть налево;
  мин-высота: 0.05em;
  высота строки: 1em;
  вертикальное выравнивание: по центру;
  положение: относительное;
}

.navigation ul li.hover,
.navigation ul li: hover {
  положение: относительное;
  z-индекс: 510;
  курсор: по умолчанию;
}

.navigation ul ul {
  видимость: скрыта;
  позиция: абсолютная;
  верх: 100%;
  слева: 0px;
  z-индекс: 520;
  ширина: 100%;
}

.navigation ul ul li {float: none; }

.navigation ul ul ul {
  верх: 0;
  справа: 0;
}

.navigation ul li: hover> ul {видимость: видимый; }

.navigation ul ul {
  верх: 0;
  осталось: 99%;
}

.навигация ul li {float: none; }

.navigation ul ul {маржа-верх: 0,05em; }

.navigation {
  ширина: 13em;
  фон: # 333333;
  семейство шрифтов: 'roboto', Tahoma, Arial, sans-serif;
  масштабирование: 1;
}

.navigation: before {
  содержание: '';
  дисплей: блок;
}

.navigation: после {
  содержание: '';
  дисплей: таблица;
  ясно: оба;
}

.navigation a {
  дисплей: блок;
  отступ: 1em 1.3em;
  цвет: #ffffff;
  текстовое оформление: нет;
  текст-преобразование: прописные буквы;
}

.navigation> ul {ширина: 13em; }

.navigation ul ul {ширина: 13em; }

.навигация> ul> li> a {
  граница справа: сплошная 0.3em # 34A65F;
  цвет: #ffffff;
}

.navigation> ul> li> a: hover {цвет: #ffffff; }

.navigation> ul> li a: hover,
.navigation> ul> li: hover a {background: # 34A65F; }

.navigation li {позиция: относительная; }

.navigation ul li.has-sub> a: after {
  содержание: '"';
  позиция: абсолютная;
  справа: 1em;
}

.navigation ul ul li.first {
  -webkit-border-radius: 0 3px 0 0;
  -moz-border-radius: 0 3px 0 0;
  радиус границы: 0 3px 0 0;
}

.навигация ul ul li.last {
  -webkit-border-radius: 0 0 3px 0;
  -moz-border-radius: 0 0 3px 0;
  радиус границы: 0 0 3px 0;
  нижняя граница: 0;
}

.navigation ul ul {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  радиус границы: 0 3px 3px 0;
}

.navigation ul ul {граница: 1px solid # 34A65F; }

.navigation ul ul а {цвет: #ffffff; }

.navigation ul ul a: hover {цвет: #ffffff; }

.navigation ul ul li {border-bottom: 1px solid # 0F8A5F; }

.navigation ul ul li: hover> a {
  фон: # 4eb1ff;
  цвет: #ffffff;
}

.navigation.align-right> ul> li> a {
  граница слева: сплошная 0.3em # 34A65F;
  граница справа: нет;
}

.navigation.align-right {float: right; }

.navigation.align-right li {выравнивание текста: право; }

.navigation.align-right ul li.has-sub> a: before {
  содержание: '+';
  позиция: абсолютная;
  верх: 50%;
  слева: 15 пикселей;
  маржа сверху: -6 пикселей;
}

.navigation.align-right ul li.has-sub> a: after {content: none; }

.navigation.align-right ul ul {
  видимость: скрыта;
  позиция: абсолютная;
  верх: 0;
  осталось: -100%;
  z-индекс: 598;
  ширина: 100%;
}

.navigation.align-right ul ul li.first {
  -webkit-border-radius: 3px 0 0 0;
  -moz-border-radius: 3px 0 0 0;
  радиус границы: 3px 0 0 0;
}

.navigation.align-right ul ul li.last {
  -webkit-border-radius: 0 0 0 3 пикселя;
  -moz-border-radius: 0 0 0 3 пикселя;
  радиус границы: 0 0 0 3px;
}

.navigation.align-right ul ul {
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  радиус границы: 3px 0 0 3px;
}

css — Многоуровневое (до 3-х уровней) вертикальное меню с начальной загрузкой / JQuery

Возможно, это не тот ответ, который вы ищете, но я бы сделал это в вашем случае.

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

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

HTML:

И только этот css (обратите внимание, что когда я вызываю непосредственно тег , вам может потребоваться назвать его по-другому:

  html, body {
    маржа: 0;
    отступ: 0;
    высота: 100%;
}
* {box-sizing: border-box;}
.container {
    высота: 100%;
}
a {
    цвет: #fff;
    текстовое оформление: нет;
    нижняя граница: 1px с точками #fff;
    отступ: 0px 0px 20px 0px;
    ширина: 100%;
    дисплей: блок;
    высота: 100%;
}
li {
    отступ: 20 пикселей 20 пикселей 0 20 пикселей;
    ширина: 100%;
    цвет: #fff;
}
.container ul {height: 100%;}
.container> ul {
    ширина: 250 пикселей;
    цвет фона: # 224490;
    положение: относительное;
    перелив: видимый;
}
.container> ul> li {}
.container> ul> li: hover {background-color: # 0f1e41;}
.container> ul> li> ul {
    дисплей: нет;
    позиция: абсолютная;
    вправо: -250 пикселей;
    верх: 0;
    ширина: 250 пикселей;
    цвет фона: # 18316a;
}
.container> ul> li: hover> ul {
    дисплей: блок;
}
.container> ul> li> ul> li: hover {background-color: # 0f1e41;}
.container> ul> li> ul> li> ul {
    дисплей: нет;
    позиция: абсолютная;
    вправо: -250 пикселей;
    верх: 0;
    ширина: 250 пикселей;
    цвет фона: # 112551;
}
.container> ul> li> ul> li: hover ul {
    дисплей: блок;
}
.контейнер> ul> li> ul> li> ul> li: hover {background-color: # 0f1e41;}
.container> ul> li> ul> li ul li ul li {
    нижняя граница: 1px с точками #fff;
    отступ: 20 пикселей;
}

И я только что сохранил классы, которые активируют скрипт, так что оставьте его нетронутым.

FIDDLE

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

Многоуровневое раскрывающееся меню с чистым CSS

пользователя Vincy. Последнее изменение 1 июня 2021 г.

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

В этом руководстве мы делаем это для многоуровневого меню без jQuery или любого Javascript.

Посмотреть демоСкачать

HTML-код для многоуровневого меню

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

Многоуровневое меню CSS

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

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

 .parent {display: block; position: relative; float: left; line-height: 30px; background-color: # 4FA0D8; border-right: #CCC 1px solid;}
.parent a {margin: 10px; color: #FFFFFF; text-decoration: none;}
.parent: hover> ul {display: block; position: absolute;}
.ребенок {display: none;}
.child li {background-color: # E4EFF7; line-height: 30px; border-bottom: #CCC 1px solid; border-right: #CCC 1px solid; ширина: 100%;}
.child li a {color: # 000000;}
ul {стиль списка: нет; маржа: 0; отступ: 0 пикселей; минимальная ширина: 10em;}
ul ul ul {left: 100%; top: 0; margin-left: 1px;}
li: hover {background-color: # 95B4CA;}
.parent li: hover {background-color: # F0F0F0;}
.expand {font-size: 12px; float: right; margin-right: 5px;}

Посмотреть демоСкачать

↑ Вернуться к началу

Dynamic Drive — многоуровневое меню

Многоуровневое меню

Многоуровневое полноэкранное меню FF2 + IE10 + Chrome
Мобильное полноэкранное меню, поддерживающее несколько уровней подпрограммы. меню.Щелкните заголовок, чтобы открыть соответствующее подменю. Ваниль Поддержка JavaScript и CSS3.

Всплывающее меню гибкого уровня FF1 + IE7 + Chrome
Улучшить произвольные ссылки на ваша страница с несколькими многоуровневыми возможностями с помощью всплывающего меню jQuery! Это позволяет вам связать многоуровневое раскрывающееся меню с любой ссылкой на странице, чтобы переместить наведя указатель мыши на ссылку, вы активируете меню, которое будет отображаться рядом с ней. Каждое всплывающее меню просто определяется как обычный вложенный UL на странице, что делает его очень интуитивно понятным настроить, не говоря уже о дружественных поисковиках меню!

Раскрывающееся меню гибкого уровня FF1 + IE7 + Chrome
Подобно всплывающему меню уровня Flex выше, это сценарий гибкого меню позволяет добавлять многоуровневое раскрывающееся меню к любой ссылке на страница.Он поддерживает опускание вниз от якорной ссылки или справа от нее. вместо этого, что полезно, когда ссылка является ссылкой на боковой панели. Хорошее расширение анимация отображает меню с задержкой до появления меню / исчезает настраиваемый. Прохладный!

Компактные раскрывающиеся меню FF3 + IE8 + Chrome
Это многоуровневое раскрывающееся меню, которое также позволяет сэкономить место. наложение подменю друг на друга при раскрытии. Преобразования CSS3 используется для эффекта перехода между изменениями подменю, хотя меню также работает в устаревших браузерах, включая IE8 +.

Меню списка электропитания FF3 + IE8 + Chrome
Power List Menu — это ориентированное на мобильные устройства, многоуровневое меню, которое преобразует вложенный UL в серию выдвижных панелей, которые не занимают больше места чем сама UL верхнего уровня. Щелкните заголовок и соответствующий sub UL скользит в поле зрения над родительским UL. Он поддерживает ленивую загрузку вспомогательные UL или родительские UL из внешнего файла с использованием Ajax, что позволяет сэкономить на пропускной способности и время загрузки.

Значок меню DD FF3 + IE8 + Иконное меню Chrome
DD создает вертикальное меню на основе значков, которое фиксируется на левый край окна браузера и расширяется, чтобы отобразить подменю на Mouseover. Бесконечные уровни подменю могут быть связаны с каждым значком, с каждым подменю. меню просто определяется как скрытый DIV на странице.

Простое древовидное меню FF1 + IE5 + Chrome
Это ненавязчивый скрипт древовидного меню, который превращает любой обычный список (UL элемент) в разборное дерево! После преобразования исходный список и его подсписки могут быть свернуты / развернуты по желанию, при этом файлы cookie могут использоваться для необязательного сохранять свое состояние.

Меню jQuery TreeView (v1.4) FF2 + IE6 + Chrome
jQuery TreeView Menu объединяет все самые практичные функции запрошенный в древовидном меню в один потрясающий сценарий меню.Разметка для меню это просто список HTML до того, как скрипт преобразует его в полнофункциональный Меню TreeView, напоминающее стиль Проводника Windows, среди многих темы. Поддерживает постоянство и необязательное асинхронное заполнение дерева содержимое через данные Ajax и JSON, возвращаемые с сервера.

HV Меню FF1 + IE5 + Chrome
— Отправлено пользователем
Ср. назвал этот скрипт «HV menu» из-за его способности располагаться как по горизонтали (как верхнее меню) и вертикально (как боковое меню), но может а также из-за его универсального характера.С поддержкой miltiple подуровни, вертикальное и горизонтальное расположение, совместимость с NS6 и др., HV menu — один из лучших скриптов в своей области.

Все уровни Навигационное меню FF1 + IE6 + Chrome
Навигационное меню всех уровней — это меню на основе списков CSS / HTML с поддержкой для бесконечного количества уровней подменю. Это легкий и легкий реализовать (содержимое меню — это обычные списки HTML), со всеми меню ссылок дружественно к поисковой системе.

Плавное навигационное меню FF1 + IE7 + Chrome
Smooth Navigation Menu — это многоуровневое меню на основе списка CSS, использующее jQuery, который упрощает навигацию по сайту. Содержимое меню может либо из прямой разметки на странице, либо из внешнего файла, полученного через Вместо этого Ajax. Применяется настраиваемый плавный переход «слайд плюс плавное появление». во время открытия подменю. Меню поддерживает как по горизонтали , так и по вертикали (боковая панель). ориентация.

DD Mega Menu FF1 + IE6 + Chrome
DD Mega Menu — это выпадающая система меню, которая поддерживает произвольное подменю. макеты, такие как несколько столбцов ссылок, даже произвольный форматированный HTML. Кроме того, он поддерживает вложенные мегаменю, поэтому одно мегаменю может содержать ссылки. это, в свою очередь, вызывает выпадение еще одного мегаменю.

Мега Меню Drop Line FF28 + IE10 + Chrome21 +
Mega Drop Line Menu — это современное меню Drop Line с поддержкой бесконечного уровни подменю.Каждое подменю занимает всю ширину меню и раскрывается, чтобы показать себя на Mouseover. Он использует минимум JavaScript (<1 КБ сжатый), и работает даже при отключенном JavaScript в браузерах для настольных компьютеров.

Детализированное меню FF1 + IE6 + Chrome
Этот скрипт превращает обычный список UL в меню в стиле детализации. В верхний уровень UL определяет высоту меню, при этом подуровни спрятаны пока не перейдем к. Вы можете настроить, какой уровень должен отображаться по умолчанию, следует ли запоминать последний показанный уровень при перезагрузке страницы, а также скорость анимации «бурения».Также могут быть показаны дополнительные следы хлебных крошек.

Меню последовательного выбора FF1 + IE5 + Chrome
многомерное меню выбора формы, основанное на Xin’s Связанные выборки сценарий. Ссылки можно настроить так, чтобы они открывались в новом окне.

Примечание: Некоторые старые сценарии меню были удалены и могут быть нашел здесь.

Вертикальное многоуровневое меню Css Template

Dynamic Drive CSS Library- jQuery Multi Level CSS Menu # 2 Это многоуровневое горизонтальное CSS меню , созданное с использованием обычного вложенного HTML список, … Подменю меню скользят внутрь и наружу, что также автоматически меняет положение …

10 Brilliant Многоуровневый Навигация Меню Методы | DevSnippets Веб-разработчики могут создавать удобные для пользователя горизонтальные или вертикальные навигационные меню с помощью CSS . Javascript позволяет создавать более интерактивные, более интерактивные.

Top 71 CSS Меню Навигационные вкладки: бесплатная загрузка Дом бесплатных онлайн-советов, инструментов и информации. … 3. 14 Бесплатно Вертикально CSS Меню : в Exploding Boy. 4. 2- уровень горизонтальная навигация: демонстрация на Duoh …

Dynamic Drive CSS Library- Vertical CSS Menus CSS Library Vertical CSS Menus . Добро пожаловать в новую библиотеку CSS Dynamic Drive! … Это простое, но профессионально оформленное многоуровневое меню , боковое меню . …

Вертикальный XML Многоуровневый Меню Это вертикальное меню на основе XML с неограниченным количеством динамически создаваемых подменю. См. Вкладку СПРАВКА для получения более подробной информации.

Как создать Css Многоуровневый Меню Как создать Css Многоуровневый Меню . Сделайте навигацию по вашему сайту чистой и доступной с помощью Drop Down HTML Menu !

CSS Меню Writer 2 от WebAssist — CSS Меню Расширение для … CSS Меню Writer 2 от WebAssist — это расширение Dreamweaver для простого создания многоуровневых CSS меню . … Разработка неограниченного количества уровней кроссбраузерности CSS навигация …

Вертикальный CSS Меню Вертикальное CSS Меню . Описание. Этот пример меню демонстрирует реализацию вертикального иерархического ( многоуровневого ) меню , которое использует каскадные таблицы стилей. …

Учебное пособие: Вертикальное Многоуровневое Раскрывающееся меню Меню | Инструменты темы Thesis Вертикальное Многоуровневое Раскрывающееся меню Меню может функционировать как ваше главное меню или как дополнение к другому меню . Его легко настроить и использовать, он имеет функции …

Учебное пособие: CSS Многоуровневый Раскрывающийся список Меню | Инструменты темы Thesis Этот CSS — только Многоуровневый Выпадающий Меню полностью совместимо с IE и будет сосуществовать с большинством подключаемых модулей, особенно с подключаемыми модулями JQuery. …

Наверх 71 CSS Меню Вкладки навигации: бесплатная загрузка Дом бесплатных онлайн-советов, инструментов и информации. … 3. 14 Бесплатно Вертикально CSS Меню : в Exploding Boy. 4. 2- уровень горизонтальная навигация: демонстрация на Duoh …

25+ jQuery Drop Down Menu , CSS Multi Level Drop Down Menu … Есть много Выпадающее меню Меню уже там.но я хотел попробовать сделать что-то немного другое, написав этот пост. В этом посте вы

Топ 71 CSS Меню Вкладки навигации: бесплатная загрузка Дом бесплатных онлайн-советов, инструментов и информации. … 3. 14 Бесплатно Вертикально CSS Меню : в Exploding Boy. 4. 2- уровень горизонтальная навигация: демонстрация в Duoh …

Вертикальный XML Многоуровневый Меню Это вертикальное XML меню с неограниченным количеством динамически создаваемых подменю.См. Вкладку СПРАВКА для получения более подробной информации.

Многоуровневый Вертикальный Выпадающие меню Suckerfish «Kempwire.com Мне нужна была вертикальная навигация с несколькими уровнями и всеми дополнительными уровнями , выходящими сбоку. … для создания вертикальных многоуровневый suckerfish css выпадающие списки путем пересмотра …

Вертикальный Многоуровневый Меню — ЗагрузитьJavascripts.com Касса для Вертикальный Многоуровневый Меню категории на DOWNLOADJAVASCRIPTS.com. Исчерпывающий ресурс: DHTML, JAVASCRIPTS, AJAX, JQUERY, YUI, WEB 2.0 и т. Д.

10 лучших компонентов аккордеонного меню в jQuery / JavaScript / CSS (обновление 2021)

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

В этом посте вы найдете 10 лучших компонентов аккордеонного меню jQuery / JavaScript / CSS для элегантной организации и отображения вашей большой многоуровневой системы навигации.

Первоначально опубликовано 19 мая 2019 г., обновлено 11 февраля 2021 г.

Содержание:

  • Плагины для jQuery Accordion Menu
  • Библиотеки аккордеонного меню Vanilla JS
  • Аккордеонные меню на чистом CSS

Плагин jQuery Accordion Menu для Bootstrap 4/3 — metisMenu

metisMenu — это простой плагин меню jQuery для Bootstrap 3, который поможет вам создать сворачиваемое меню с анимированными эффектами аккордеона и поддержкой автоматического сворачивания.

[Демо] [Скачать]

Вертикальное двухкоординатное меню в стиле начальной загрузки с jQuery и CSS3 — bs_leftnavi

Плагин jQuery для создания вертикального навигационного меню в стиле Bootstrap, которое позволяет расширять / сворачивать категории меню с плавными эффектами скольжения.

[Демо] [Скачать]

Легкий, удобный для SEO плагин переключения содержимого jQuery для создания иерархического дерева или многоуровневого аккордеонного меню из вложенных неупорядоченных списков HTML.

[Демо] [Скачать]

Выпадающее меню Super Smooth Accordion с использованием jQuery и CSS3

Создание раскрывающегося меню в стиле гармошки с использованием переходов и преобразований jQuery и CSS3.

[Демо] [Скачать]

Плагин адаптивного и многоуровневого двухуровневого меню

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

[Демо] [Скачать]

Библиотеки аккордеонного меню Vanilla JS:

SEO-оптимизированное двухкомпонентное меню на ванильном JavaScript

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

[Демо] [Скачать]

Гладкое вертикальное меню-гармошка с JavaScript и CSS3

Гладкое вертикальное аккордеонное меню, созданное с помощью JavaScript, CSS, переходов CSS3, Font Awesome и вложенных списков HTML.

[Демо] [Скачать]

Аккордеонное меню на чистом CSS:

Многоуровневое двухуровневое меню с простым HTML и CSS

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

[Демо] [Скачать]

Простое двухкомпонентное меню с переходами CSS3

Простое навигационное меню «аккордеон», созданное только с использованием CSS и анимированное переходами CSS3.

[Демо] [Скачать]

SEO-оптимизированное двухкомпонентное меню на чистом CSS / CSS3

Гладкое, семантическое, оптимизированное для SEO меню аккордеона (раскрывающееся меню), созданное с помощью неупорядоченного списка HTML и CSS / CSS3.

[Демо] [Скачать]

Вывод:

Хотите больше плагинов jQuery или библиотек JavaScript для создания потрясающих аккордеонных меню в Интернете и на мобильных устройствах? Ознакомьтесь с разделами jQuery Gauge и JavaScript / CSS Gauge.

См. Также:

  • Лучшие аккордеонные компоненты на чистом JavaScript и CSS
  • Лучшие слайдеры-гармошки на JavaScript или чистом CSS
  • Лучшие гибкие раскрывающиеся меню
  • Лучшие плагины jQuery для адаптивного меню
  • Лучшие плагины для кругового меню
  • Лучшие системы мегаменю
  • Лучшие мобильные меню вне холста
  • Лучшие плагины для плавающих кнопок действия (всплывающее меню)
  • Предыдущая: 10 лучших плагинов для измерения в jQuery и чистом JavaScript / CSS (обновление 2021)
  • Далее: 10 лучших плагинов социального обмена на JavaScript / jQuery для увеличения трафика

Пример вертикального раскрывающегося меню Bootstrap

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

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

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

Для создания вертикального меню я собираюсь использовать компонент list-group начальной загрузки. Используя это, вы можете быстро создать многоуровневое меню боковой панели. Я собираюсь разместить меню слева от макета из двух столбцов, но вы также можете разместить его справа.

HTML-разметка для многоуровневого вертикального меню Bootstrap

Используя атрибут data-toggle = "collapse" , вы можете легко свернуть и развернуть конкретный блок

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

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

Настройка CSS для вертикального меню начальной загрузки 

#главное меню {
    цвет фона: # 2E3039;
}

.list-group-item {
    цвет фона: # 2E3039;
    граница: нет;
}

a.list-group-item {
    цвет: #FFF;
}

a.list-group-item: навести указатель мыши,
a.list-group-item: focus {
    цвет фона: # 43D5B1;
}

a.list-group-item.active,
a.list-group-item.active: навести указатель мыши,
a.list-group-item.active: focus {
    цвет: #FFF;
    цвет фона: # 43D5B1;
    граница: нет;
}

.list-group-item: первый ребенок,
.list-group-item: last-child {
    радиус границы: 0;
}

.list-group-level1 .list-group-item {
    отступ слева: 30 пикселей;
}

.list-group-level2 .list-group-item {
    отступ слева: 60 ​​пикселей;
}

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

Вертикальное раскрывающееся меню Bootstrap

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

Bootstrap Многоуровневое вертикальное раскрывающееся меню

Аналогичным образом вы можете добавить еще больше глубины меню. Это все о создании вертикального раскрывающегося меню начальной загрузки.

No related posts.

alexxlab

Как часто можно делать клизму грудничку: рекомендации педиатров

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Как успокоить плачущего ребенка: 10 эффективных способов

Что нужно новорожденному на первое время: полный список необходимых вещей

Пеленки для новорожденных: виды, размеры и способы использования

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

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

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