小贝子编程

固定位置菜单，使用引导程序 4



我一直在尝试通过从头开始创建仪表板来学习css，html和javascript，而不仅仅是购买boostrap仪表板UI。但是，我遇到了一个我似乎无法弄清楚的问题。我有一个侧边栏菜单和顶部菜单，我想修复：位置，以便它们在屏幕上保持静态，但是如果我这样做，内容div 会在菜单下方移动。我意识到我可以添加边距以将它们移回原位，但即便如此，如果我使用切换按钮来扩展滑动菜单，那么将其横向移动的最佳方法是什么？我把所有东西都放在这个jsfiddle中：

https://jsfiddle.net/4x60gqsn/

谢谢 肖恩

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Collapsible sidebar using Bootstrap 4</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar  -->
<nav id="sidebar">
<div class="sidebar-header">
<img class="nav-logo" src="../login/images/PrintPerry.png">
<strong>PP</strong>
</div>
<ul class="list-unstyled components">
<li>
<a href="#">
<i class="fas fa-home"></i>
<span class="nav-text">
HOME
</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-home"></i>
<span class="nav-text">
TEST
</span>
</a>
</li>
</ul>
</nav>
<!-- Page Content  -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a href="#" id="sidebarCollapse">
<i class="fas fa-align-justify fa-lg" ></i>
</a>
<span>
<a href="#" class="profile-btn">
<i class="fas fa-user fa-lg"></i>
</a>
<a href="#" class="profile-btn">
<i class="fas fa-envelope fa-lg"></i>
</a>
</span>
</div>
</nav>
<div class="content-wrapper">
<h2>Collapsible Sidebar Using Bootstrap 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h3>Lorem Ipsum Dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="js/sidebar.js"></script>
</body>

假设您打算使用position:fixed，以便在滚动时导航栏保持在原位。

这也可以通过使用position: sticky;可以完成相同工作但更清洁的替代方案来实现。更新的小提琴

$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar').toggleClass('active');
});
});
/*
DEMO STYLE
*/
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fff;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
border-bottom: 1px solid #dedede;
background-color: #fff;
position: sticky !important;
top: 0px;
}
.bg-light {
background-color: #fff !important;
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.nav-side-btn {
background-color: #282a2b;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
i,
span {
display: inline-block;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.profile-btn {
float: right;
margin: 0px 20px;
}
#sidebar {
position: sticky;
top: 1px;
height: 100vh;
}
#sidebar .nav-text {
font-weight: 500;
padding-left: 20px;
}
#sidebar .sidebar-header img {
width: 200px;
}
#sidebar .sidebar-header {
text-align: center;
}
#sidebar.active .nav-text {
display: none;
}
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #fff;
transition: all 0.3s;
border-right: 1px solid #dedede;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
display: none;
}
#sidebar.active .nav-logo {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 1.6em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar.active ul ul a {
padding: 10px !important;
}
#sidebar.active .dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
padding: 20px;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 0px solid #47748b;
}
#sidebar ul li a {
padding: 10px 20px;
font-size: 1.6em;
display: block;
}
#sidebar ul li a:hover {
color: 282a2b;
background: #e9e9e9;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #e9e9e9 !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 0px;
min-height: 100vh;
transition: all 0.3s;
}
.content-wrapper {
padding: 20px;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important;
}
.dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar.active {
margin-left: 0 !important;
}
#sidebar .sidebar-header h3,
#sidebar .CTAs {
display: none;
}
#sidebar .sidebar-header strong {
display: block;
}
#sidebar ul li a {
padding: 20px 10px;
font-size: 1.3em;
}
#sidebar ul li a span {
font-size: 0.85em;
}
#sidebar ul li a i {
margin-right: 0;
display: block;
}
#sidebar ul ul a {
padding: 10px !important;
}
#sidebar ul li a i {
font-size: 1.3em;
}
#sidebar {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
#sidebar .nav-logo {
display: none;
}
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Collapsible sidebar using Bootstrap 4</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar  -->
<nav id="sidebar">
<div class="sidebar-header">
<img class="nav-logo" src="../login/images/PrintPerry.png">
<strong>PP</strong>
</div>
<ul class="list-unstyled components">
<li>
<a href="#">
<i class="fas fa-home"></i>
<span class="nav-text">
HOME
</span>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-home"></i>
<span class="nav-text">
TEST
</span>
</a>
</li>
</ul>
</nav>
<!-- Page Content  -->
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a href="#" id="sidebarCollapse">
<i class="fas fa-align-justify fa-lg"></i>
</a>
<span>
<a href="#" class="profile-btn">
<i class="fas fa-user fa-lg"></i>
</a>
<a href="#" class="profile-btn">
<i class="fas fa-envelope fa-lg"></i>
</a>
</span>
</div>
</nav>
<div class="content-wrapper">
<h2>Collapsible Sidebar Using Bootstrap 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="line"></div>
<h3>Lorem Ipsum Dolor</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="js/sidebar.js"></script>
</body>
</html>

