jQuery+css3三角形侧边栏导航菜单特效,点击菜单链接切换到相应图片内容 (仅适用于webkit内核浏览器)。
js代码
<script type="text/javascript">
$(document).ready(function() {
var animating = false;
function menuToggle() {
$(".demo__page, .demo__menu, .demo__light").toggleClass("menu-active");
$(".js-menuBtn").toggleClass("m--btn");
$(document).off("click", ".demo__content", closeNotFocusedMenu);
};
function closeNotFocusedMenu(e) {
if (!$(e.target).closest(".demo__menu").length) {
menuToggle();
$(document).off("click", ".demo__content", closeNotFocusedMenu);
}
};
$(document).on("click", ".js-menuBtn", function() {
if (animating) return;
menuToggle();
$(document).on("click", ".demo__content", closeNotFocusedMenu);
});
$(document).on("click", ".demo__menu-item:not(.js-menuBtn)", function() {
animating = true;
var $this = $(this);
var page = +$this.data("page");
$(".js-menuBtn").removeClass("js-menuBtn");
$(".demo__page.active").removeClass("active");
$this.addClass("js-menuBtn m--btn");
$(".demo__page-" + page).addClass("active");
$(".demo__page, .demo__menu, .demo__light").removeClass("menu-active");
$(document).off("click", ".demo__content", closeNotFocusedMenu);
setTimeout(function() {
$(".demo__menu")[0].className = $(".demo__menu")[0].className.replace(/\bpage-active-.*\b/gi, "");
$(".demo__menu").addClass("page-active-" + page);
animating = false;
}, 1000);
});
});
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791