置顶菜单demo
一朋友需要置顶菜单的功能,给了个网站,让弄下来。看了下,就把样式及效果拔了下来。去掉了复杂的东西,只保留了其基本实现。有需要的朋友可以拿去用用。
<style>
#navigation{ text-align:center; height:80px; line-height:80px; position:relative; width:100%; z-index:998; top:0; left:0;
-webkit-transition: height .3s cubic-bezier(0.39, 0.575, 0.565, 1);
-o-transition: height .3s cubic-bezier(0.39, 0.575, 0.565, 1);
-moz-transition: height .3s cubic-bezier(0.39, 0.575, 0.565, 1);
transition:height .3s cubic-bezier(0.39, 0.575, 0.565, 1);
}
#navigation.fixed{ position:fixed; height:50px; line-height:50px; }
#navigation li{ display:inline-block; padding:0 20px; *display:inline; }
#navigation li a{ color:#b1b1b1;
-webkit-transition: all .3s cubic-bezier(0.39, 0.575, 0.565, 1);
-o-transition: all .3s cubic-bezier(0.39, 0.575, 0.565, 1);
-moz-transition: all .3s cubic-bezier(0.39, 0.575, 0.565, 1);
transition:all .3s cubic-bezier(0.39, 0.575, 0.565, 1);
}
#navigation li.current a,#navigation li:hover a{ color:#70ca10; }
</style>
1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
<div id="navigation">
<ul>
<li class="current"><a href="#" target="_self">Home</a></li><li><a href="#" target="_self">About</a></li><li><a href="#" target="_self">Contact</a></li><li><a href="#" target="_self">links</a></li> </ul>
</div>
1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(function(){
$(window).scroll(function(){
var t = $(window).scrollTop();
if(t>$('.header-wrap').height()){
$('#navigation').addClass('fixed');
}else{
$('#navigation').removeClass('fixed');
}
});
});
</script>
置顶菜单demo的更多相关文章
- jquery——制作置顶菜单
置顶菜单: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- [置顶]
一个demo学会css
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 学习了css权威指南这本书,自己喜欢边学边总结边写demo,所以写了这篇文章,包含了大部分的css编程 ...
- [置顶]
一个demo学会c#
学习了c#4.5高级编程这本书,自己喜欢边学边总结边写demo,所以写了这篇文章,包含了大部分的c#编程知识.让你一个demo掌握c#编程,如果有问题可以留言. 此demo主要包括五个文件:Stude ...
- Javascript笔记----实现Page页面右下角置顶按钮.
从用博客开始,发现博客园中很多博友的博客中在Page右下角都有个图标,不论屏幕怎么拉伸,都始终停留在右下角.点击后页面置顶.后面想想写一个Demo来实现这种效果吧. 一. 图标右下角固定. 1.SS ...
- Android的SwipeToDismiss第三方开源框架模拟QQ对话列表侧滑删除,置顶,将头像图片圆形化处理。
<Android SwipeToDismiss:左右滑动删除ListView条目Item> Android的SwipeToDismiss是github上一个第三方开源框架(github ...
- js上移、下移、置顶、置底功能实现
实现页面上列表内容上移.下移.置顶.置底 功能,主要实现思路是节点操作,比如说:上移,直接把点击项移动到前一个节点,以此类推,当然实际代码实现还要加些判断,如当前点击操作项是否已经是置底或置底了,如果 ...
- QQ好友列表向左滑动出现置顶、删除--第三方开源--SwipeMenuListView
SwipeMenuListView是在github上的第三方开源项目,该项目在github上的链接地址是:https://github.com/baoyongzhang/SwipeMenuListVi ...
- QT窗口置顶/真透明/背景模糊/非矩形/跳过任务栏分页器/无边框/无焦点点击/焦点穿透
qt 窗口置顶/真透明/背景模糊/非矩形/跳过任务栏分页器/无边框/无焦点点击/焦点穿透 窗口置顶qt 里是 setWindowFlags(Qt::WindowStaysOnTopHint)kde 里 ...
- 解决Popup StayOpen=true时,永远置顶的问题
Popup设置了StayOpen=true时,会置顶显示. 如弹出了Popup后,打开QQ窗口,Popup显示在QQ聊天界面之上. 怎么解决问题? 获取绑定UserControl所在的窗口,窗口层级变 ...
随机推荐
- web理论知识--HTML结构及标签
一.参考书籍: <Web 前端开发 HTML5+CSS3+jQuery+AJAX 从学到用完美实践> 备注:本书为工具书. 二.HTML5元素: 按功能划分:基础.格式.表单.框架.图像. ...
- ssh端口转发(之kettle ssh方式连接数据库)
ssh参数解释 格式 ssh [user@]host [command] 选项: -1:强制使用ssh协议版本1: -2:强制使用ssh协议版本2: -4:强制使用IPv4地址: -6:强制使用IP ...
- Bootstrap css-表格
前言:整理的东西比较基础,有不足的地方欢迎大家批评指正! 1,Bootstrap基本的表格结构 源代码: <table class="table"> <cap ...
- [HDU4123]Bob’s Race
题目大意:给定一棵$n$个点并且有边权的树,每个点的权值为该点能走的最远长度,并输入$m$个询问,每次询问最多有多少个编号连续的点,他们的最大最小点权差小于等于$Q$. 思路:两趟DP(DFS)求出每 ...
- zoj 3662 第37届ACM/ICPC长春赛区H题(DP)
题目:给出K个数,使得这K个数的和为N,LCM为M,问有多少种 f[i][j][k]表示选i个数,总和为j,最小公倍数为k memery卡的比较紧,注意不要开太大,按照题目数据开 这种类型的dp也是第 ...
- 14、Redis的复制
写在前面的话:读书破万卷,编码如有神 --------------------------------------------------------------------------------- ...
- Xtreme8.0 - Sum it up 水题
Sum it up 题目连接: https://www.hackerrank.com/contests/ieeextreme-challenges/challenges/sum-it-up Descr ...
- httpclient的并发连接问题
昨天的搜索系统又出状况了,几个库同时重建索引变得死慢.经过一个上午的复现分析,确定问题出现httpclient的使用上(我使用的是3.1这个被广泛使用的遗留版本).搜索系统在重建索引时,是并发多个线程 ...
- LPC1800 and LPC4300 Boot/ISP/CRP
MCU的启动方式有很多种:UART接口,扩展的静态存储单元(NOR Flash), SPI Flash,quad SPI Flash,高速USB0和USB1.另外可以通过对OTP存储单元的编程. 首先 ...
- [廖雪峰] Git 分支管理(2):Bug 分支
软件开发中,bug 就像家常便饭一样.有了 bug 就需要修复,在 Git 中,由于分支是如此的强大,所以,每个 bug 都可以通过一个新的临时分支来修复,修复后,合并分支,然后将临时分支删除. 当你 ...