Team:Beijing BHSF/templates/header

From 2013hs.igem.org

(Difference between revisions)
 
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>

Latest revision as of 13:36, 30 March 2013