带有关闭画布菜单的引导导航栏

Question

在我的仪表板示例中，我在 column_left 菜单顶部有引导导航栏菜单，如下面的代码预览所示

更新：此链接现已更新为我的答案中的新代码！

Code Preview Click Here

我想要做的是让导航栏位于左侧栏的边缘，并打开和关闭正确的宽度。

目前菜单在导航栏下打开和关闭。

问题：如何使我的导航栏位于侧边栏的边缘 而不是在顶部并以相同的宽度打开和关闭。 我已经尝试过 将导航栏放在内容 div 旁边，但没有运气。

HTML

<div id="column-left">

<ul id="menu">

<li>
<a href="#"><i class="fa fa-dashboard fa-fw"></i> <span>Dashboard</span></a>
</li>

<li>
<a href="#"><i class="fa fa-bar-chart"></i> <span>Single Link</span></a>
</li>  

<li>
<a class="parent"><i class="fa fa-cog fa-fw"></i> <span>Multilevel Menu</span></a>
<ul>

<li><a href="">Link 1</a></li>

<li><a class="parent">Sub Multilevel Menu 1</a>
<ul>
<li><a href="">Sub Menu Link 1a</a></li>
<li><a href="">Sub Menu Link 1b</a></li>
</ul>
</li>

<li><a class="parent">Sub Multilevel Menu 2</a>
<ul>
<li><a href="#">Sub Menu Link 2a</a></li>
<li><a href="#">Sub Menu Link 2b</a></li>
<li><a href="#">Sub Menu Link 2c</a></li>
</ul>
</li>

</ul>
</li><!-- System -->
</ul>   
</div>

<div id="content">
<div class="main">
<div class="container-fluid">

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top navbar-shadow">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a type="button" id="button-menu" class="navbar-brand"><i class="fa fa-indent fa-lg"></i></a>
<a href="#" class="navbar-brand">Project name</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">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 class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
</ul>
</div><!--/.nav-collapse -->
</nav>


</div>
</div>
</div>

CSS

@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,greek-ext,vietnamese);

/* Global */
body {
    /*height: 100%;*/
    margin: 0;
    /*min-height: 100% !important;*/
    font-family: 'Open Sans', sans-serif;
    overflow-x: hidden;
    padding-top: 70px;
    width: 100%;
    background-color: #eee;
}

a,
a:hover, 
a:focus {
    cursor: pointer;
    text-decoration: none;
}

tr:hover a.dashboard-user:after {
    font-family: FontAwesome;
    content: "\f044";
    font-size: 14px;
}

/* fix for bootstrap hidden and visible */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
    display: inline;
}

/* Layout  */

.container-fluid {
    padding-left: 20px;
    padding-right: 20px;
}

#content {
    padding-bottom: 40px;
    transition: all 0.3s;
}

/* Column Left  */

#column-left {
    width: 50px;
    min-height: 100%;
    background-color: #242424;
    top: 0px;
    position: fixed;
    padding-top: 70px;
    z-index: 10;
    transition: all 0.3s;
}

#column-left:hover{
  width: 250px;
}


#column-left + #content {
    margin-left: 50px;
}

#column-left + #content + #footer {
    margin-left: 50px;
}

@media (max-width: 767px) {
    #column-left {
        overflow: hidden;
        display: none;
    }

    #column-left + #content {
        margin-left: 0;
    }

    #column-left + #content + #footer {
        margin-left: 0;
    }

}

/* Column Left Active */

#column-left.active {
    width: 235px;
    display: block;
}

@media (min-width: 768px) {

#column-left.active {
    overflow: auto;
}

#column-left.active + #content {
    margin-left: 235px;
}

#column-left.active + #content + #footer {
    margin-left: 235px;
}

}

@media (max-width: 767px) {

    #column-left.active + #content {
        position: relative;
        left: 235px;
    }

    #column-left.active + #content + #footer {
        position: relative;
        left: 235px;
    }

}

#column-left.active {
    width: 235px;
}

#column-left.active #menu li i {
    font-size: 14px;
}

#column-left.active #menu > li > a > span {
    display: inline;
}

#column-left.active #menu > li > ul {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    visibility: visible;
}

/* Top Navbar */

.menu {
    background: #eeeeee none repeat scroll 0 0;
}

.navbar {
    background-color: #fff !important;
    border: 0 none;
    border-radius: 0;
    color: #666;
    margin-bottom: 0;
}

.navbar.navbar-shadow {
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), 0 2px 0 0 rgba(0, 0, 0, 0.02);
}

#button-menu {
    display: inline-block;
    cursor: pointer;
    color: #6D6D6D;
}


@media (max-width: 640px) {
    .navbar-brand {
        font-size: 14px;
        padding: 15px 7px;
    }
}

.profile {
    display: none;
}

#column-left.active .profile {
    display: block;
    padding-left: 15px;
    border-bottom: 1px solid #2d2d2d;
    padding-bottom: 25px;
}

.profile .media-left img {
    border: 2px solid #888;
    border-radius: 50%;
    max-width: 40px;
}

/* Sidebar Menu */

#menu, 
#menu ul, 
#menu li {
    padding: 0;
    margin: 0;
    min-height: 100%;
    list-style: none;
}

#menu {
    margin-bottom: 25px;
}

#menu > li {
    position: relative;
}

#menu li a {
    text-decoration: none;
    display: block;
    padding: 10px;
    cursor: pointer;
    color: #aaaaaa;
    border-bottom: 1px solid #2d2d2d;
}

#menu li a i {
    color: rgba(170, 170, 170, 0.7);
    font-size: 16px;
}

#menu > li > a {
    color: #aaaaaa;
    font-size: 14px;    
    padding-left: 13px;
}

#menu > li > a:hover {
    background-color: #444444;
}

#menu > li > a > span {
    display: none;
    margin-left: 8px;
}

#menu li li a {
    border-bottom: none !important;
}

#menu li li a:hover {
    color: #aaaaaa;
    background-color: #1e1e1e;
}

/*
#menu li li a:before {
    content: "\f101";
    font-size: 14px;
    font-family: FontAwesome;
    margin-left: 10px;
    margin-right: 10px;
    transition: margin ease 0.5s;   
}
*/
#menu li li a:hover:before {
    margin-right: 20px;
}

#menu > li.active > a {
    color: #aaaaaa;
    background: #242424;
}

#menu li.active li a {
    color: #aaaaaa;
}

#menu li li.active > a:last-child {
    color: #aaaaaa;
}

#menu li li.active a:last-child:before {
    margin-left: 20px;
    margin-right: 10px;
}

#menu > li > ul {
    position: absolute;
    left: 50px;
    top: 0px;
    width: 210px;
    background-color: #313131;
    visibility: hidden;
}

#menu li ul {
    overflow: hidden;
}

#menu li li a.parent:after, #column-left.active #menu > li a.parent:after {
    font-family: FontAwesome;
    content: "\f105";
    float: right;
    margin-right: 8px;
}

#menu li li.open > a.parent:after, #column-left.active #menu > li.open > a.parent:after {
    font-family: FontAwesome;
    content: "\f107";
    float: right;
    margin-right: 8px;
}

#menu li ul a {
    padding-left: 20px;
}

#menu li li ul a {
    padding-left: 40px;
}

#menu li li li ul a {
    padding-left: 60px;
}

#menu li li li li ul a {
    padding-left: 60px;
}

#menu li li li a.parent:after, #column-left.active #menu > li a.parent:after {
    font-family: FontAwesome;
    content: "\f105";
    float: right;
    margin-right: 8px;
}

#menu li li li.open > a.parent:after, #column-left.active #menu > li.open > a.parent:after {
    font-family: FontAwesome;
    content: "\f107";
    float: right;
    margin-right: 8px;
}

#menu li ul li a.parent:after, #column-left.active #menu > li ul li a.parent:after {
    font-family: FontAwesome;
    content: "\f105";
    float: right;
    margin-right: 8px;
}

