Question

我想为移动首张网络地图创建一个小型侧边栏。

我发现了一段符合我想要的代码，但当页面缩小到特定宽度时，导航栏会粘到顶部，然后我会失去我想用小滑动图标创建的效果。我尝试更改它确实更改的媒体查询中的最小宽度。请提出一个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>

另外还有css中的mediaquery：

 @media (min-width: 765px) {

将css限制在大于765px的屏幕宽度。

现在您的菜单始终位于左侧。唯一的问题是字形和字母是隐藏的......我真的不知道为什么。可悲的是，我对bootstrap并不是那么熟悉..但我希望也许我可以帮助你一点点。

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

1 个答案: