当前位置:主页 > 网页特效 > 菜单导航 >

jQuery和css3固定右下角的最小化导航菜单插件

发布时间:2018/07/03 来源:互联网 浏览: 关键词:jquery CSS3 菜单导航 
jQuery和css3固定右下角的最小化导航菜单插件 jQuery和css3固定右下角的最小化导航菜单插件
阿里云

简要教程

一个位置固定的导航,可以使用户在浏览你的网站时可以随时查看你的导航菜单。它比全屏宽度的固定菜单占有的地方要小,并且是替换“返回顶部”按钮的一个非常好的用户体验解决方案。

很多时候我们需要一个能够快速返回页面顶部的方法,通常是使用“返回顶部”按钮。但是,想一想用户为什么要返回页面顶部?如果我们在原来“返回顶部”按钮的地方放置一个最小化的导航菜单效果如何呢?

HTML结构

html结构非常简单:导航菜单和触发按钮都被放置到#cd-nav的div中。在.cd-nav-trigger中的<span>是用来创建触发按钮图标的。

<header><!-- ... --></header>
<divid="cd-nav">
  <ahref="#0"class="cd-nav-trigger">Menu<span></span></a>
  
  <navid="cd-main-nav">
    <ul>
      <li><ahref="#0">Homepage</a></li>
      <li><ahref="#0">Services</a></li>
      <li><ahref="#0">Portfolio</a></li>
      <li><ahref="#0">Pricing</a></li>
      <li><ahref="#0">Contact</a></li>
    </ul>
  </nav>
</div>
<main><!-- content here --></main>

CSS样式

由于我们是从移动设备的角度去编写样式的,我们设置#cd-nav中的无序列表为position: fixed 。我们希望这个按钮位于手机的右下方,这样便于用户使用一只手来操作。当用户点解了.cd-nav-trigger,我们给无序列表添加 class .is-visible,用来改变 CSS3 Scale 的值使其从0变到1,并通过 CSS3 transition 来使动画更加平滑。

#cd-nav ul {
  /* mobile first */
  position:fixed;
  width:90%;
  max-width:400px;
  right:5%;
  bottom:20px;
  visibility:hidden;
  overflow:hidden;
  z-index:1;
  transform:scale(0);
  transform-origin:100%100%;
  transition: transform0.3s, visibility0s0.3s;
}
#cd-nav ul.is-visible{
  visibility:visible;
  transform:scale(1);
  transition: transform0.3s, visibility0s0s;
}
.cd-nav-trigger {
  position:fixed;
  bottom:20px;
  right:5%;
  width:44px;
  height:44px;
  /* image replacement */
  overflow:hidden;
  text-indent:100%;
  white-space:nowrap;
  z-index:2;
}

当屏幕尺寸大于1170像素,我们将导航菜单的位置从Fixed改变为Absolute ,并将它移动到页面顶部。当用户向下滚动鼠标时,我们使用jQuery为#cd-nav添加class .is-fixed。这样可以移动整个导航菜单到屏幕的右下方-效果就像在移动设备上一样。

@media onlyscreenand (min-width:1170px) {
  #cd-nav ul {
    /* the navigation moves to the top */
    position:absolute;
    width:auto;
    max-width:none;
    bottom:auto;
    top:36px;
    visibility:visible;
    transform:scale(1);
    transition:all0s;
  }
  
  #cd-nav.is-fixedul {
    position:fixed;
    width:90%;
    max-width:400px;
    bottom:20px;
    top:auto;
    visibility:hidden;
    transform:scale(0);
  }
}

JAVASCRIPT

我们定义一个偏移变量用于在#cd-nav上切换.is-fixed class。

// browser window scroll (in pixels) after which the "menu" link is shown
varoffset = 300;

checkMenu()方法关注于屏幕滚动时菜单的行为:

varnavigationContainer = $('#cd-nav'),
  mainNavigation = navigationContainer.find('#cd-main-nav ul');
   
$(window).scroll(function(){
  checkMenu();
});
  
functioncheckMenu() {
  
  if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
    //add .is-fixed class to #cd-nav
    //wait for the animation to end 
    //add the .has-transitions class to main navigation (used to bring back transitions)
  }elseif($(window).scrollTop() <= offset) {
     
    //check if the menu is open when scrolling up - for browser that supports transition
    if( mainNavigation.hasClass('is-visible')  && !$('html').hasClass('no-csstransitions') ) {
      //close the menu
      //wait for the transition to end
      //remove the .is-fixed class from the #cd-nav and the .has-transitions class from main navigation
    }
  
    //check if the menu is open when scrolling up - fallback if transitions are not supported
    elseif( mainNavigation.hasClass('is-visible')  && $('html').hasClass('no-csstransitions') ) {
      //no need to wait for the end of transition - close the menu and remove the .is-fixed class from the #cd-nav
    }
  
    //scrolling up with menu closed
    else{
      //remove the .is-fixed class from the #cd-nav and the .has-transitions class from main navigation
    }
  }
}

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top