如果你想支持所有的浏览器，请执行引导方式。为正文提供与标题高度一样多的填充顶部，为左侧填充与侧边栏的宽度一样多。对于标题和侧边栏，请使用positin-fixed。假设如果标题的高度为 60px，请将正文的填充顶部设置为 60px。

body, html {
height: 100%;
}
.width-100px {
width: 100px;
}
.fixed-left {
left: 0;
}
body {
padding-top: 56px;
padding-left: 100px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<header class="fixed-top">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
<aside class="position-fixed fixed-left bg-danger width-100px h-100">
</aside>
<main class="container-fluid bg-primary text-white">
<div class="row">
<div class="col">
<p>
<span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nostrum fugiat delectus, ea vitae iure reprehenderit quaerat, mollitia ipsam id qui nesciunt, officiis corporis quod! Aspernatur est velit exercitationem unde fuga.</span>
<span>Explicabo incidunt sed aspernatur accusamus, mollitia repellendus aperiam minus inventore pariatur velit a necessitatibus libero eligendi molestiae magni nesciunt culpa vero exercitationem! Illum iure ratione eveniet dolore. Quo, officia earum?</span>
<span>Pariatur quo quae deserunt sunt assumenda ipsa cupiditate maiores doloremque non explicabo consequuntur mollitia, enim fuga, laudantium consequatur minima, similique libero soluta ipsam distinctio. Sunt impedit expedita iste eveniet nam.</span>
<span>Obcaecati soluta optio, reiciendis repellendus nostrum, recusandae quis placeat, provident officia vitae a. Voluptas explicabo earum, dolor et, sed excepturi perferendis nobis hic doloribus sint optio culpa tempora aspernatur ratione!</span>
<span>Officiis totam placeat dolor, accusamus eaque sequi nulla cumque magni! Quisquam earum vitae accusamus vero eligendi harum a sunt, mollitia omnis laboriosam assumenda error sed tempore excepturi animi similique architecto?</span>
<span>In amet eligendi aliquam sunt optio provident eius illum dolorum repellendus rem accusamus, quis beatae atque at quos excepturi ut facilis quibusdam incidunt magnam! Dolores et optio odio blanditiis enim!</span>
<span>Totam nisi itaque ipsam aperiam dolores distinctio, sint facere quia enim, ab neque fugiat laudantium quis quam quo libero consectetur omnis tenetur possimus tempora eligendi quos! Ut quas ex ullam!</span>
<span>Illum, minima. Repellendus debitis unde officiis tempora voluptas, modi cupiditate, blanditiis numquam quibusdam, expedita voluptatem aliquid ipsum alias. Eius, pariatur ipsa commodi in fugit doloremque atque optio laudantium soluta culpa.</span>
<span>Eveniet commodi facilis fugiat autem sunt! Necessitatibus est ipsum consequuntur quidem, quia fugit tempore consequatur ullam veniam eius excepturi consectetur itaque unde maiores vitae, error beatae ipsa ea? Neque, commodi!</span>
<span>Aperiam, officia aspernatur? Accusamus, quo. Corporis necessitatibus enim, omnis, voluptates tenetur harum optio quam repudiandae ea suscipit, commodi asperiores illum pariatur quidem nobis et. Modi quisquam dolorum earum unde laboriosam?</span>
</p>
</div>
</div>
</main>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium