Question

我想根据不同的设备显示不同的菜单，例如移动设备和桌子我希望使用sidr显示菜单。而对于大型设备，菜单表示应该是固定的bootstreap菜单。如何实现我的代码是

我的代码是

<div id="large-menu">
    <nav role="navigation" class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">My Site</a>
            </div>
            <!-- Collection of nav links and other content for toggling -->
            <div id="navbarCollapse" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="Login">Login </a></li>
                    <li><a href="SignUp">Sign Up</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="AboutUs">About Us</a></li>
                    <li><a href="ContactUs">Contact Us</a></li>
                    <li><a href="Terms">Terms & condition</a></li>
                    <li><a href="Privacy">Privacy policy</a></li>
                    <li><a href="Careers">Career </a></li>
                    <li><a href="business">Business</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>
<div id="mobile-menu">
    <div class="bottom-logo">
        <a id="simple-menu" href="#sidr" style="font-size: 50px"><i class="fa fa-list"></i></a>
        <a href="http://www.example.com" style="font-size: 50px">MySite</a>
    </div>
    <div id="sidr">
        <ul>
            <li><a href="Login">Login </a></li>
            <li><a href="SignUp">Sign Up</a></li>
            <li><a href="ForgetPassword">Forget Password</a></li>
            <li><a href="AboutUs">About Us</a></li>
            <li><a href="ContactUs">Contact Us</a></li>
            <li><a href="Terms">Terms & condition</a></li>
            <li><a href="Privacy">Privacy policy</a></li>
            <li><a href="Careers">Career </a></li>
            <li><a href="business">Business</a></li>
        </ul>
    </div>
</div>

我的完整代码是 HERE

Answer 1

您的代码中有两个菜单，适用于移动视图和大视图。在大视图中我只是隐藏小菜单并使用@media (min-width: 769px){}显示大菜单，而对于移动视图我只是隐藏大菜单＆amp;使用@media (max-width: 768px){}

显示小菜单

@media (max-width: 768px){ 
  #large-menu{
    display: none;
  }
  #mobile-menu{
    display: block;
  }
}

@media (min-width: 769px){ 
  #large-menu{
    display: block;
  }
  #mobile-menu{
    display: none;
  }
}

Answer 2

通过添加此媒体查询解决了我的问题

[searchBarWrapper setBackgroundColor: kAppNavigationItemGrayColor];

工作链接为here 参考stackoverflow

根据设备显示不同的manu

2 个答案: