Template:CAU China/Menu

From 2014.igem.org

(Difference between revisions)
Line 4: Line 4:
<head>
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
-
 
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<style type="text/css">
-
<!--
+
/* common styling */
-
 
+
/* set up the overall width of the menu div, the font and the margins */
-
 
+
.menu {
-
div, ul, li, h3,p{ margin: 0px; padding: 0px; list-style: none; }
+
font-family: arial, sans-serif;  
-
img{border:0 none;}
+
width:60%;  
-
.box { width: 60%; margin:0 auto; clear:both;}
+
margin:0;  
-
/*  
+
margin:50px 0;
-
------------------------------
+
-
CSS Common
+
-
------------------------------
+
-
*/
+
-
 
+
-
 
+
-
/* clearfixmenu */
+
-
.clearfixmenu:after {
+
-
content: ".";
+
-
display: block;
+
-
clear: both;
+
-
visibility: hidden;
+
-
line-height: 0;
+
-
height: 0;
+
}
}
-
.clearfixmenu {
+
/* remove the bullets and set the margin and padding to zero for the unordered list */
-
display: inline-block;
+
.menu ul {
 +
padding:0;
 +
margin:0;
 +
list-style-type: none;
}
}
-
html[xmlns] .clearfixmenu {
+
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
-
display: block;
+
.menu ul li {
 +
float:left;
 +
position:relative;
}
}
-
* html .clearfixmenu {
+
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
-
height: 1%;
+
.menu ul li a, .menu ul li a:visited {
 +
display:block;
 +
text-align:center;
 +
text-decoration:none;
 +
width:104px;
 +
height:30px;
 +
color:#000;
 +
border:1px solid #fff;
 +
border-width:1px 1px 0 0;
 +
background:#c9c9a7;
 +
line-height:30px;
 +
font-size:11px;
}
}
-
/*  
+
/* make the dropdown ul invisible */
-
------------------------------
+
.menu ul li ul {
-
nav-menu  
+
display: none;
-
------------------------------
+
}
-
*/
+
-
+
-
#nav-menu {
+
/* specific to non IE browsers */
-
height: 35px;
+
 
-
background-image: url("https://static.igem.org/mediawiki/2014/3/39/Menu_background.gif");
+
/* set the background and foreground color of the main menu li on hover */
-
background-repeat: no-repeat;
+
.menu ul li:hover a {
 +
color:#fff;  
 +
background:#b3ab79;
}
}
-
#nav-menucon {
+
 
-
height: 36px;
+
/* make the sub menu ul visible and position it beneath the main menu list item */
-
background-image: url("https://static.igem.org/mediawiki/2014/3/39/Menu_background.gif");
+
.menu ul li:hover ul {
-
background-repeat: no-repeat;
+
display:block;  
-
background-position: 0-37px;
+
position:absolute;
 +
top:31px;  
 +
left:0;  
 +
width:105px;
}
}
-
#nav-menucon .con{
 
-
height: 36px;
 
-
line-height: 36px;
 
-
text-align: right;
 
-
padding-right: 10px;
 
-
}
 
-
#nav-menu .container {position: relative;overflow: visible; z-index: 99;}
 
-
#nav-menu .menu {padding: 0 0 0 14px;}
+
/* style the background and foreground color of the submenu links */
-
#nav-menu .menu li {
+
.menu ul li:hover ul li a {
-
position: relative;
+
display:block;  
-
float: left;
+
background:#faeec7;  
-
padding: 0 8px 0 5px;
+
color:#000;
-
display: inline;
+
-
font-size: 14px;
+
-
background-position: right -622px;
+
}
}
-
#nav-menu .menu li h3 {font-weight: normal; display: inline-block; float: left;}
 
-
#nav-menu .menu li a.xialaguang {margin-top: 5px; display: inline-block; color: #FFF;text-decoration: none; font-size:14px;}
 
-
#nav-menu .menu li a.selected,
 
-
#nav-menu .menu li a.navhover,
 