#menu li ul li.open > a.parent:after, #column-left.active #menu > li ul li.open > a.parent:after {
    font-family: FontAwesome;
    content: "\f107";
    float: right;
    margin-right: 8px;
}

Answer 1

问题已解决。

更新的 codepen 预览

Click Here For Preview

问题是导航栏已修复，因此一直位于顶部。

我已删除 navbar-fixed-top 并从 body {} 中删除了 padding-top 70px

图片

CSS

@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,greek-ext,vietnamese);

body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    overflow-x: hidden;
    width: 100%;
    background-color: #eee;
}

a,
a:hover, 
a:focus {
    cursor: pointer;
    text-decoration: none;
}

tr:hover a.dashboard-user:after {
    font-family: FontAwesome;
    content: "\f044";
    font-size: 14px;
}

/* fix for bootstrap hidden and visible */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
    display: inline;
}

/* Layout  */

.container-fluid {
    padding-left: 20px;
    padding-right: 20px;
}

#content {
    padding-bottom: 40px;
    transition: all 0.3s;
}

/* Column Left  */

#column-left {
    width: 50px;
    min-height: 100%;
    background-color: #242424;
    top: 0px;
    position: fixed;
    padding-top: 70px;
    z-index: 10;
    transition: all 0.3s;
}

#column-left:hover{
  width: 250px;
}


#column-left + #content {
    margin-left: 50px;
}

#column-left + #content + #footer {
    margin-left: 50px;
}

@media (max-width: 767px) {
    #column-left {
        overflow: hidden;
        display: none;
    }

    #column-left + #content {
        margin-left: 0;
    }

    #column-left + #content + #footer {
        margin-left: 0;
    }

}

/* Column Left Active */

#column-left.active {
    width: 235px;
    display: block;
}

@media (min-width: 768px) {

#column-left.active {
    overflow: auto;
}

#column-left.active + #content {
    margin-left: 235px;
}

#column-left.active + #content + #footer {
    margin-left: 235px;
}

}

@media (max-width: 767px) {

    #column-left.active + #content {
        position: relative;
        left: 235px;
    }

    #column-left.active + #content + #footer {
        position: relative;
        left: 235px;
    }

}

#column-left.active {
    width: 235px;
}

#column-left.active #menu li i {
    font-size: 14px;
}

#column-left.active #menu > li > a > span {
    display: inline;
}

#column-left.active #menu > li > ul {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    visibility: visible;
}

/* Top Navbar */

.menu {
    background: #eeeeee none repeat scroll 0 0;
}

.navbar {
    background-color: #fff !important;
    border: 0 none;
    border-radius: 0;
    color: #666;
    margin-bottom: 0;
}

.navbar.navbar-shadow {
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), 0 2px 0 0 rgba(0, 0, 0, 0.02);
}

#button-menu {
    display: inline-block;
    cursor: pointer;
    color: #6D6D6D;
}


@media (max-width: 640px) {
    .navbar-brand {
        font-size: 14px;
        padding: 15px 7px;
    }
}

.profile {
    display: none;
}

#column-left.active .profile {
    display: block;
    padding-left: 15px;
    border-bottom: 1px solid #2d2d2d;
    padding-bottom: 25px;
}

.profile .media-left img {
    border: 2px solid #888;
    border-radius: 50%;
    max-width: 40px;
}

/* Sidebar Menu */

#menu, 
#menu ul, 
#menu li {
    padding: 0;
    margin: 0;
    min-height: 100%;
    list-style: none;
}

#menu {
    margin-bottom: 25px;
}

#menu > li {
    position: relative;
}

#menu li a {
    text-decoration: none;
    display: block;
    padding: 10px;
    cursor: pointer;
    color: #aaaaaa;
    border-bottom: 1px solid #2d2d2d;
}

#menu li a i {
    color: rgba(170, 170, 170, 0.7);
    font-size: 16px;
}

