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>
    

      

  • 相关阅读:
    English trip V2-B 14 Yes, I can! 是的,我能! Teacher:Russell
    I1-3 Weather Teacher:Corrine
    4-redis数据过期策略
    redis持久化
    redis优势
    解决error while loading shared libraries
    1-zookeeper基本原理和使用
    ObjectiveSQL框架让你不要再写复杂SQL
    sharding-proxy+sharding-ui安装使用配置
    vim 多行取消注释
  • 原文地址:https://www.cnblogs.com/cxd4321/p/3850705.html
Copyright © 2011-2022 走看看