Side Bar For Admin Panel

on
Beautiful Attractive Side Bar for Admin Panels and Web Pages Using BOOTSTRAP 4 and jQuery3.3.1



HTML CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Side Bar</title>
<link rel="stylesheet" href="css/Glyphicon.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/sidebar.css">
    <link  rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/mystyle.js"></script>
     <script src="js/wow.min.js"></script>
              <script>
              new WOW().init();
              </script>         
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="sidebar-content table-wrapper-scroll-y myOwnScrollbar">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column "  data-toggle="collapse" data-target="#depId">Department
<span class="glyphicon glyphicon-menu-down pull-right"></span></a>
<div class="collapse list-group" id="depId">
<a href="#" class="list-group-item ">Add Department</a>
</div>
<a href="#" class="list-group-item list-group-item-action flex-column" data-toggle="collapse" data-target="#Course">Courses
<span class="glyphicon glyphicon-menu-down pull-right"></span></a>
<div class="collapse list-group" id="Course">
<a href="#" class="list-group-item ">Asp .NET Core MVC</a>
<a href="#" class="list-group-item ">PHP Laravel</a>
<a href="#" class="list-group-item ">Java Spring</a>
<a href="#" class="list-group-item ">Android App</a>
<a href="#" class="list-group-item ">Front End Developer</a>
<a href="#" class="list-group-item ">Graphics & Web Designing</a>
</div>
<a href="#" class="list-group-item list-group-item-action flex-column" data-toggle="collapse" data-target="#branches">Branches
<span class="glyphicon glyphicon-menu-down pull-right"></span></a>
<div class="collapse list-group" id="branches">
<a href="#" class="list-group-item ">Lahore</a>
<a href="#" class="list-group-item ">Rawalpindi</a>
</div>
<a href="#" class="list-group-item list-group-item-action flex-column" data-toggle="collapse" data-target="#Setting">Setting
 <span class="glyphicon glyphicon-menu-down pull-right"></span></a>
<div class="collapse list-group" id="Setting">
<a href="#" class="list-group-item ">Project Name</a>
<a href="#" class="list-group-item ">Edit Admin Profile</a>
<a href="#" class="list-group-item ">Users Profile</a>
<a href="#" class="list-group-item ">Change Title</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.slim.min.js" ></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js" ></script>
</body>
</html>

  CSS CODE:(file name:sidebar.css)
body
{
padding: 0;
margin: 0;
}
.sidebar-content
{
height: 100%;
background-color: #e0dada;
}
.list-group-item
{
position: relative;
z-index: 1;
}
.list-group-item:before
{
position: absolute;
content:'';
width: 2px;
height: 100%;
left: 0px;
top: 0px;
bottom: 0px;
right: 250px;
background-color: #04acb5;
z-index: -1;
transition: 0.6s;

}
.list-group-item:after
{
position: absolute;
content:'';
left: 0px;
top: 12px;
bottom: 0px;
right: 250px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
    border-left:10px solid black;
    transition: 0.2s;
    visibility: hidden ;
}
.list-group-item:hover:before
{
width: 100%;
transition: 0.6s;
}
.list-group-item:hover:after
{
visibility: visible;
}
.list-group-item:hover
{
color:black!important;
}
.table-wrapper-scroll-y
{
display: block;
}
.myOwnScrollbar
{
position: relative;
height: auto;
overflow: auto;
}

Comments

Post a Comment