-
#nav-menu .menu li a.xialaguang:hover {color: #911531;
 
-
    background-image: url(https://static.igem.org/mediawiki/2014/3/39/Menu_background.gif);
 
-
background-repeat: no-repeat;
 
-
background-position: left -83px;
 
-
}
 
-
#nav-menu .menu li a.navhover, #nav-menu .menu li a.xialaguang:hover {background-color: #FFF;}
 
-
#nav-menu .menu li a.xialaguang span {height: 30px; line-height: 25px; margin: 0 0 0 6px; padding: 0 6px 0 0; display: inline-block;font-weight:bold;}
 
-
#nav-menu .menu li a.selected span,
 
-
#nav-menu .menu li a.navhover span,
 
-
#nav-menu .menu li a.xialaguang:hover span {
 
-
cursor: pointer;
 
-
background-image: url(https://static.igem.org/mediawiki/2014/3/39/Menu_background.gif);
 
-
background-repeat: no-repeat;
 
-
background-position: right -83px;
 
-
}
 
-
#nav-menu .menu li a.navhover span, #nav-menu .menu li a.xialaguang:hover span {background-color: #FFF}
 
-
#nav-menu .menu li.overlay {
+
/* style the background and forground colors of the links on hover */
-
position: relative;
+
.menu ul li:hover ul li a:hover {
-
left: -4px;
+
background:#dfc184;  
-
width: 8px;
+
color:#000;
-
height: 28px;
+
-
padding: 0;
+
-
margin: 0;
+
-
background-image: url(https://static.igem.org/mediawiki/2014/3/39/Menu_background.gif);
+
-
background-position: center top;
+
}
}
 +
</style>
-
#nav-menu .menu ul.children {
+
<!--[if lte IE 6]>
-
display: none;
+
<style type="text/css">
-
position: absolute;
+
/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */
-
top: 35px;
+
/* Get rid of any default table style */
-
left: 3px;
+
table {
-
width: 225px;
+
border-collapse:collapse;
-
padding: 5px 0 0 0;
+
margin:0;  
-
background: #FFF;
+
padding:0;
-
border: 2px solid #d92640;
+
-
border-top: 0;
+
-
line-height: normal;
+
}
}
-
#nav-menu .menu ul.sleft {
+
/* ignore the link used by 'other browsers' */
-
left: auto;
+
.menu ul li a.hide, .menu ul li a:visited.hide {
-
right: 6px; _right: 5px;
+
display:none;
}
}
-
#nav-menu .menu ul.children li.noborder {border: none;}
+
/* set the background and foreground color of the main menu link on hover */
-
#nav-menu .menu ul.children li {
+
.menu ul li a:hover {
-
float: left;
+
color:#fff;  
-
width: 110px;
+
background:#b3ab79;
-
padding: 1px;
+
-
display: inline-block;
+
-
background-image: none;
+
-
border-right: 1px solid #FFCFCF;
+
-
font-size: 12px;
+
}
}
-
#nav-menu .menu ul.children li h3 {display: block; width: 100%;}
+
/* make the sub menu ul visible and position it beneath the main menu list item */
-
#nav-menu .menu ul.children li a {
+
.menu ul li a:hover ul {
-
width: 100%;
+
display:block;  
-
height: 16px;
+
position:absolute;  
-
line-height: 17px;
+
top:32px;  
-
overflow: hidden;
+
left:0;  
-
padding: 3px 0;
+
width:105px;
-
display: block;
+
-
color: #911531;
+
-
text-indent: 20px;
+
-
background-position: 8px -658px;text-decoration: none; font-size:12px;
+
}
}
-
#nav-menu .menu ul.children li a:hover {background-color: #FFE1E1;text-decoration: none;}
+
/* style the background and foreground color of the submenu links */
-
 
