找到你要的答案

Q:Use totally different nav menu in mobile collapsed (responsive) vs desktop [closed]

Q:使用完全不同的导航菜单移动倒塌(响应)与桌面[关闭]

I'm using Boostrap 3 but have a side by side menu that I want stacked for mobile / responsive screen mode. Is there a way to use / show a totally different navigation menu in the mobile versions of my site? the example bootstrap code below is the menu button for mobile devices. When clicked the menu is displayed differently from desktop versions. how do I have a totally different nav menu / code displayed when clicking on the button?

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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="#">Brand</a>

        </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"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a>
                </li>
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

Demo

我使用的升压电路的3但有侧边,我想层叠菜单移动/响应屏幕模式。有没有在我的网站的移动版本中使用/显示一个完全不同的导航菜单的方法?下面的示例引导代码是移动设备的菜单按钮。单击时菜单显示与桌面版本不同。我怎么有完全不同的导航菜单代码显示时,点击按钮?

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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="#">Brand</a>

        </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"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a>
                </li>
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

演示

answer1: 回答1:

create two separate drop downs ad a unique class to each for example class="desktop" and the other class="mobile" in your css have mobile class hidden like this .mobile{display: none;} then at your media query where you want your different dropdown to show do this

@media only screen and (max-width: somewidth here){
.desktop{display: none;}
.mobile{display: inline;}
}

This will hide your desktop dropdown and then show your mobile version.

创建两个单独的下拉广告一类独特的每个例如class=“桌面”和其他类=“移动”在你的CSS有移动类隐藏这样。移动{显示:无;}然后在媒体查询您想要的不同的下拉菜单显示这样做

@media only screen and (max-width: somewidth here){
.desktop{display: none;}
.mobile{display: inline;}
}

这将隐藏你的桌面下拉然后显示你的手机版。

jquery  twitter-bootstrap  menu  responsive-design  navigation