#menu > li > a {
    color: #aaaaaa;
    font-size: 14px;    
    padding-left: 13px;
}

#menu > li > a:hover {
    background-color: #444444;
}

#menu > li > a > span {
    display: none;
    margin-left: 8px;
}

#menu li li a {
    border-bottom: none !important;
}

#menu li li a:hover {
    color: #aaaaaa;
    background-color: #1e1e1e;
}

/*
#menu li li a:before {
    content: "\f101";
    font-size: 14px;
    font-family: FontAwesome;
    margin-left: 10px;
    margin-right: 10px;
    transition: margin ease 0.5s;   
}
*/
#menu li li a:hover:before {
    margin-right: 20px;
}

#menu > li.active > a {
    color: #aaaaaa;
    background: #242424;
}

#menu li.active li a {
    color: #aaaaaa;
}

#menu li li.active > a:last-child {
    color: #aaaaaa;
}

#menu li li.active a:last-child:before {
    margin-left: 20px;
    margin-right: 10px;
}

#menu > li > ul {
    position: absolute;
    left: 50px;
    top: 0px;
    width: 210px;
    background-color: #313131;
    visibility: hidden;
}

#menu li ul {
    overflow: hidden;
}

#menu li li a.parent:after, #column-left.active #menu > li a.parent:after {
    font-family: FontAwesome;
    content: "\f105";
    float: right;
    margin-right: 8px;
}

#menu li li.open > a.parent:after, #column-left.active #menu > li.open > a.parent:after {
    font-family: FontAwesome;
    content: "\f107";
    float: right;
    margin-right: 8px;
}

#menu li ul a {
    padding-left: 20px;
}

#menu li li ul a {
    padding-left: 40px;
}

#menu li li li ul a {
    padding-left: 60px;
}

#menu li li li li ul a {
    padding-left: 60px;
}

#menu li li li a.parent:after, #column-left.active #menu > li a.parent:after {
    font-family: FontAwesome;
    content: "\f105";
    float: right;
    margin-right: 8px;
}

#menu li li li.open > a.parent:after, #column-left.active #menu > li.open > a.parent:after {
    font-family: FontAwesome;
    content: "\f107";
    float: right;
    margin-right: 8px;
}

#menu li ul li a.parent:after, #column-left.active #menu > li ul li a.parent:after {
    font-family: FontAwesome;
    content: "\f105";
    float: right;
    margin-right: 8px;
}

#menu li ul li.open > a.parent:after, #column-left.active #menu > li ul li.open > a.parent:after {
    font-family: FontAwesome;
    content: "\f107";
    float: right;
    margin-right: 8px;
}

HTML

<div id="column-left">

<ul id="menu">

<li>
<a href="#"><i class="fa fa-dashboard fa-fw"></i> <span>Dashboard</span></a>
</li>

<li>
<a href="#"><i class="fa fa-bar-chart"></i> <span>Single Link</span></a>
</li>  

<li>
<a class="parent"><i class="fa fa-cog fa-fw"></i> <span>Multilevel Menu</span></a>
<ul>

<li><a href="">Link 1</a></li>

<li><a class="parent">Sub Multilevel Menu 1</a>
<ul>
<li><a href="">Sub Menu Link 1a</a></li>
<li><a href="">Sub Menu Link 1b</a></li>
</ul>
</li>

<li><a class="parent">Sub Multilevel Menu 2</a>
<ul>
<li><a href="#">Sub Menu Link 2a</a></li>
<li><a href="#">Sub Menu Link 2b</a></li>
<li><a href="#">Sub Menu Link 2c</a></li>
</ul>
</li>

</ul>
</li><!-- System -->
</ul>   
</div>

<div id="content">


<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-shadow">
<div class="container-fluid">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a type="button" id="button-menu" class="navbar-brand"><i class="fa fa-indent fa-lg"></i></a>
<a href="#" class="navbar-brand">Project name</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">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 class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>


<div class="container-fluid">

</div>


</div>
</div>