jQuery+css3三角形侧边栏导航菜单特效

来源:https://www.sucaihuo.com/js/2854.html 2017-08-28 17:57浏览(1833) 收藏

jQuery+css3三角形侧边栏导航菜单特效,点击菜单链接切换到相应图片内容 (仅适用于webkit内核浏览器)。
jQuery+css3三角形侧边栏导航菜单特效
分类:导航菜单 > 动画导航 难易:初级
查看演示 下载资源 下载积分: 20 积分

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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2