html纵向固定导航菜单代码,jQuery和css3响应式垂直固定导航菜单插件
这是一款非常实用的jQuery和css3响应式垂直固定导航菜单插件。当你的页面上有很多的内容,用户需要花费大量的时间才能找到他们想要的内容。这个垂直固定导航菜单插件能够为页面提供一个内容预览,使用户能非常轻松的找到他们需要的内容。
HTML结构
导航菜单使用nav作为wrapper,并为每一个导航项创建一个section。另外添加了一个trigger用于在触摸屏设备上导航。
Open navigation
Item 1
CSS样式
我们使用Modernizr(.touch和.no-touch)来检测触摸和非触摸设备,并提供两个自定义的导航方法。因此,你在大屏幕上不论如何缩小浏览器,看到的都是小点导航按钮,但是如果触摸屏设备来查看这个demo,你会看到下图所示的样子:
在非触摸屏的设备上,我们将trigger隐藏,并给元素设置position: fixed。
默认情况下,我们给导航菜单项设置scale-down的transform效果。在鼠标滑过它们时,在使它们scale-up起来。
.no-touch #cd-vertical-nav {
/*fix the navigation*/
position: fixed;
right: 40px;
top: 50%;
bottom: auto;
transform: translateY(-50%);
}
.no-touch #cd-vertical-nav a span {
float: right;
/*scale down navigation dots and labels*/
transform: scale(0.6);
}
.no-touch #cd-vertical-nav .cd-dot {
transform-origin: 50% 50%;
}
.no-touch #cd-vertical-nav .cd-label {
transform-origin: 100% 50%;
}
.no-touch #vertical-nav a:hover span {
/*scale up navigation dots and labels*/
transform: scale(1);
}
.no-touch #cd-vertical-nav a:hover .cd-label {
/*show labels*/
opacity: 1;
}
在移动触摸设备上,我们为.cd-nav-trigger和设置position: fixed。
当用户点击了.cd-nav-trigger元素,我们给导航菜单添加.open类,用来改变CSS3 scale的值从0变到1,并通过CSS3 transition使动画更加平滑。
下面是一些简化代码:
.touch #cd-vertical-nav {
position: fixed;
z-index: 1;
right: 5%;
bottom: 30px;
width: 90%;
max-width: 400px;
max-height: 90%;
transform: scale(0);
transition-property: transform;
transition-duration: 0.2s;
}
.touch #cd-vertical-nav.open {
transform: scale(1);
}
JAVASCRIPT
当用户向下滚动鼠标,updateNavigation()方法会计算出哪一个是当前浏览的section,并未相应的导航菜单项添加.is-selected类(基于导航菜单项的data-number属性)。
jQuery(document).ready(function($){
var contentSections = $('.cd-section'),
navigationItems = $('#cd-vertical-nav a');
updateNavigation();
$(window).on('scroll', function(){
updateNavigation();
});
//smooth scroll to the section
navigationItems.on('click', function(event){
event.preventDefault();
smoothScroll($(this.hash));
});
//smooth scroll to second section
$('.cd-scroll-down').on('click', function(event){
event.preventDefault();
smoothScroll($(this.hash));
});
//open-close navigation on touch devices
$('.touch .cd-nav-trigger').on('click', function(){
$('.touch #cd-vertical-nav').toggleClass('open');
});
//close navigation on touch devices when selectin an elemnt from the list
$('.touch #cd-vertical-nav a').on('click', function(){
$('.touch #cd-vertical-nav').removeClass('open');
});
function updateNavigation() {
contentSections.each(function(){
$this = $(this);
var activeSection = $('#cd-vertical-nav a[href="#'+$this.attr('id')+'"]').data('number') - 1;
if ( ( $this.offset().top - $(window).height()/2 < $(window).scrollTop() ) && ( $this.offset().top + $this.height() - $(window).height()/2 > $(window).scrollTop() ) ) {
navigationItems.eq(activeSection).addClass('is-selected');
}else {
navigationItems.eq(activeSection).removeClass('is-selected');
}
});
}
function smoothScroll(target) {
$('body,html').animate(
{'scrollTop':target.offset().top},
600
);
}
});
html纵向固定导航菜单代码,jQuery和css3响应式垂直固定导航菜单插件相关推荐
- 响应式网站导航html,jQuery和CSS3响应式网站导航幻灯片插件
这是一款即实用又炫酷的jQuery和CSS3响应式网站导航幻灯片插件.该插件将幻灯片制作为网站的hero导航,在幻灯片中展示网站各主要板块的内容,使用户可以非常容易的了解网站的主要信息. 该幻灯片插件 ...
- 响应式多级菜单 侧边菜单栏_大菜单,小屏幕:响应式,多级导航
响应式多级菜单 侧边菜单栏 如果您曾经在响应式网站上工作,那么毫无疑问,您必须解决这个新兴领域中最棘手的问题之一:导航. 对于简单的导航,解决方案可以很简单. 但是,如果您要处理的事情比较复杂,可能有 ...
- html选择树形菜单代码,jquery+css实现html选择树或树形菜单
标签加上样式调整. 先上效果图: 下面上CSS代码: li{ position:relative !important; } li input { position:absolute;left:0;m ...
- html5响应式导航条,10个响应式设计的导航菜单源码-附教程
10个响应式设计的导航菜单源码-附教程 Sponsor 在2013年里,响应式Web设计将会开始普及,我们应该学习这些新技术,尤其作为网页设计师和前端开发人员,学习CSS3样式表和HTML5是必不可少 ...
- php手机网站底部导航代码,jQuery微信手机端底部弹出导航菜单列表代码
jQuery微信手机端底部弹出导航菜单列表代码 jQuery微信手机端底部弹出导航菜单列表代码是一款网页底部点击按钮弹出浮动的图标菜单列表的手机特效. js代码 function showList() ...
- Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单
代码: <div class='container-fluid'><h2 class='page-header'>导航</h2><!-- .navrbar n ...
- 一款由css3和jquery实现的响应式设计导航
2014年响应式设计成为设计主流.今天要给大家带来一款由css3和jquery实现的响应式设计导航.当显示器为pc时,导航为横条.当客户端为移动端时,呈现坚形导航.我们一起看下效果图: 在线预览 ...
- html发展时间轴纵向插件,jquery响应式垂直时间轴插件vertical-timeline
插件描述:jquery-vertical-timeline是一款简单实用的jQuery响应式垂直时间轴插件. jquery-vertical-timeline 是一款简单实用的jQuery响应式垂直时 ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App (十五) —— jQuery Mobile 与响应式
jQuery Mobile 在刚推出的时候,曾经宣传了几个重要的特点,除了 Kayo 在本系列文章中多次介绍的"触摸屏优化"外,另外一个最直接的特点就是"响应式设计&qu ...
最新文章
- 最新、最全面的LAMP+wordpress安装过程!!
- c语言87,C语言程序设计87300.doc
- python两条曲线图片相似度_Python比较两个图片相似度的方法
- 成功秀了一波scala spark ML逻辑斯蒂回归
- 是不正确的python语句_Python if语句读取不正确
- 什么是值传递?什么是引用传递?
- C\C++获取当前路径
- DevOps冲击下的软件测试
- linux内核之进程调度
- java 替换所有中文_java 替换中文
- MATLAB 常见取整函数
- dmx512协议c语言编程,dmx512协议c语言编程
- ubuntu创建桌面快捷方式
- 微信状态栏隐藏 HTML,微信里几个实用的隐藏小技巧!
- lvds输入悬空_lvds接口定义
- 专家学者热议智慧交通:大数据云计算,出行有“千里眼”
- 文本检测最近文章检索(1)
- C# 使用 NPOI 处理Excel导入单元格内容是公式问题
- OPPO 12系统 无TalkBack设置 功能锁定 手撕
- python输出字符串两次_下列程序的运行结果是: str = Hello print(str * 2) # 输出字符串两次 print(str + Python!) # 连接字符串_学小...
热门文章
- css资源网站收集推荐
- ASP.NET 2.0中实现模板中的数据绑定
- mysql查询各类课程的总学分_基于jsp+mysql的JSP学生选课信息管理系统
- usb一转多 树莓派zero_树莓派 Zero USB/以太网方式连接配置教程
- nodejs 安装 nrm
- Tomcat下找不到properties文件
- fatal: Could not read from remote repository.的解决办法
- [转载] Python的生成器
- 使用JavaScript的图像识别游戏
- 不同php文件,php-不同文件夹的不同登录(会话)