web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
导航菜单
Bootstrap垂直手风琴折叠菜单
分类:
导航菜单
日期:
2024-05-14
点击(3)
评论(0)
演 示
免费下载
简介
在页面中引jquery和bootstrap相关文件。 ```html
``` ##### HTML结构 该Bootstrap垂直手风琴折叠菜单的基本HTML结构如下: ```html
Section 1
菜单内容1
Section 2
菜单内容2
Section 3
菜单内容3
``` ##### CSS样式 然后通过下面的CSS代码来对该Bootstrap垂直手风琴折叠菜单进行效果美化。 ```html a:hover,a:focus{ text-decoration: none; outline: none; } #accordion .panel{ border: none; box-shadow: none; border-radius: 0; margin: 0 0 15px 10px; } #accordion .panel-heading{ padding: 0; border-radius: 30px; } #accordion .panel-title a{ display: block; padding: 12px 20px 12px 50px; background: #ebb710; font-size: 18px; font-weight: 600; color: #fff; border: 1px solid transparent; border-radius: 30px; position: relative; transition: all 0.3s ease 0s; } #accordion .panel-title a.collapsed{ background: #fff; color: #0d345d; border: 1px solid #ddd; } #accordion .panel-title a:after, #accordion .panel-title a.collapsed:after{ content: "\f107"; font-family: fontawesome; width: 55px; height: 55px; line-height: 55px; border-radius: 50%; background: #ebb710; font-size: 25px; color: #fff; text-align: center; border: 1px solid transparent; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.58); position: absolute; top: -5px; left: -20px; transition: all 0.3s ease 0s; } #accordion .panel-title a.collapsed:after{ content: "\f105"; background: #fff; color: #0d345d; border: 1px solid #ddd; box-shadow: none; } #accordion .panel-body{ padding: 20px 25px 10px 9px; background: transparent; font-size: 14px; color: #8c8c8c; line-height: 25px; border-top: none; position: relative; } #accordion .panel-body p{ padding-left: 25px; border-left: 1px dashed #8c8c8c; } ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告