Accordion Menu With Icon

Developer
Kanha Sahu
Size
2,799 Kb
Views
56,672
  1. Accordion Menu With Icon Previews
  2. Accordion Menu With Icon HTML Codes
  3. Accordion Menu With Icon CSS Codes

How do I make an accordion menu with icon?

Accordion Menu With Icon : Accordion, Accordion Menu, Collapsing, Collapsable, bootstrap. What is a accordion menu with icon? How do you make a accordion menu with icon? This script and codes were developed by Kanha Sahu on 27 August 2022, Saturday.

Accordion Menu With Icon Previews
IQ Test

Accordion Menu With Icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Accordion Menu With Icon</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="row"> <div class="col-sm-3 col-md-3"> <div class="panel-group accordion-menu glyphicon-icon-rpad" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close m5"></span> Content <span class="accordion-menu-collapsible-icon glyphicon glyphicon-chevron-down"></span> </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <ul class=""> <li><a href="#"><span class="glyphicon glyphicon-pencil"></span>Articles</a></li> <li><a href="#"><span class="glyphicon glyphicon-flash"></span>News</a></li> <li><a href="#"><span class="glyphicon glyphicon-file"></span>Newsletters</a></li> <li><a href="#"><span class="glyphicon glyphicon-comment"></span>Comments <span class="badge">42</span></a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title glyphicon-icon-rpad"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th m5"></span>Modules</a> <span class="accordion-menu-collapsible-icon glyphicon glyphicon-chevron-down"></span> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <ul class="kas-icon-aero"> <li><a href="#">Orders <span class="pull-right label label-success">$ 320</span></a></li> <li><a href="#">Invoices</a></li> <li><a href="#">Shipments</a></li> <li><a href="#">Tex</a> </li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title glyphicon-icon-rpad"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-user m5"></span>Account</a> <span class="accordion-menu-collapsible-icon glyphicon glyphicon-chevron-down"></span> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <ul class="bullets"> <li><a href="#">Change Password</a></li> <li><a href="#">Notifications <span class="label label-info">5</span></a></li> <li><a href="#">Import/Export</a></li> <li><a href="#">Delete Account</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title glyphicon-icon-rpad"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file m5"></span>Reports</a> <span class="accordion-menu-collapsible-icon glyphicon glyphicon-chevron-down"></span> </h4> </div> <div id="collapseFour" class="panel-collapse collapse"> <div class="panel-body"> <ul class="numerics"> <li><a href="#">Sales</a></li> <li><a href="#">Customers</a></li> <li><a href="#">Products</a></li> <li><a href="#">Shopping Cart</a></li> </ul> </div> </div> </div> </div> </div> <div class="col-sm-9 col-md-9"> <div class="well"> <h1> Accordion Menu With Icon</h1> Admin Dashboard Accordion Menu </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>

Accordion Menu With Icon - Script Codes CSS Codes

body{margin-top:50px;}
.accordion-menu .panel-body{padding:0px; margin:0px;}
.accordion-menu .panel-heading{background-color:#FFFFFF;}
.accordion-menu .panel-heading:hover{ background:#f5f5f5;
}
.accordion-menu .panel{	-webkit-border-radius: 3px;	-moz-border-radius: 3px;	border-radius: 3px; box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05);}
.glyphicon-icon-rpad .glyphicon,.glyphicon-icon-rpad .glyphicon.m8,.fa-icon-rpad .fa,.fa-icon-rpad .fa.m8{ padding-right:8px; }
.glyphicon-icon-lpad .glyphicon,.glyphicon-icon-lpad .glyphicon.m8,.fa-icon-lpad .fa,.fa-icon-lpad .fa.m8{ padding-left:8px; }
.glyphicon-icon-rpad .glyphicon.m5,.fa-icon-rpad .fa.m5{ padding-right:5px; }
.glyphicon-icon-lpad .glyphicon.m5,.fa-icon-lpad .fa.m5{ padding-left:5px; }
.glyphicon-icon-rpad .glyphicon.m12,.fa-icon-rpad .fa.m12{ padding-right:12px; }
.glyphicon-icon-lpad .glyphicon.m12,.fa-icon-lpad .fa.m12{ padding-left:12px; }
.glyphicon-icon-rpad .glyphicon.m15,.fa-icon-rpad .fa.m15{ padding-right:15px; }
.glyphicon-icon-lpad .glyphicon.m15,.fa-icon-lpad .fa.m15{ padding-left:15px; }
.accordion-menu h4{position:relative;}
.accordion-menu h4 .accordion-menu-collapsible-icon{position:absolute; right:0px; top:5px; font-size:9px; }
.accordion-menu h4 a{display:block; color:#666666;}
.accordion-menu h4 a.active,.accordion-menu h4 .active, .active{text-decoration:none;}
.accordion-menu h4 a:hover,
.accordion-menu h4 a:focus{text-decoration:none; color:#222222;}
.accordion-menu h4 .accordion-menu-title-icon
{ float:right; margin:0;
}
.accordion-menu ul{list-style:none; padding:0px; margin:0px;}
.accordion-menu ul li .badge,.accordion-menu ul li span.badge,.accordion-menu ul li label.badge{float:right}
.accordion-menu ul li:first-child a{}
.accordion-menu ul li:last-child a{border:0px solid #f9f9f9;}
.accordion-menu ul li a{display:block; line-height:22px; padding:5px 15px; margin:0px; border-bottom:1px solid #e8e8e8;}
.accordion-menu ul li a:hover{color:#232323;text-decoration:none;}
.accordion-menu ul.bullets{list-style:inside disc}
.accordion-menu ul.numerics{list-style:inside decimal}
.accordion-menu ul.kas-icon{}
.accordion-menu ul.kas-icon-aero li a:before{font-family: 'Glyphicons Halflings'; font-size:9px; content: "\e258"; padding-right:8px; }
Accordion Menu With Icon - Script Codes
Accordion Menu With Icon - Script Codes
Home Page Home
Developer Kanha Sahu
Username kaslab
Uploaded August 27, 2022
Rating 3
Size 2,799 Kb
Views 56,672
Do you need developer help for Accordion Menu With Icon?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kanha Sahu (kaslab) Script Codes
Name
Responsive jquery Menu
Jquery Models for login, signin, forgot password
Bootstrap Tree Menu Example
Responsive Jquery Navigation
Material design tab style
CSS3 checkbox with html properties, font awesome
Stylish Login Panel using SCSS
3d css cube animation
Button jquery onclick change text and effect
Bootstrap Glyphicon Inside Input Box
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!