使用 CSS 如何实现竖式卷帘门导航栏？请查看下面的示例代码。

发布时间：2023-09-13 11:46:29 所属栏目：语言来源：

导读：在实际应用中，我们有时候会遇到“用CSS怎样写垂直手风琴菜单，代码是什么”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“用CSS怎样写垂直手风琴菜单，代码是什么”文

在实际应用中，我们有时候会遇到“用CSS怎样写垂直手风琴菜单，代码是什么”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“用CSS怎样写垂直手风琴菜单，代码是什么”文章能帮助大家解决问题。

实现代码如下：

XML/HTML Code
ul id="accordion" class="accordion">
li>
div class="link">i class="fa fa-paint-brush">i>Diseño webi class="fa fa-chevron-down">i>div>
ul class="submenu">
li>a href="#">Photoshopa>li>
li>a href="#">HTMLa>li>
li>a href="#">CSSa>li>
li>a href="#">Maquetacion weba>li>
ul>
li>
li>
div class="link">i class="fa fa-code">i>Desarrollo front-endi class="fa fa-chevron-down">i>div>
ul class="submenu">
li>a href="#">Javascripta>li>
li>a href="#">jQuerya>li>
li>a href="#">Frameworks javascripta>li>
ul>
li>
li>
div class="link">i class="fa fa-mobile">i>Diseño responsivei class="fa fa-chevron-down">i>div>
ul class="submenu">
li>a href="#">Tabletsa>li>
li>a href="#">Dispositivos mobilesa>li>
li>a href="#">Medios de escritorioa>li>
li>a href="#">Otros dispositivosa>li>
ul>
li>
li>div class="link">i class="fa fa-globe">i>Posicionamiento webi class="fa fa-chevron-down">i>div>
ul class="submenu">
li>a href="#">Googlea>li>
li>a href="#">Binga>li>
li>a href="#">Yahooa>li>
li>a href="#">Otros buscadoresa>li>
ul>
li>
ul>
CSS代码：

CSS Code
.accordion {
width: 100%;
max-width: 360px;
margin: 30px auto 20px;
background: #FFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.accordion .link {
cursor: pointer;
display: block;
padding: 15px 15px 15px 42px;
color: #4D4D4D;
font-size: 14px;
font-weight: 700;
border-bottom: 1px solid #CCC;
position: relative;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}

.accordion li:last-child .link {
border-bottom: 0;
}

.accordion li i {
position: absolute;
top: 16px;
left: 12px;
font-size: 18px;
color: #595959;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}

.accordion li i.fa-chevron-down {
rightright: 12px;
left: auto;
font-size: 16px;
}

.accordion li.open .link {
color: #b63b4d;
}

.accordion li.open i {
color: #b63b4d;
}
.accordion li.open i.fa-chevron-down {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}

/**
* Submenu
-----------------------------*/
.submenu {
display: none;
background: #444359;
font-size: 14px;
}

.submenu li {
border-bottom: 1px solid #4b4a5e;
}

.submenu a {
display: block;
text-decoration: none;
color: #d9d9d9;
padding: 12px;
padding-left: 42px;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}

.submenu a:hover {
background: #b63b4d;
color: #FFF;
}
jQuery代码：

JavaScript Code
$(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;

// Variables privadas
var links = this.el.find('.link');
// Evento
links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
}

Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();

$next.slideToggle();
$this.parent().toggleClass('open');

if (!e.data.multiple) {
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
};
}

var accordion = new Accordion($('#accordion'), false);
});

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!