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

ProgramBox

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

Post author:admin
Запись опубликована:28 марта, 2023
Post category:Вопросы по программированию

#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. я отредактировал исходный вопрос, возможно, теперь это имеет какой-то смысл