马自达css滑动按钮,点击按钮滑动显示侧边导航栏

Document

li {

list-style: none;

}

.side_open {

position: fixed;

top: 20%;

right: 0;

width: 218px;

height: 574px;

background-color: #ebeff3;

}

.side_btn {

position: absolute;

top: 20px;

left: -30px;

width: 30px;

height: 140px;

background-color: green;

}

.side_btn li {

width: 30px;

height: 140px;

position: absolute;

top: 0;

left: 0;

background-color: #04a9f5;

text-align: center;

color: white;

display: none;

}

.side_btn li:first-child {

display: block;

}

• 展开 >
• 收起 <

$(document).ready(function() {

var isHiden = true; /*控制切换菜单*/

$('#side_btn').click(function() {

if (isHiden) {

$('#side_open').animate({

right: '-=217px'

}); //菜单块向右移动

} else {

$('#side_open').animate({

right: '+=217px'

}); //菜单块向左移动

}

isHiden = !isHiden;

});

// isHiden只是返回部件的隐藏属性，并不能表示部件当前的真实状态。比如A部件有个子部件B，而A处于隐藏状态，子部件B必然也不可见，但子部件B本身的isHiden还是为false。

// 信号量

var index = 0;

// 更改按钮文字の点击事件

$('#side_btn').click(function() {

//防流氓点击

if ($('#side_btn ul li').is(":animated")) {

return;

}

// 老文字淡出

$('#side_btn ul li').eq(index).fadeOut(0, function() {

// 信号量

index--;

if (index < 0) {

index = 1;

}

// 新文字淡入

$('#side_btn ul li').eq(index).fadeIn(0);

});

});

});