html - 如何在屏幕尺寸变化时保持小侧边栏样式？

Question

我想为移动优先网络 map 创建一个小的侧边导航栏。

我找到了一段代码来做我想做的事情，但是当页面缩小到特定宽度时，导航栏会粘在顶部然后我失去了我想用小滑动图标创建的效果。我尝试更改它确实更改的媒体查询中的最小宽度。请提出一种 Jquery 方法，我喜欢这种简单的 html 和 css 方法。

这是 Bootsnipp 的链接，我正在研究:http://bootsnipp.com/user/snippets/pjyo4

<div class="container-fluid">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>      
    </div>

    <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
        <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">Acceuil<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a>
                </li>

                <li class="dropdown"> 
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Utilisateur<span class="caret"></span>
                    <span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-user"></span>
                    </a>

                <ul class="dropdown-menu forAnimate" role="menu">
                    <li><a href="{{URL::to('createusuario')}}">Créer</a></li>
                    <li><a href="#">Modifier</a></li>
                    <li><a href="#">Reporter</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Lien séparé</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Information</a></li>     
                </ul>
                </li>        

            <li >
                <a href="#">Référence<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-th-list"></span></a>
            </li>        
            <li >
                <a href="#">Tags<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-tags"></span></a>
            </li>
        </ul>
    </div>

这是我的 CSS3 :

body,html{
height: 100%;
}

nav.sidebar, .main{
-webkit-transition: margin 200ms ease-out;
  -moz-transition: margin 200ms ease-out;
  -o-transition: margin 200ms ease-out;
  transition: margin 200ms ease-out;
}

.main{
padding: 10px 10px 0 10px;
}

@media (min-width: 765px) {

.main{
  position: absolute;
  width: calc(100% - 40px); 
  margin-left: 40px;
  float: right;
}

nav.sidebar:hover + .main{
  margin-left: 200px;
}

nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
  margin-left: 0px;
}

nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
  text-align: center;
  width: 100%;
  margin-left: 0px;
}

nav.sidebar a{
  padding-right: 13px;
}

nav.sidebar .navbar-nav > li:first-child{
  border-top: 1px #e5e5e5 solid;
}

nav.sidebar .navbar-nav > li{
  border-bottom: 1px #e5e5e5 solid;
}

nav.sidebar .navbar-nav .open .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
  padding: 0 0px 0 0px;
}

.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
  color: #777;
}

nav.sidebar{
  width: 200px;
  height: 200px;
  margin-left: -160px;
  float: left;
  margin-bottom: 0px;
}

nav.sidebar li {
  width: 100%;
}

nav.sidebar:hover{
  margin-left: 0px;
}

.forAnimate{
  opacity: 0;
}
}

@media (min-width: 1330px) {

.main{
  width: calc(100% - 200px);
  margin-left: 200px;
}

nav.sidebar{
  margin-left: 0px;
  float: left;
}

nav.sidebar .forAnimate{
  opacity: 1;
}
}

nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar 
.navbar-nav .open .dropdown-menu>li>a:focus {
  color: #CCC;
background-color: transparent;
}

nav:hover .forAnimate{
 opacity: 1;
}
section{
 padding-left: 15px;
}

我的目标是保持侧边栏样式，当鼠标悬停在侧边栏上时会显示小图标。

Answer 1

如果我没理解错的话，您希望菜单始终位于左侧，而不是切换到顶部的移动下拉菜单。如果删除显示下拉列表的部分:

<div class="container-fluid">       
                
    <div class="navbar-header">     
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">     
            <span class="sr-only">Toggle navigation</span>      
            <span class="icon-bar"></span>      
            <span class="icon-bar"></span>      
            <span class="icon-bar"></span>      
        </button>           
    </div>
 </div>

此外还有 css 中的媒体查询:

 @media (min-width: 765px) {    

在屏幕宽度大于 765px 时限制 CSS。

现在您的菜单始终位于左侧。唯一的问题是字形和字母被隐藏了，我不知道为什么。遗憾的是，我对 bootstrap 不是很熟悉。但我希望我能帮到你一点点。