+
.menu ul li a:hover ul li a {
-
#nav-menu .menu ul.children li.count {clear: both;}
+
background:#faeec7;  
-
#nav-menu .menu ul.children li.count div {width: 223px; margin: 5px 0 0; padding: 3px 0; background-color: #FFE1E1; color: #911531; text-indent: 8px;}
+
color:#000;
-
 
+
}
-
.stmenu {
+
/* style the background and forground colors of the links on hover */
-
background-image: url(https://static.igem.org/mediawiki/2014/3/39/Menu_background.gif);
+
.menu ul li a:hover ul li a:hover {
-
background-repeat: no-repeat;
+
background:#dfc184;  
-
background-position: left top;
+
color:#000;
}
}
-
 
-
-->
 
</style>
</style>
 +
<![endif]-->
</head>
</head>
Line 167: Line 124:
</tr>
</tr>
-
<div class="box">
+
<div class="menu">
-
<div id="nav-menu">
+
<ul>
-
  <div class="container">
+
-
    <div class="outerbox">
+
-
      <div class="innerbox clearfixmenu">
+
-
<ul class="menu">
 
     <!--Home-->
     <!--Home-->
-
    <li class="stmenu">
+
<li><a class="hide" href="https://2014.igem.org/Team:CAU_China">Home</a>
-
    <h3><a href="https://2014.igem.org/Team:CAU_China" class="xialaguang"><span>Home</span></a></h3></li>
+
<!--[if lte IE 6]>
-
+
<a href="https://2014.igem.org/Team:CAU_China">Home
-
    <!--Team-->
+
<table><tr><td>
-
    <li class="stmenu">
+
<![endif]-->
-
    <h3><a href="https://2014.igem.org/Team:CAU_China/Team" class="xialaguang"><span>Team</span></a></h3>   
+
</li>
-
    <ul style="display: none;" class="children clearfixmenu">  
+
-
    <li><h3><a href="" class="stmenu"><span>Gallery</span></a></h3></li>
+
-
    <li><h3><a href="" class="stmenu"><span>Attribution</span></a></h3></li>
+
-
    <li class="count noborder"><div>Here we are!</div></li>
+
-
    </ul></li>
+
 +
    <!--Team-->
 +
<li><a class="hide" href="https://2014.igem.org/Team:CAU_China/Team">Team</a>
 +
<!--[if lte IE 6]>
 +
<a href="https://2014.igem.org/Team:CAU_China/Team">Team
 +
<table><tr><td>
 +
<![endif]-->
 +
    <ul>
 +
    <li><a href="spies.html" title="a coded list of spies">Gallery</a></li>
 +
    <li><a href="vertical.html" title="a horizontal vertical menu">Attribution</a></li>
 +
    </ul>
 +
<!--[if lte IE 6]>
 +
</td></tr></table>
 +
</a>
 +
<![endif]-->
 +
</li>
 +
     
     <!--Project-->
     <!--Project-->
-
    <li class="stmenu">
+
<li><a class="hide" href="https://2014.igem.org/Team:CAU_China/Project">Project</a>
-
    <h3><a href="https://2014.igem.org/Team:CAU_China/Project" class="xialaguang"><span>Project</span></a></h3>  
+
<!--[if lte IE 6]>
-
     <ul style="display: none;" class="children clearfixmenu">  
+
<a href="https://2014.igem.org/Team:CAU_China/Project">Project
-
     <li><h3><a href="" class="stmenu"><span></span></a></h3></li>
+
<table><tr><td>
-
     <li><h3><a href="" class="stmenu"><span></span></a></h3></li>
+
<![endif]-->
-
    <li class="count noborder"><div>Our story!</div></li>
+
     <ul>
-
    </ul></li>
+
     <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">1</a></li>
 +
     <li><a href="../layouts/body2.html" title="Cross browser fixed layout">2</a></li>
 +
    </ul>
 +
<!--[if lte IE 6]>
 +
</td></tr></table>
 +
</a>
 +
<![endif]-->
 +
</li>
     <!--Modeling-->
     <!--Modeling-->
-
    <li class="stmenu">
+
-
    <h3><a href="https://2014.igem.org/Team:CAU_China/Modeling" class="xialaguang"><span>Modeling</span></a></h3>  
+
-
     <ul style="display: none;" class="children clearfixmenu">  
+
<li><a class="hide" href="https://2014.igem.org/Team:CAU_China/Modeling">Modeling</a>
-
     <li><h3><a href="" class="stmenu"><span></span></a></h3></li>
+
<!--[if lte IE 6]>
-
    <li class="count noborder"><div>Modeling it!</div></li>
+
<a href="https://2014.igem.org/Team:CAU_China/Modeling">Modeling
-
    </ul></li>
+
<table><tr><td>
 +
<![endif]-->
 +
     <ul>
 +
     <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
 +
 
 +
    </ul>
 +
<!--[if lte IE 6]>
 +
</td></tr></table>
 +
</a>
 +
<![endif]-->
 +
</li>
     <!--Notebook-->
     <!--Notebook-->
-
    <li class="stmenu">
+
<li><a class="hide" href="https://2014.igem.org/Team:CAU_China/Notebook">Notebook</a>
-
    <h3><a href="https://2014.igem.org/Team:CAU_China/Notebook" class="xialaguang"><span>Notebook</span></a></h3>  
+
<!--[if lte IE 6]>
-
     <ul style="display: none;" class="children clearfixmenu">  
+
<a href="https://2014.igem.org/Team:CAU_China/Notebook">Notebook
-
     <li><h3><a href="" class="stmenu"><span>Breakthrough</span></a></h3></li>
+
<table><tr><td>
-
     <li><h3><a href="" class="stmenu"><span>Labnote</span></a></h3></li>
+
<![endif]-->
-
    <li class="count noborder"><div>Track us!</div></li>
+
     <ul>
-
    </ul></li>
+
     <li><a href="../mozilla/dropdown.html" title="A drop down menu">Breakthrough</a></li>
 +
     <li><a href="../mozilla/cascade.html" title="A cascading menu">Labnote</a></li>
 +
    </ul>
 +
<!--[if lte IE 6]>
 +
</td></tr></table>
 +
</a>
 +
<![endif]-->
 +
</li>
     <!--Safety -->
     <!--Safety -->
-
    <li class="stmenu">
+
<li><a class="hide" href="https://2014.igem.org/Team:CAU_China/Safety">Safety</a>
-
    <h3><a href="https://2014.igem.org/Team:CAU_China/Safety" class="xialaguang"><span>Safety </span></a></h3>  
+
<!--[if lte IE 6]>
-
     <ul style="display: none;" class="children clearfixmenu">  
+
<a href="https://2014.igem.org/Team:CAU_China/Safety">Safety
-
     <li><h3><a href="" class="stmenu"><span></span></a></h3></li>
+
<table><tr><td>
-
     <li class="count noborder"><div>!!!</div></li>
+
<![endif]-->
-
     </ul></li>
+
     <ul>
-
 
+
     <li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
-
    <li class="overlay"></li></ul>
+
    <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
-
 
+
     <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
-
<script type="text/javascript">
+
     </ul>
-
$('#nav-menu .menu > li').hover(function() {
+
<!--[if lte IE 6]>
-
$(this).find('.children').animate({ opacity:'show', height:'show' },300);
+
</td></tr></table>
-
$(this).find('.xialaguang').addClass('navhover');
+
</a>
-
}, function() {
+
<![endif]-->
-
$('.children').stop(true,true).hide();
+
</li>
-
$('.xialaguang').removeClass('navhover');
+
</ul>
-
}
+
<!-- clear the floats if required -->
-
).slice(-3,-1).find('.children').addClass('sleft');
+
<div class="clear"> </div>
-
</script>
+
-
 
+
-
      </div>
+
-
    </div>
+
-
  </div>
+
</div>
</div>
-
<div id="nav-menucon"><div class="con"></div></div>
 
-
 
-
</div>
 
-
 
-
 
-
 
</body>
</body>
</html>
</html>

Revision as of 10:52, 18 August 2014

Retrieved from "http://2014.igem.org/Template:CAU_China/Menu"