zoukankan      html  css  js  c++  java
  • 置顶菜单demo

      一朋友需要置顶菜单的功能,给了个网站,让弄下来。看了下,就把样式及效果拔了下来。去掉了复杂的东西,只保留了其基本实现。有需要的朋友可以拿去用用。

    <style>
    	#navigation{ text-align:center; height:80px; line-height:80px; position:relative; 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>
    

      

  • 相关阅读:
    数据库(六):多表关系
    数据库(五):约束关系
    数据库(四):数据类型
    数据库(三):存储引擎
    数据库(二):初识sql语句
    数据库(一):初识数据库
    番外:socketserver用法
    ~~并发编程(十六):协程理论~~
    ~~并发编程(十五):进程池线程池~~
    ~~并发编程(十四):Queue~~
  • 原文地址:https://www.cnblogs.com/cxd4321/p/3850705.html
Copyright © 2011-2022 走看看