Bootstrap accordion menu plugin

Bootstrap accordion menu plug-in introduction

This is a bootstrap accordion menu beautification effect. Based on the original bootstrap accordion, the bootstrap accordion menu is beautified by simple CSS code to generate a more beautiful bootstrap accordion menu effect.

How to use Bootstrap accordion menu plug-in

  • jquery and bootstrap related files and font awesome font icon files are introduced into the page.
<link href="path/to/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/font-awesome.min.css" rel="stylesheet">
<script src="path/to/js/bootstrap.min.js"></script>
<script src="path/to/js/bootstrap.min.js"></script> 
  • HTML structure: the basic HTML structure of the bootstrap accordion menu is as follows.
<div class="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Section 1
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                            <p>Accordion content 1</p>
                        </div>
                    </div>
                </div>
 
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingTwo">
                        <h4 class="panel-title">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                Section 2
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <div class="panel-body">
                            <p>Accordion content 2</p>
                        </div>
                    </div>
                </div>
 
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree">
                        <h4 class="panel-title">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                Section 3
                            </a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                        <div class="panel-body">
                            <p>Accordion content 3 </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>            
  • CSS Style: add the following CSS style to the bootstrap accordion menu to beautify it
a:hover,a:focus{
    text-decoration: none;
    outline: none;
}
#accordion .panel{
    border: none;
    box-shadow: none;
    border-radius: 10px;
    margin-bottom: 10px;
}
#accordion .panel-heading{
    padding: 0;
    border: none;
    border-radius: 10px;
}
#accordion .panel-title a{
    display: block;
    padding: 20px 35px;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    background: #888bc2;
    border: none;
    position: relative;
    transition: all 0.3s ease 0s;
}
#accordion .panel-title a:after,
#accordion .panel-title a.collapsed:after{
    content: "\f068";
    font-family: fontawesome;
    width: 40px;
    height: 40px;
    line-height: 32px;
    border-radius: 50%;
    background: #888bc2;
    text-align: center;
    font-size: 15px;
    color:#fff;
    border: 5px solid #fff;
    position: absolute;
    top: 10px;
    left: -20px;
    transition: all 0.3s ease 0s;
}
#accordion .panel-title a.collapsed:after{
    content: "\f067";
}
#accordion .panel-title a:hover:after,
#accordion .panel-title a.collapsed:hover:after{
    transform: rotate(360deg);
}
#accordion .panel-body{
    padding: 15px 25px;
    background: #fff;
    font-size: 14px;
    color: #8c8c8c;
    line-height: 25px;
    border-top: none;
    position: relative;
} 

Bootstrap accordion menu plug-in use case

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>bootstrap Accordion Menus |DEMO_jQuery Home-Free sharing jQuery,html5,css3 Plugin Library</title>
	<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<style type="text/css">
		.demo{padding: 2em 0;}
		a:hover,a:focus{
		    text-decoration: none;
		    outline: none;
		}
		#accordion .panel{
		    border: none;
		    box-shadow: none;
		    border-radius: 10px;
		    margin-bottom: 10px;
		}
		#accordion .panel-heading{
		    padding: 0;
		    border: none;
		    border-radius: 10px;
		}
		#accordion .panel-title a{
		    display: block;
		    padding: 20px 35px;
		    font-size: 20px;
		    font-weight: 600;
		    color: #fff;
		    background: #888bc2;
		    border: none;
		    position: relative;
		    transition: all 0.3s ease 0s;
		}
		#accordion .panel-title a:after,
		#accordion .panel-title a.collapsed:after{
		    content: "\f068";
		    font-family: fontawesome;
		    width: 40px;
		    height: 40px;
		    line-height: 32px;
		    border-radius: 50%;
		    background: #888bc2;
		    text-align: center;
		    font-size: 15px;
		    color:#fff;
		    border: 5px solid #fff;
		    position: absolute;
		    top: 10px;
		    left: -20px;
		    transition: all 0.3s ease 0s;
		}
		#accordion .panel-title a.collapsed:after{
		    content: "\f067";
		}
		#accordion .panel-title a:hover:after,
		#accordion .panel-title a.collapsed:hover:after{
		    transform: rotate(360deg);
		}
		#accordion .panel-body{
		    padding: 15px 25px;
		    background: #fff;
		    font-size: 14px;
		    color: #8c8c8c;
		    line-height: 25px;
		    border-top: none;
		    position: relative;
		}
	</style>
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>bootstrap Accordion Menus  <span>Bootstrap Accordion Style</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://Www.htmleaf.com/ "title =" jQuery's home "target =" U blank "> < span > jQuery's home < / span ></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://Www.htmleaf.com/jquery/accordion/201709224753.html "title =" return to download page "target =" U blank "> < span > return to download page < / span ></a>
			</div>
		</header>
		<div class="demo">
		        <div class="container">
		            <div class="row">
		                <div class="col-md-offset-3 col-md-6">
		                    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
		                        <div class="panel panel-default">
		                            <div class="panel-heading" role="tab" id="headingOne">
		                                <h4 class="panel-title">
		                                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
		                                        Section 1
		                                    </a>
		                                </h4>
		                            </div>
		                            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
		                                <div class="panel-body">
		                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
		                                </div>
		                            </div>
		                        </div>

		                        <div class="panel panel-default">
		                            <div class="panel-heading" role="tab" id="headingTwo">
		                                <h4 class="panel-title">
		                                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
		                                        Section 2
		                                    </a>
		                                </h4>
		                            </div>
		                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
		                                <div class="panel-body">
		                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
		                                </div>
		                            </div>
		                        </div>

		                        <div class="panel panel-default">
		                            <div class="panel-heading" role="tab" id="headingThree">
		                                <h4 class="panel-title">
		                                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
		                                        Section 3
		                                    </a>
		                                </h4>
		                            </div>
		                            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
		                                <div class="panel-body">
		                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nisl lorem, dictum id pellentesque at, vestibulum ut arcu. Curabitur erat libero, egestas eu tincidunt ac, rutrum ac justo. Vivamus condimentum laoreet lectus, blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
		                                </div>
		                            </div>
		                        </div>
		                    </div>
		                </div>
		            </div>
		        </div>
		    </div>
	</div>
	
	<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

The effect is as follows:

Bootstrap accordion menu plug-in related resources offline Download

Address: Bootstrap accordion menu plug-in related resources download Pick up code: 4tdj

Tags: JQuery IE html5 css3

Posted on Sun, 01 Dec 2019 03:14:11 -0800 by hightechredneck