您的位置: 首页  >  文章  >  Bootstrap手风琴菜单插件

Bootstrap手风琴菜单插件

分类: 文章 • 2024-07-12 21:45:40

Bootstrap手风琴菜单插件介绍

这是一款bootstrap手风琴菜单美化效果。该bootstrap手风琴菜单在原生bootstrap accordion的基础上，通过简单的CSS代码来进行美化，生成更加漂亮的bootstrap手风琴菜单效果。

Bootstrap手风琴菜单插件使用方法

  • 在页面中引入jquery和bootstrap相关文件，以及font-awesome字体图标文件。
<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结构:该bootstrap手风琴菜单的基本HTML结构如下。
<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>手风琴内容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>手风琴内容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>手风琴内容3 </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
  • CSS样式：为该bootstrap手风琴菜单添加下面的CSS样式，来对其进行美化
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手风琴菜单插件使用案例

<!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手风琴菜单|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</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手风琴菜单 <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之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Accordion/201709224753.html" title="返回下载页" target="_blank"><span> 返回下载页</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>

效果如下：
Bootstrap手风琴菜单插件

Bootstrap手风琴菜单插件相关资源离线下载

地址：Bootstrap手风琴菜单插件相关资源下载 提货码：4tdj

相关推荐