Question

我有一个顶级菜单，我想在移动浏览器中将其显示在主菜单下拉列表中。像这样http://dgmanila.com/

以下是链接：http://mobiletest.me/apple_ipad/2502013

CSS for mobile version：

.top-menuv2 ul{ float: none; display: block; clear: both; margin: 10px auto; text-align: center; }
.top-menuv2 li > ul > li{ top: 15px; }

Answer 1

为了达到你想要的类似效果，你可能不得不做一些脏HTML和CSS黑客攻击。

为此UL提供课程，例如only-desktop

<ul class="only-desktop">
    <li><a href="/testEnvironment/contacts/">Contacts</a></li>
    <li><a href="/testEnvironment/our-partners/">Our Partners</a></li>
    <li><a href="/testEnvironment/careers/">Careers</a>
        <ul>
            <li><a href="/testEnvironment/careers/a-career-with-home-credit/">A Career with Home Credit</a></li>
            <li><a href="/testEnvironment/careers/recruitment-process/">Recruitment Process</a></li>
            <li><a href="/testEnvironment/careers/vacancies/">Vacancies</a></li>
            <li><a href="/testEnvironment/careers/corporate-culture/">Corporate Culture</a></li>
        </ul>
    </li>
</ul>

并给出这样的css，

.only-desktop {display:block;}

@media screen and (max-width: 992px) /**This width could be anything you want *//
{
.only-desktop {display:none;}
}

然后在导航菜单下方添加相同的UL，但是提供不同的类

<ul class="only-mobile">
        <li><a href="/testEnvironment/contacts/">Contacts</a></li>
        <li><a href="/testEnvironment/our-partners/">Our Partners</a></li>
        <li><a href="/testEnvironment/careers/">Careers</a>
            <ul>
                <li><a href="/testEnvironment/careers/a-career-with-home-credit/">A Career with Home Credit</a></li>
                <li><a href="/testEnvironment/careers/recruitment-process/">Recruitment Process</a></li>
                <li><a href="/testEnvironment/careers/vacancies/">Vacancies</a></li>
                <li><a href="/testEnvironment/careers/corporate-culture/">Corporate Culture</a></li>
            </ul>
        </li>
    </ul>

和css将是，

.only-mobile {display:none;}

@media screen and (max-width: 992px) 
{
.only-mobile {display:block;}
}

Answer 2

这可以在不写两次顶部链接的情况下实现。请按照以下步骤操作。

HTML

<nav class="navbar navbar-default">
  <div class="container-fluid">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
     <a class="navbar-brand" href="#">Brand</a>
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"  aria-expanded="false" id="test">Toggle</button>
  </div>
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
     <ul class="nav navbar-nav">
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
     <li><a href="#">Link</a></li>
     <li class="dropdown">
  </div>
  <!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

CSS

.container-fluid{
width: 100%;
padding: 10px 0;
}
@media screen and (max-width: 600px){
#bs-example-navbar-collapse-1{
 display: none   
}
#bs-example-navbar-collapse-1 ul li {
    list-style-type: none;
}
#test{
    float: right;
}
}

@media screen and (min-width: 601px){
#bs-example-navbar-collapse-1{
 display: block;
  float: left;  
}

#bs-example-navbar-collapse-1 ul{
    display: inline-block;
    margin: 0;
}

#bs-example-navbar-collapse-1 ul li{
    display: inline-block;
}

#test{
    display: none;
}
.navbar-header{
    width: 20%;
    float: left;
}
}

JS

$(document).ready(function(){
  $("#test").on('click', function(){
    $("#bs-example-navbar-collapse-1").toggle();
  });

})

检查以下js小提琴链接： JSFiddle

如何在主菜单中显示顶层菜单？

2 个答案: