bootstrap left navbar code example
Example 1: navbar right bootstrap 4
<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="#">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>
Example 2: bootstrap header
//an example of a bootstrap nav bar which you can use as a boilerplate code
<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="#">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>
Example 3: html left menu
<! HTML, later CSS, then Javascript>
<!DOCTYPE html>
<html>
<head>
<script src="YourScript.js"></script>
<link href="YourCSSDocument.css" rel="stylesheet" type="text/css" media="screen" />
<style>
body {font-family: "Lato", sans-serif;}
.sidenav {height: 100%;width: 200px;position: fixed;z-index: 1;top: 0;left: 0;background-color: #464850;overflow-x: hidden;padding-top: 20px;}
.sidenav a {padding: 6px 8px 6px 16px;text-decoration: none;font-size: 25px;color: #818181;display: block;}
.sidenav a:hover {color: #f1f1f1;}
.main {margin-left: 200px; font-size: 20px; padding: 0px 10px;}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}}
</style>
</head>
<body>
<div class="sidenav">
<button onclick="Link1()" class="buttonActivMenu"><h3>Link 1</h3></a></button>
<button onclick="Link2()" class="buttonMenuWithUndercategory"><h3>link2</h3></a></button>
<button onclick="Link2.1()" class="buttonSecondMenu">link2.1</a></button>
<button onclick="Link2.2()" class="buttonLastSecondMenu">link2.2</a></button>
</div>
<div class="main">
Your text and images here
</div>
</body>
</html>
<! Now the CSS part:>
.buttonMenu {
background-color: #464850;
border: none;
border-bottom: 1px solid lightgrey;
color: lightgrey;
text-align: left;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.2s;
font-family:Arial;
width: 200px;
height: 50px;
}
.buttonMenu:hover {
background-color: grey;
color: black;
}
.buttonMenuWithUndercategory {
background-color: #464850;
border: none;
border-bottom: 1px dashed lightgrey;
color: lightgrey;
text-align: left;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.2s;
font-family:Arial;
width: 200px;
height: 50px;
}
.buttonMenuWithUndercategory:hover {
background-color: grey;
color: black;
}
.buttonSecondMenu {
background-color: #464850;
border: none;
border-bottom: 1px dashed lightgrey;
color: lightgrey;
text-align: right;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.2s;
font-family:Arial;
width: 200px;
height: 30px;
}
.buttonSecondMenu:hover {
background-color: grey;
color: black;
}
.buttonLastSecondMenu {
background-color: #464850;
border: none;
border-bottom: 2px solid lightgrey;
color: lightgrey;
text-align: right;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.2s;
font-family:Arial;
width: 200px;
height: 30px;
}
.buttonLastSecondMenu:hover {
background-color: grey;
color: black;
}
.buttonActivMenu {
background-color: #797c88;
border: none;
border-bottom: 1px solid lightgrey;
color: lightgrey;
text-align: left;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.2s;
font-family:Arial;
width: 200px;
height: 50px;
}
<! Now javascript:>
function Link1(){
window.location.href = "Link1";
}
function Link2(){
window.location.href = "Link2";
}
function Link2.1(){
window.location.href = "Link2.1";
}
function Link2.2(){
window.location.href = "Link2.2";
}