|
|
| Line 1: |
Line 1: |
| - | <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
| + | <html> |
| - | <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
| + | |
| - | <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
| + | |
| - | <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
| + | |
| - | <!--[if gt IE 8]><!-->
| + | |
| - | <html xmlns="http://www.w3.org/1999/xhtml">
| + | |
| | <head> | | <head> |
| - | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
| + | |
| - | <title>IBM官网导航条效果</title>
| + | |
| | <style> | | <style> |
| - | body,div,ul,li{margin:0;padding:0;}
| + | #p-logo { |
| - | body{height:2000px;background:#F0F0F0;} | + | display:none; |
| - | li{list-style:none;}
| + | } |
| - | a:link,a:visited{outline:none;text-decoration:none;}
| + | |
| - | #wrap{width:100%;position:fixed;top:0;}
| + | body { |
| - | #topBar{
| + | background-color:#fff; |
| - | color:#CCC; | + | //background-image:url("https://static.igem.org/mediawiki/2011/3/3a/Bg.png"); |
| - | height:auto;
| + | } |
| - | background:#06F;
| + | |
| - | overflow:hidden; | + | #top-section { |
| - | text-align:center; | + | height:18px; |
| - | font-family: Arial;
| + | border:none; |
| - | font-size: 50px; | + | border-bottom:1px solid black; |
| - | line-height: 60px;
| + | padding:0px; |
| | + | } |
| | + | |
| | + | h1.firstHeading { |
| | + | display:none; |
| | + | } |
| | + | h3#siteSub { |
| | + | display:none; |
| | + | } |
| | + | #contentSub { |
| | + | display:none; |
| | + | } |
| | + | #search-controls |
| | + | { |
| | + | display:none; |
| | + | } |
| | + | .header { |
| | + | padding:0px; |
| | } | | } |
| - | #topBar a{color:#FFF;background:#7A7A7A;padding:2px 5px;border-radius:10px;}
| |
| - | #nav{height:50px;overflow:hidden;border-top:1px solid #999;border-bottom::1px solid #666;background:#000 url(http://www.alixixi.com/web/UploadPic/2011-12/2011122131216590.png) repeat-x;}
| |
| - | #nav .logo{float:left;margin:0 20px;}
| |
| - | #nav .logo a{float:left;width:100px;height:50px;overflow:hidden;text-indent:-9999px;background:url(http://farm1.static.flickr.com/84/248311926_cefff0d5c1.jpg) no-repeat;}
| |
| - | #nav .logo a:hover{background-position:0 -50px;}
| |
| - | #nav.hide .logo a{width:100px;height:30px;background-position:0 -100px;_background-position:0 -130px;}
| |
| - | #nav.hide .logo a:hover{background-position:0 -130px;}
| |
| - | #nav ul,#nav ul li{float:left;}
| |
| - | #nav ul li a{float:left;color:#CCC;height:50px;font:16px/50px Arial;padding:0 20px;}
| |
| - | #nav ul li a:hover{color:#FFF;background:url(http://www.alixixi.com/web/UploadPic/2011-12/2011122131216590.png) 0 -50px repeat-x;}
| |
| - | #nav.hide ul{display:none;}
| |
| | </style> | | </style> |
| - | <script>
| |
| - | var fgm = {
| |
| - | shit: !-[1,] && !window.XMLHttpRequest,
| |
| - | scrollTop: function() {
| |
| - | return document.documentElement.scrollTop || document.body.scrollTop;
| |
| - | },
| |
| - | currentStyle: function(obj, attr) {
| |
| - | return parseInt(obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]);
| |
| - | },
| |
| - | fixed: function(element) {
| |
| - | if(this.shit) {
| |
| - | var top = this.currentStyle(element, "top") || 0,
| |
| - | dd = "(document.documentElement)";
| |
| - | document.documentElement.style.textOverflow = "ellipsis";
| |
| - | element.style.position = "absolute";
| |
| - | element.style.setExpression("top", "eval(" + dd + ".scrollTop + " + (top - this.scrollTop()) + ') + "px"');
| |
| - | }
| |
| - | else {
| |
| - | element.style.position = "fixed";
| |
| - | }
| |
| - | },
| |
| - | doMove: function(obj, iTarget, callback) {
| |
| - | clearInterval(obj.timer);
| |
| - | obj.timer = setInterval(function() {
| |
| - | var iCur = fgm.currentStyle(obj, "height"),
| |
| - | iSpeed = (iTarget - iCur) / 5;
| |
| - | iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
| |
| - | iTarget == iCur ? (clearInterval(obj.timer), callback && callback.call(obj)) : obj.style.height = iSpeed + iCur + "px";
| |
| - | }, 30);
| |
| - | }
| |
| - | };
| |
| - | window.onload = function() {
| |
| - | var oWrap = document.getElementById("wrap"),
| |
| - | oTopBar = document.getElementById("topBar"),
| |
| - | oNav = document.getElementById("nav"),
| |
| - | fnStatus = function(status) {
| |
| - | !!status ?
| |
| - | (function() {
| |
| - | oNav.className = "hide";
| |
| - | fgm.doMove(oTopBar, 0);
| |
| - | fgm.doMove(oNav, 30);
| |
| - | })() :
| |
| - | (function() {
| |
| - | fgm.doMove(oTopBar, 60);
| |
| - | fgm.doMove(oNav, 50, function() {
| |
| - | this.className = "" ;
| |
| - | })
| |
| - | })();
| |
| - | };
| |
| - | fgm.fixed(oWrap);//IE6 Fixed
| |
| - | window.onscroll = function() {
| |
| - | var iScrollTop = fgm.scrollTop();
| |
| - | fnStatus(iScrollTop > 0);
| |
| - | document.onmouseover = function(ev) {
| |
| - | var oEv = ev || event,
| |
| - | oTarget = oEv.target || oEv.srcElement,
| |
| - | contains = function() {
| |
| - | if(oWrap.contains) {
| |
| - | return oWrap.contains(oTarget);
| |
| - | }
| |
| - | else if(oWrap.compareDocumentPosition) {
| |
| - | return !!(oWrap.compareDocumentPosition(oTarget) & 16);
| |
| - | }
| |
| - | }();
| |
| - | fnStatus(!contains && iScrollTop > 0);
| |
| - | };
| |
| - | };
| |
| - | window.onscroll();
| |
| - | };
| |
| - | </script>
| |
| - | </head>
| |
| - | <body>
| |
| - | <table width="100%" border="1">
| |
| - | <tr>
| |
| - | <td height="391">
| |
| - | <div id="wrap">
| |
| - | <div id="topBar">
| |
| - | BHSF
| |
| - | </div>
| |
| - | <!--/topBar-->
| |
| - | <div id="nav">
| |
| - | <div class="logo"><a href="javascript:;">BHSF</a></div>
| |
| - | <ul>
| |
| - | <li><a href="javascript:;">Home</a></li>
| |
| - | <li><a href="javascript:;">服务</a></li>
| |
| - | <li><a href="javascript:;">产品</a></li>
| |
| - | <li><a href="javascript:;">支持与下载</a></li>
| |
| - | <li><a href="javascript:;">个性化服务</a></li>
| |
| - | </ul>
| |
| - | </div>
| |
| - | <!--/nav-->
| |
| - | </div>
| |
| - | <!--/wrap-->
| |
| - |
| |
| - | </td>
| |
| - | </tr>
| |
| - | </table>
| |
| | | | |
| - | </body> | + | </head> |
| | </html> | | </html> |
"
