响应式 3 列下拉菜单

Posted

技术标签:

【中文标题】响应式 3 列下拉菜单【英文标题】:Responsive 3 column drop down menu 【发布时间】:2018-08-07 10:21:45 【问题描述】:

我想创建一个类似于下面这个网站的全宽下拉菜单栏。

我已经能够对宽度做一些事情了。但是我很难弄清楚如何将子菜单分组为 3 列。我总共有 11 个子菜单,我希望它出现在 4x4x3 视图中,如上图所示。我的目前看起来像这样:

如果你能告诉我怎么做,我将不胜感激。

这是我的代码摘要: HTML

<div class='nav' nav-menu-style="yoga">
                        <ul class="nav-menu">
                            <li> <a href="#brands">BRANDS</a>
                                <ul class="dropDownMenu"><h2>OUR BRANDS</h2>
                                    <li> <a href="#apotheke"> APOTHEKE ***LYN </a> </li>
                                    <li> <a href="#appelles"> APPELLES APOTHECARY </a> </li>
                                    <li> <a href="#atkinsons"> ATKINSONS LONDON </a> </li>
                                    <li> <a href="#balmain"> BALMAIN PARIS </a> </li>
                                    <li> <a href="#biology"> BIOLOGY SMART SKINCARE </a> </li>
                                    <li> <a href="#eco"> ECO </a> </li>
                                    <li> <a href="#kevinmurphy"> KEVIN MURPHY </a> </li>
                                    <li> <a href="#metis"> METIS </a> </li>
                                    <li> <a href="#soak"> SOAK </a> </li>
                                    <li> <a href="#usc"> URBAN SKINCARE CO </a> </li>
                                    <li> <a href="#zambeli"> ZAMBELI </a> </li>
                                </ul>
                            </li>
                            <li> <a href="#customDesign">CUSTOM DESIGN</a></li>
                            <li> <a href="#contact">CONTACT US</a></li>
                        </ul>
                    </div>

CSS

