1

I want to show different menu based on different devices like for mobile and table I want to show menu using sidr. and for large devices menu representation should be fixed bootstreap menu. How to achive this my code is

My code is

<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>

My complete code is HERE

4

2 回答 2

2

您的代码中有两个菜单，用于移动视图和用于大视图。在大视图中，我只是隐藏小菜单并使用使用显示大菜单，@media (min-width: 769px){}对于移动视图，我只是隐藏大菜单并使用使用显示小菜单@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;
  }
}
于 2016-07-20T10:24:24.330 回答
0

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

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

    @media screen and (min-width: 769px) and (max-width: 2000px) {
        #mobile-menu{
            display: none;
        }
        #large-menu{
            display: block;
        }
           body {
            padding-top: 50px;
        }
    }

工作链接在这里 参考stackoverflow

于 2016-07-20T10:46:11.610 回答