html5导航菜单置顶,jQuery和css3顶部固定导航菜单特效插件
这是一款非常实用的jQuery和css3顶部固定导航菜单特效插件。我们曾经在很多网站上都看到过这种顶部固定导航菜单特效。Disqus For Websites的导航菜单就是一个很好的例子。
HTML结构
使用一个section来包含住头部的图像、标题和按钮,固定导航菜单使用一个div.cd-secondary-nav包住一个无序列表:
Menu
Services
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: transform 0.3s, visibility 0s 0.3s;
}
.cd-secondary-nav ul.is-visible {
visibility: visible;
transform: scale(1);
transition: transform 0.3s, visibility 0s 0s;
}
@media only screen and (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 only screen and (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 only screen and (min-width: 1170px) {
.cd-secondary-nav.is-fixed {
position: fixed;
left: 0;
top: 0;
height: 70px;
width: 100%;
}
.cd-secondary-nav li a {
padding: 58px 40px 0 40px;
transition: padding 0.2s;
}
.cd-secondary-nav li a span {
transition: opacity 0.2s;
}
.cd-secondary-nav.animate-children li a {
padding: 26px 30px 0 30px;
}
.cd-secondary-nav.animate-children li a span {
opacity: 0;
}
}
当导航菜单处于“固定”状态时,我们希望Logo和下载按钮显示出来。所以我们定义了两个class:.is-hidden和.slide-in。
@media only screen and (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: left 0.3s, opacity 0.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: right 0.3s, opacity 0.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的延时来使它的子节点产生动画。因为它们的动画不是同时发生的,因此,位置值的改变不会影响过渡效果。
var secondaryNav = $('.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);
}
});
html5导航菜单置顶,jQuery和css3顶部固定导航菜单特效插件相关推荐
- HTML鼠标悬停图片置顶,jquery实现鼠标悬浮停止轮播特效
本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: 一.主体程序 轮播图①(手动点击轮播) 1 2 3 4 二.CSS样式 * ...
- html导航条置顶,jquery导航菜单栏固定悬浮顶部实现效果
今天做了个固定定位的效果.比如对导航需要进行固定定位效果:当没有滚动到导航下面,导航正常显示.当滚动到导航下面,导航就固定到顶部. 一.css部分: fixed 生成绝对定位的元素,相对于浏览器窗口进 ...
- 随着滚动条下拉,导航栏置顶
随着滚动条下拉,导航栏置顶 想做一个这样的效果,当我们下拉滚动条时,写的导航栏置顶. 这是效果图 先学习用到的基本知识 jQuery CSS 操作 - scrollTop() 方法 scrollTop ...
- html5磨砂透明首页制作,如何制作磨砂效果的顶部固定导航菜单
使用过iOS 7的朋友会看到上面有一种非常酷的顶部固定导航菜单效果-磨砂效果.顶部导航菜单是半透明的模糊效果,当往下滚动页面的时候,顶部导航菜单遮住页面的内容,因为它是半透明的,它下面的内容淡淡的显示 ...
- CSS3通用顶部固定导航栏代码
下载地址CSS3通用顶部固定导航栏代码是一款漂亮的下拉菜单. dd:
- html5导航栏悬浮置顶,(微信小程序)导航栏悬浮吸顶以及置顶的设置
前言 最近在做小程序的项目,遇到一些问题放在这里,一来作为自己经验收集册,收集自己的项目遇到的问题或者做的东西:二来将自己遇到的问题经验分享出来 前景提要 吸顶功能页面设置在静态的首页,作为一个首页展 ...
- html 浮动窗口置顶,jQuery简单实现页面元素置顶时悬浮效果示例
本文实例讲述了jQuery简单实现页面元素置顶时悬浮效果的方法.分享给大家供大家参考,具体如下: 一.JS Code: $.fn.smartFloat = function () { var posi ...
- jquery底部弹出菜单_带有jQuery的新鲜底部滑出菜单
jquery底部弹出菜单 View demo 查看演示Download Source 下载源 In this tutorial we will create a unique bottom slide ...
- html中文字阴影扁平,jQuery扁平化图标文字长阴影特效插件
这是一款效果十分炫酷的jQuery扁平化图标文字阴影特效插件.近几年来,扁平化设计已经成为前端网页开发的一个时髦领域.扁平化设计在各种移动和桌面应用中随处可见.在这款插件中,使用jQuery来模拟扁平 ...
最新文章
- java输出回文数原代码_JAVA怎么用循环语句编写一个判别是否为回文数的代码?...
- 记录一个Ubuntu的一个官方地址
- java query接口_「软帝学院」Java零基础学习详解
- windows 技巧篇-清除共享地址访问缓存信息,共享路径临时访问用户切换方法
- 盘点9 个实用的 JSON 工具
- java简单投票系统_JSP实现的简单Web投票程序代码
- Java并发-ThreadLocal
- 实现2个整形变量的交换
- 实现electron-bridge
- Mybatis 一对多关联查询collection用法
- javaScript技巧表:单提交验证类[转载]
- script标签的for属性和event属性
- FMDB在Swift中的基本使用
- [转]模块化——Common规范及Node模块实现
- 视频编解码(三):H265编码器
- I2C分析及RX8025驱动编写
- 姑苏城内的老黄,金鸡湖边的GTC,你get到几个点?
- Fragment XXXXXX{xxxxxxxxx} not attached to Activity
- InfluxDB使用教程:数据库管理工具InfluxDBStudio
- 邮件群发为什么容易被拦截?怎么避免?