@import url(https://fonts.googleapis.com/css?family=Questrial);
/*--- Nav Font --*/
/*--- Start Navigation Style --*/
.nav-outer 
    width: 100%;
    height: 85px;
    background: #ffffff;
    position: fixed !important;
    z-index: 100000000;

.nav-wrap 
    max-width: 1120px;
    margin: 0 auto;

nav 
    margin-top: 0;
    background: #ffffff;
    font-family: 'Questrial', sans-serif;

.nav ul 
    overflow:hidden;
    list-style:none;

.nav-button:hover 
    cursor:pointer;

.navigation 
    clear: both;
    width: 100%;
    position: relative;

.nav a 
    color: #232320;
    text-transform: uppercase;
    text-decoration:none;

body .nav .nav-menu li a 
    display:inline-block;
    margin-top: 10px;
    padding:15px 20px;
    color: #232320;
    font-size: 19px;

.nav.yoga .nav-menu li.active a 
    color: #966b3a;
    text-decoration: underline;

.nav.yoga .nav-menu li a:hover 
    color: #966b3a;
    text-decoration: underline;

.nav.yoga .nav-menu .dropDownMenu li a:hover
    color: #ffffff;
    text-decoration: none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(255, 255, 255, 0.67);
    -moz-box-shadow: 0px 0px 30px 0px rgba(255, 255, 255, 0.67);
    box-shadow: 0px 0px 30px 0px rgba(255, 255, 255, 0.67);

.nav.yoga .nav-toggled 
    min-height:36px;
    border-radius:6px;
    margin-top: -7px;

.nav.yoga .nav-toggled-controls 
    display:block;
    height:40px;
    text-align:left;
    position:relative;

.nav.yoga .nav-toggled-title 
    position:relative;
    top:9px;
    left:15px;
    font-size:16px;

.nav.yoga .nav-button 
    display:block;
    position:absolute;
    right:15px;
    top:8px;

.nav.yoga .nav-button span 
    display:block;
    margin-top:4px;
    height:2px;
    background: #FFF;
    width:24px;

.nav-toggled-controls
    border-bottom: 0px solid #FFF;

.nav.yoga .nav-toggled ul li a 
    display:block;
    width:100%;
    background-color: #505E67;
    text-align:left;
    padding:10px 0px 10px 15px;
    border-bottom:1px solid #FFF;
    text-align: center;
    font-size: 16px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

.nav.yoga .nav-toggled ul li ul a 
    font-size: 15px;
    text-transform: none;

.nav.yoga .nav-toggled ul li.active a 
    background-color: #F5F5F5;
    color: #505E67;

.nav.yoga .nav-toggled ul li a:hover 
    background: #F5F5F5;
    color: #505E67;

.nav.yoga .nav-toggled ul li 
    position: relative;

.toggle-sm:after 
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 18px;
    line-height: 25px;

.toggle-sm:after 
    content: '+';
    cursor: pointer;

.toggle-sm.open:after 
    content: '-';
    cursor: pointer;

.nav .nav-menu 
    text-align: center;
    overflow: visible;
    min-height: 56px;
    padding-left: 0;
    margin: 0;
    margin-top: 25px;

@media (min-width: 823px) 
    .nav 
        float: right;
    
    .logo 
    float: left;
    

@media screen and (max-width: 822px) 
    body .nav .nav-menu li a 
        margin-top: 4px;
    
    .logo img 
        max-width: 135px !important;
        margin-bottom: 3px;
    
    .nav-outer 
        height: 21px;
    
    .nav.yoga .nav-toggled-controls 
        top: -40px;
        margin-bottom: -36px;
    
    .nav-clear 
        padding-top: 37px;
        margin-bottom: -15px;
    

.logo img 
    max-width: 250px;
    height: auto;
    margin-top: 7px;
    margin-left: 30px;
    margin-bottom: 5px;

.navigation:after 
    content: "";
    display: table;
    clear: both;

.nav .nav-menu li 
    display:inline-block;
    padding:0px;
    margin:0px !important;
    position: relative;

.nav-button:hover 
    cursor:pointer;

.nav .nav-toggled ul 
    display:none;
    margin:0px ;
    padding:0px ;
    position: relative;

.nav .nav-menu > li > ul 
    position: absolute;
    z-index: 10000000000;
    top: 50px;
    text-align: left;
    background: #000;
    width: 1000%;
    padding-left: 0;
    display: none;
    margin-left: -700px;
    opacity: 0.8;
    color: #ffffff;


.nav.yoga .nav-menu > li > ul a 
    padding: 11px 15px;
    font-size: 18px;
    font-weight: normal;
    text-transform: none;
    color: #ffffff;

.nav .nav-menu > li > ul  li 
    position: relative;
    width: 100%;
    text-align: center;
    color: #ffffff;

.nav .nav-menu > li > ul > li  ul 
    position: absolute;
    right: -100%;
    top: 0;
    width: 100%;
    padding-left: 0;
    background: #505E67;

.nav .nav-menu > li > ul > li  ul a 
    white-space: nowrap;

.nav ul 
    overflow: visible;

.has-children 
    position: relative;

.has-children:after 
    content: '+';
    color: #FFF;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    cursor: pointer;

.has-children:hover:after 
    content: '-';
    color: #FFF;
    cursor: pointer;

body .nav .nav-menu li a 
    padding: 15px 30px;

.clicker 
    width: 45px;
    height: 45px;
    position: absolute;
    right: 0;
    z-index: 30000;

.nav-clear 
    clear: both;
    padding-top: 67px;

/*--- End Navigation Style --*/
/*--------------------MEDIA!!!---------------*/
@media screen and (max-width: 768px) 
    #banner-wrapper 
        position: relative;
        -ms-overflow-x: hidden;
        overflow-x: hidden;
    
    .nav-menu 
        display: none;
    

【问题讨论】:

您是否使用任何框架/库来使您的下拉菜单工作? 不,只是简单的 css 您能否为您的代码创建一个小提琴或代码 sn-p(running)? 我试着把它放到 jsfiddle 但它不起作用,它在我的本地主机上虽然 link 这就是我所关心的,必须有一些东西可以让你的代码正常工作,但我也不能正常工作 【参考方案1】:

如果你使用纯 CSS, 尝试以下操作: 到您的 ul class="dropDownMenu" 添加

display: flex;
flex-wrap: wrap;

在这个 ul 里面给你的 li 添加

width: 33%;

在这种情况下,您应该将标题放在 ul 之外 不幸的是,我无法使您的代码正常工作,但总的来说,如果没有样式,它将如下所示:

【讨论】:

在哪里添加宽度?对不起,我在那里感到困惑。你能给我发个小提琴吗? 嗨。现在可以了!我在代码中唯一改变的是宽度。 .nav .nav-menu > li > ul li 位置:相对;宽度:33%;文本对齐:居中;颜色:#ffffff; 【参考方案2】:

好吧,我为你创造了一个小提琴。 https://jsfiddle.net/me4gsdku/16/

想法是只添加 flex。

<div class='nav'>
                        <ul class="nav-menu">
                            <li> <a href="#brands">BRANDS</a>
                                <div class="dropDownMenu" id="brands">
                  <h2>OUR BRANDS</h2>
                  <ul>
                    <li> <a href="#apotheke"> APOTHEKE ***LYN </a> </li>
                    <li> <a href="#appelles"> APPELLES APOTHECARY </a> </li>
                    <li> <a href="#atkinsons"> ATKINSONS LONDON </a> </li>
                    <li> <a href="#balmain"> BALMAIN PARIS </a> </li>
                    <li> <a href="#biology"> BIOLOGY SMART SKINCARE </a> </li>
                    <li> <a href="#eco"> ECO </a> </li>
                    <li> <a href="#kevinmurphy"> KEVIN MURPHY </a> </li>
                    <li> <a href="#metis"> METIS </a> </li>
                    <li> <a href="#soak"> SOAK </a> </li>
                    <li> <a href="#usc"> URBAN SKINCARE CO </a> </li>
                    <li> <a href="#zambeli"> ZAMBELI </a> </li>
                  </ul>
                                </div>
                            </li>
                            <li> <a href="#customDesign">CUSTOM DESIGN</a></li>
                            <li> <a href="#contact">CONTACT US</a></li>
                        </ul>
                    </div>


.dropDownMenu ul 
  display:flex;
  flex-wrap: wrap;

.dropDownMenu ul li 
   flex: 0 0 33.333333%;
   max-width: 33.333333%;
   position: relative;
    width: 100%;
    min-height: 1px;

【讨论】:

以上是关于响应式 3 列下拉菜单的主要内容,如果未能解决你的问题,请参考以下文章

响应式下拉菜单 - 当屏幕大小增加到断点时隐藏以前显示的菜单项

html 下拉式响应式菜单

Javascript 在下拉响应式菜单栏中不起作用

Angular UI Bootstrap 响应式导航栏下拉菜单在新版本中无法正常工作

如何创建在英雄内容顶部下拉的响应式菜单(Tailwind CSS ...)[关闭]

如何使超级鱼下拉菜单响应?