bootstrap left menu code example

Example 1: right navbar bootstrap

<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="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="nav navbar-nav ml-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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>

Example 2: one side toggle in bootstrap

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

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; /* Same as the width of the sidenav */font-size: 20px; /* Increased text to enable scrolling */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";
}

Tags:

Html Example

Recent Posts