#html #css #drop-down-menu #multi-level #megamenu
#HTML #css #выпадающее меню #многоуровневый #megamenu
Вопрос:
Я использую этот шаблонhttps://colorlib.com/preview/#ashion и мне нужно преобразовать его меню из одного столбца в несколько столбцов (мега меню) (нажмите страницы и появится выпадающее меню из одного столбца), которое также работает в адаптивной версии. я пробовал использовать Bootstrap 4, но это не сработало
CSS
.header {
background: #ffffff;
-webkit-box-shadow: 0px 5px 10px rgba(91, 91, 91, 0.1);
box-shadow: 0px 5px 10px rgba(91, 91, 91, 0.1);
}
.header__logo {
padding: 26px 0;
}
.header__logo a {
display: inline-block;
}
.header__menu {
padding: 30px 0 27px;
}
.header__menu ul li {
list-style: none;
display: inline-block;
margin-right: 40px;
position: relative;
}
.header__menu ul li.active a:after {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.header__menu ul li:hover a:after {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.header__menu ul li:hover .dropdown {
top: 27px;
opacity: 1;
visibility: visible;
}
.header__menu ul li:last-child {
margin-right: 0;
}
.header__menu ul li .dropdown {
position: absolute;
left: 0;
top: 56px;
width: 150px;
background: #111111;
text-align: left;
padding: 2px 0;
z-index: 9;
opacity: 0;
visibility: hidden;
-webkit-transition: all, 0.3s;
-o-transition: all, 0.3s;
transition: all, 0.3s;
}
.header__menu ul li .dropdown li {
display: block;
margin-right: 0;
}
.header__menu ul li .dropdown li a {
font-size: 14px;
color: #ffffff;
font-weight: 400;
padding: 8px 20px;
text-transform: capitalize;
}
.header__menu ul li .dropdown li a:after {
display: none;
}
.header__menu ul li a {
font-size: 15px;
text-transform: uppercase;
color: #111111;
font-weight: 500;
display: block;
padding: 2px 0;
position: relative;
}
.header__menu ul li a:after {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #ca1515;
content: "";
-webkit-transition: all, 0.5s;
-o-transition: all, 0.5s;
transition: all, 0.5s;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.header__right {
text-align: right;
padding: 30px 0 27px;
}
.header__right__auth {
display: inline-block;
margin-right: 25px;
}
.header__right__auth a {
font-size: 12px;
color: #666666;
position: relative;
margin-right: 8px;
}
.header__right__auth a:last-child {
margin-right: 0;
}
.header__right__auth a:last-child:after {
display: none;
}
.header__right__auth a:after {
position: absolute;
right: -8px;
top: -2px;
content: "/";
font-size: 13px;
}
.header__right__widget {
display: inline-block;
}
.header__right__widget li {
list-style: none;
display: inline-block;
font-size: 18px;
color: #111111;
margin-right: 20px;
cursor: pointer;
}
.header__right__widget li:last-child {
margin-right: 0;
}
.header__right__widget li a {
font-size: 18px;
color: #111111;
position: relative;
}
.header__right__widget li a .tip {
position: absolute;
right: -12px;
top: -11px;
height: 18px;
width: 18px;
background: #111111;
font-size: 10px;
font-weight: 500;
color: #ffffff;
line-height: 18px;
text-align: center;
border-radius: 50%;
}
.offcanvas-menu-wrapper {
display: none;
}
.canvas__open {
display: none;
}
html -это
<div class="col-xl-6 col-lg-7">
<nav class="header__menu">
<ul>
<li class="active"><a href="./index.html">Home</a></li>
<li><a href="#">Women’s</a></li>
<li><a href="#">Men’s</a></li>
<li><a href="./shop.html">Shop</a></li>
<li><a href="#">Pages</a>
<ul class="dropdown">
<li><a href="./product-details.html">Product Details</a></li>
<li><a href="./shop-cart.html">Shop Cart</a></li>
<li><a href="./checkout.html">Checkout</a></li>
<li><a href="./blog-details.html">Blog Details</a></li>
</ul>
</li>
<li><a href="./blog.html">Blog</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</nav>
</div>
Может кто-нибудь помочь мне с этим, я пробовал, но я создаю беспорядок, он не работает?
Комментарии:
1. Планируете ли вы использовать Bootstrap для всего вашего веб-сайта или только для его частей?
2. Кроме того, что вы имеете в виду под 3 столбцами? Вы хотите, например, чтобы Главная страница поверх женской была поверх мужской? Я думаю, есть более чистые способы сделать ваше меню отзывчивым. Взгляните на это, например getbootstrap.com/docs/4.0/components/navbar /…
3. да, я планирую использовать bootstrap 3 столбца, как здесь alijafarian.com/demos/bootstrap-multi-column-dropdown-menu
4. Могу ли я предложить использовать более свежую версию Bootstrap? У них все еще есть похожие шаблоны для выпадающих навигационных меню с 3 столбцами.
5. он использует bootstrap4, это шаблон, который я хочу отредактировать colorlib.com/preview/#ashion под страницами это выпадающее меню с одним столбцом, я хочу, чтобы оно состояло из 3 столбцов, как здесь alijafarian.com/demos/bootstrap-multi-column-dropdown-menu щелкните 3 столбца
Ответ №1:
Codepen для игры:https://codepen.io/larrytherabbit/pen/rNedewJ
Итак, вот шаблон, вам придется поиграть с ним и вставить свои собственные значения и ссылки, а также удалить / добавить то, что вам не нужно.
Используемые библиотеки:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js
HTML
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<!--/.navbar-header-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">One Column <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Two Column <b class="caret"></b></a>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here that's extra long so we can see how it looks</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Three Column <b class="caret"></b></a>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
</div>
</ul>
</li>
<li><a href="#">Link</a></li>
</ul>
</div>
<!--/.navbar-collapse-->
</nav>
<!--/.navbar-->
CSS
.dropdown-menu {
min-width: 200px;
}
.dropdown-menu.columns-2 {
min-width: 400px;
}
.dropdown-menu.columns-3 {
min-width: 600px;
}
.dropdown-menu li a {
padding: 5px 15px;
font-weight: 300;
}
.multi-column-dropdown {
list-style: none;
margin: 0px;
padding: 0px;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: #FF8803;
white-space: normal;
}
.multi-column-dropdown li a:hover {
text-decoration: none;
color: #262626;
background-color: #999;
}
@media (max-width: 767px) {
.dropdown-menu.multi-column {
min-width: 240px !important;
overflow-x: hidden;
}
}
Комментарии:
1. Рад, что смог помочь!
2. Я включил ссылку на шаблон, который я пытаюсь отредактировать, ссылка У меня возникли трудности с интеграцией вашего данного кода в его шаблон, это меняет полный стиль я просто хочу, чтобы в строке меню этой темы при нажатии «страницы» было 3 столбца вместо 1, я надеюсь, что это имеет смысл
3. я отредактировал исходный вопрос, возможно, теперь это имеет какой-то смысл