NiceSnippets.com
Bootstrap 4 With Sliding Menu Example
We are giving you sliding menu example usign slinky jquery plugin with bootstap 4. this is also call jquery slider menu. this is three level vertical submenu menu demo. menu list with right side submenu arrow. when you click on arraw then this main menu submenu open.
We allows to free snippets of slinky menu , you can download full code of html sidebar menu layout. Here in this post i will give you example of vertical navigation bar css snippet and you will get simple code of html, css and jquery. In sidebar sliding menu snippet i give you three tab with html, css and js, you can easily get code of slide out menu css jquery layout.
<!doctype html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//nicesnippets.com/demo/slinky.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" href="custom.css">
<link rel="stylesheet" href="//nicesnippets.com/demo/slinky.min.css">
</head>
<body class="bg-info">
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4 col-12">
<div id="slider-menu">
<ul>
<li>
<a href="#">Sports</a>
<ul>
<li>
<a href="#">Cricket</a>
<ul>
<li>
<a href="#">Virat Kohli</a>
</li>
</ul>
</li>
<li>
<a href="#">Football</a>
<ul>
<li>
<a href="#">Cristiano Ronaldo</a>
</li>
</ul>
</li>
<li>
<a href="#">Basketball</a>
<ul>
<li>
<a href="#">LeBron James</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Music</a>
<ul>
<li>
<a href="#">Justin Bieber</a>
<ul>
<li>
<a href="#">What do you mean</a>
</li>
<li>
<a href="#">Where are you now</a>
</li>
</ul>
</li>
<li>
<a href="#">Zayn Malik</a>
<ul>
<li>
<a href="#">Let Me</a>
</li>
<li>
<a href="#">Dusk till down</a>
</li>
</ul>
</li>
<li>
<a href="#">Beyonce</a>
<ul>
<li>
<a href="#">Halo</a>
</li>
<li>
<a href="#">Crazy in love</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Writers</a>
<ul>
<li>
<a href="#">Chetan Bhagat</a>
</li>
<li>
<a href="#">Tolstoy</a>
</li>
<li>
<a href="#">Huxlay</a>
</li>
<li>
<a href="#">L. Fischer</a>
</li>
<li>
<a href="#">Walter Scot</a>
</li>
<li>
<a href="#">Shekhspear</a>
</li>
</ul>
</li>
<li>
<a href="#">Genres</a>
<ul>
<li>
<a href="#">Rock</a>
<ul>
<li>
<a href="#">Hotel California</a>
</li>
<li>
<a href="#">Pretty Maids All in a Row</a>
</li>
<li>
<a href="#">Same Old Song and Dance</a>
</li>
<li>
<a href="#">Train Kept A-Rollin'</a>
</li>
</ul>
</li>
<li>
<a href="#">Hard rock</a>
<ul>
<li>
<a href="#">Houses of the Holy</a>
</li>
<li>
<a href="#">In My Time of Dying</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Settings</a>
<ul>
<li>
<a href="#">Profile</a>
</li>
<li>
<a href="#">Player</a>
<ul>
<li>
<a href="#">Equalizer</a>
</li>
<li>
<a href="#">Volume</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
body{
margin-top: 160px;
}
#slider-menu ul{
padding: 0px;
}
#slider-menu ul li a{
text-decoration: none;
}
const slinky = $('#slider-menu').slinky();
