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

jQuery和css3顶部固定导航菜单特效插件

发布时间:2018/07/02 来源:互联网 浏览: 关键词:jquery CSS3 菜单导航 
jQuery和css3顶部固定导航菜单特效插件 jQuery和css3顶部固定导航菜单特效插件
阿里云

简要教程

这是一款非常实用的jQuery和css3顶部固定导航菜单特效插件。我们曾经在很多网站上都看到过这种顶部固定导航菜单特效。 Disqus For Websites 的导航菜单就是一个很好的例子。

HTML结构

使用一个section来包含住头部的图像、标题和按钮,固定导航菜单使用一个div .cd-secondary-nav包住一个无序列表:

<sectionid="cd-intro">
  <divid="cd-intro-tagline">
    <h1><!-- your tagline here --></h1>
    <ahref="#0"class="cd-btn"><!-- your action button text here --></a>
  </div>
</section>
  
<divclass="cd-secondary-nav">
  <ahref="#0"class="cd-secondary-nav-trigger">Menu<span></span></a><!-- button visible on small devices -->
  <nav>
    <ul>
      <li>
        <ahref="#cd-placeholder-1">
          <b>Services</b>
          <span></span><!-- icon -->
        </a>
      </li>
      <!-- other items here -->
    </ul>
  </nav>
</div><!-- .cd-secondary-nav -->
<mainclass="cd-main-content">
  <sectionid="cd-placeholder-1"class="cd-section cd-container">
    <!-- your section content here-->
  </section><!-- #cd-placeholder-1 -->
  
  <sectionid="cd-placeholder-2"class="cd-section cd-container">
    <!-- your section content here-->
  </section><!-- #cd-placeholder-2 -->
  
  <!-- other sections here -->
</main><!-- .cd-main-content -->

CSS样式

这款插件是移动设备优先的,我们为无序列表设置 position: fixed ,并将它放到屏幕的右下方(此时它看起来像一个图标)。当用户点击.cd-secondary-nav-trigger按钮,我们给无序列表添加上 .is-visible 类,并将CSS3 Scale的值从0变为1,使列表展开。

当屏幕大于1170像素的时候,我们将.cd-secondary-nav-trigger按钮隐藏。并将无序列表的定位设置为static。

.cd-secondary-nav ul {
  position:fixed;
  right:5%;
  bottom:20px;
  visibility:hidden;
  transform:scale(0);
  transform-origin:100%100%;
  transition: transform0.3s, visibility0s0.3s;
}
.cd-secondary-nav ul.is-visible{
  visibility:visible;
  transform:scale(1);
  transition: transform0.3s, visibility0s0s;
}
@media onlyscreenand (min-width:1170px) {
  .cd-secondary-nav ul {
    /* reset navigation values */
    position:static;
    width:auto;
    max-width:100%;
    visibility:visible;
    transform:scale(1);
  }
}
.cd-secondary-nav-trigger {
  position:fixed;
  bottom:20px;
  right:5%;
  width:44px;
  height:44px;
}
@media onlyscreenand (min-width:1170px) {
  .cd-secondary-nav-trigger {
    display:none;
  }
}

当用户滚动鼠标到“intro”部分时,我们为导航菜单设置 .is-fixed 类。将它的定位从relative 改变为fixed并修改他的高度。然后为它的子节点添加.animate-children,来使它的各个子节点产生动画。这里不能使用一个class来制作动画,因为在Firefox中有一个BUG-CSS transition animation fails when parent element changes position attribute。

@media onlyscreenand (min-width:1170px) {
  .cd-secondary-nav.is-fixed{
    position:fixed;
    left:0;
    top:0;
    height:70px;
    width:100%;
  }
  .cd-secondary-nav li a {
    padding:58px40px040px;
    transition: padding0.2s;
  }
  .cd-secondary-nav li a span {
    transition: opacity0.2s;
  }
  .cd-secondary-nav.animate-children li a {
    padding:26px30px030px;
  }
  .cd-secondary-nav.animate-children li a span {
    opacity:0;
  }
}

当导航菜单处于“固定”状态时,我们希望Logo和下载按钮显示出来。所以我们定义了两个class: .is-hidden 和 .slide-in 。

@media onlyscreenand (min-width:1170px) {
  #cd-logo.is-hidden{
    /* assign a position fixed and move outside the viewport (on the left) */
    opacity:0;
    position:fixed;
    left:-20%;
    transition:left0.3s, opacity0.3s;
  }
  #cd-logo.is-hidden.slide-in {
    /* slide in when the secondary navigation gets fixed */
    left:5%;
    opacity:1;
  }
  
  .cd-btn.is-hidden{
    /* assign a position fixed and move outside the viewport (on the right) */
    opacity:0;
    position:fixed;
    right:-20%;
    transition:right0.3s, opacity0.3s;
  }
  .cd-btn.is-hidden.slide-in {
    /* slide in when the secondary nav gets fixed */
    right:5%;
    opacity:1;
  }
}

JAVASCRIPT

当用户滚动页面超过导航条位置,我们为导航条添加.is-fixed并改变它的position的值。我们为 .animate-children添加50ms的延时来使它的子节点产生动画。因为它们的动画不是同时发生的,因此,位置值的改变不会影响过渡效果。

varsecondaryNav = $('.cd-secondary-nav'),
  secondaryNavTopPosition = secondaryNav.offset().top;
  
$(window).on('scroll',function(){
   
  if($(window).scrollTop() > secondaryNavTopPosition ) {
    secondaryNav.addClass('is-fixed'); 
    setTimeout(function() {
            secondaryNav.addClass('animate-children');
            $('#cd-logo').addClass('slide-in');
      $('.cd-btn').addClass('slide-in');
        }, 50);
  }else{
    secondaryNav.removeClass('is-fixed');
    setTimeout(function() {
            secondaryNav.removeClass('animate-children');
            $('#cd-logo').removeClass('slide-in');
      $('.cd-btn').removeClass('slide-in');
        }, 50);
  }
});

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