0
Ich entwerfe eine Seitennavbar für meine Website. Es funktioniert gut bis mittlere Bildschirmgröße, aber wenn die Bildschirmgröße reduziert ist (< 768px) Es wird alles chaotisch. Hier ist mein HTML und CSS-CodeNavbar für kollabieren verhindern
.main .row {
padding: 0px;
margin: 0px;
}
/*Remove rounded coners*/
nav.sidebar.navbar {
border-radius: 0px;
}
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;
}
/* .....NavBar: Icon only with coloring/layout.....*/
/*Allow main to be next to Nav*/
.main {
position: absolute;
width: 100%;
margin-left: 40px;
float: right;
}
/*lets nav bar to be showed on mouseover*/
nav.sidebar:hover + .main {
margin-left: 200px;
}
/*Center Brand*/
nav.sidebar.navbar.sidebar>.container .navbar-brand,
.navbar>.container-fluid .navbar-brand {
margin-left: 0px;
}
/*Center Brand*/
nav.sidebar .navbar-brand,
nav.sidebar .navbar-header {
text-align: center;
width: auto;
margin-left: 0px;
}
/*Center Icons*/
nav.sidebar a {
padding-right: 13px;
}
/*adds border top to first nav box */
nav.sidebar .navbar-nav > li:first-child {
border-top: 1px #e5e5e5 solid;
}
.nav-collapse,
.nav-collapse.collapse {
overflow: visible;
}
.navbar .btn-navbar {
display: none;
}
/*adds border to bottom nav boxes*/
nav.sidebar .navbar-nav > li {
border-bottom: 1px #e5e5e5 solid;
}
/* Colors/style dropdown box*/
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;
}
/*allows nav box to use 100% width*/
nav.sidebar,
nav.sidebar .container-fluid {
padding: 0 0px 0 0px;
}
/*colors dropdown box text */
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #777;
}
/*gives sidebar width/height*/
nav.sidebar {
width: 200px;
height: inherit;
margin-left: -160px;
float: left;
z-index: 8000;
}
/*give sidebar 100% width;*/
nav.sidebar li {
width: 100%;
}
/* Move nav to full on mouse over*/
nav.sidebar:hover {
margin-left: 0px;
}
/* .....NavBar: Fully showing nav bar..... */
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;
}
<nav class="navbar navbar-inverse sidebar" role="navigation">
<div class="container-fluid">
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home<span style="font-size:16px;" class="pull-right glyphicon glyphicon-home"></span></a>
</li>
<li><a href="#">Profile<span style="font-size:16px;" class="pull-right glyphicon glyphicon-user"></span></a>
</li>
<li><a href="#">Messages<span style="font-size:16px;" class="pull-right glyphicon glyphicon-envelope"></span></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-cog"></span></a>
<ul class="dropdown-menu forAnimate" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li class="divider"></li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
<li><a href="#">Home<span style="font-size:16px;" class="pull-right showopacity glyphicon glyphicon-home"></span></a>
</li>
<li><a href="#">Profile<span style="font-size:16px;" class="pull-right showopacity glyphicon glyphicon-user"></span></a>
</li>
<li><a href="#">Messages<span style="font-size:16px;" class="pull-right showopacity glyphicon glyphicon-envelope"></span></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-cog"></span></a>
<ul class="dropdown-menu forAnimate" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li class="divider"></li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="main">
<!-- Content Here -->
</div>
jemand eine Lösung vorschlagen kann? Vielen Dank im Voraus.
Für mich ist dieser Code die ganze Zeit unordentlich, egal Bildschirmgröße. Das heißt, wenn float verwendet wird, ist normalerweise ein clearfix erforderlich, um die übergeordnete Größe mit dem Inhalt – LGSon
Rand in der 'navbar-nav' Klasse zu entfernen. – mkawa