Template:Queens Canada/Header

From 2012.igem.org

(Difference between revisions)
(Undo revision 42154 by P.tsang (talk))
Line 31: Line 31:
opacity: 0.8;
opacity: 0.8;
}
}
-
#nav,#nav ul {
+
#menu { position: relative; top: 0; left: 0; overflow: hidden; height: 98px;}
-
    list-style: none outside none;
+
#menu .colourful { display: block; position: absolute; background: #f0ad22; height: 68px; width: 85px; top: 4px; left: -100px; }
-
    margin: 0;
+
#menu ul { margin: 0; padding: 0; list-style: none; float: left; position: relative; top: 0; left: 0; z-index: 1; }
-
    padding: 0;
+
#menu li { float: left; margin: 0 1px 0 0; }
-
    background-color: transparent;
+
#menu a:link, #menu a:visited, #menu a:hover, #menu a:active { color: #000; text-align: center; display: block; border: solid; border-width: 4px 0 0; line-height: 40px; width: 85px; height: 60px; }
-
    font-family: Tahoma, Geneva, sans-serif;
+
#menu li a:hover { text-decoration: none; color: #fff; text-shadow: 0 0 1px #999; }
-
    z-index: 5;
+
-
}
+
-
#nav {
+
-
    background-color: transparent;
+
-
    clear: both;
+
-
    font-size: 12px;
+
-
    height: 60px;
+
-
    padding: 0 0 0 0px;
+
-
    position: relative;
+
-
    width: 650px;
+
-
    left: 340px;
+
-
    top: -100px;
+
-
}
+
-
#nav ul {
+
-
    background-color: #222;
+
-
    border:1px solid #222;
+
-
    border-radius: 0 5px 5px 5px;
+
-
    border-width: 0 1px 1px;
+
-
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
+
-
    left: -9999px;
+
-
    overflow: hidden;
+
-
    position: absolute;
+
-
    top: -9999px;
+
-
    z-index: 2;
+
-
 
+
-
    -moz-transform: scaleY(0);
+
-
    -ms-transform: scaleY(0);
+
-
    -o-transform: scaleY(0);
+
-
    -webkit-transform: scaleY(0);
+
-
    transform: scaleY(0);
+
-
 
+
-
    -moz-transform-origin: 0 0;
+
-
    -ms-transform-origin: 0 0;
+
-
    -o-transform-origin: 0 0;
+
-
    -webkit-transform-origin: 0 0;
+
-
    transform-origin: 0 0;
+
-
 
+
-
    -moz-transition: -moz-transform 0.2s linear;
+
-
    -ms-transition: -ms-transform 0.2s linear;
+
-
    -o-transition: -o-transform 0.2s linear;
+
-
    -webkit-transition: -webkit-transform 0.2s linear;
+
-
    transition: transform 0.2s linear;
+
-
    font-family: Tahoma, Geneva, sans-serif;
+
-
}
+
-
#nav li {
+
-
    background: url('menu_line.png') no-repeat scroll right 5px transparent;
+
-
    float: left;
+
-
    position: relative;
+
-
}
+
-
#nav li a {
+
-
    color: #000000;
+
-
    display: block;
+
-
    float: left;
+
-
    font-weight: normal;
+
-
    height: 30px;
+
-
    padding: 23px 20px 0px 20px;
+
-
    position: relative;
+
-
    text-decoration: none;
+
-
    background-color: transparent;
+
-
    bottom: 0px;
+
-
    border-right: 0px solid #ffd791;
+
-
}
+
-
#nav li:hover > a {
+
-
    color: #333333;
+
-
    background-color: #ffffff; filter: alpha(opacity=50); opacity:0.5;
+
-
}
+
-
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
+
-
    background: none repeat scroll 0 0;
+
-
    background-color: transparent;
+
-
    outline: 0 none;
+
-
}
+
-
#nav li:hover ul.subs {
+
-
    left: 0;
+
-
    top: 53px;
+
-
    width: 150px;
+
-
    background: #C5E2ED;
+
-
    text-align: left;
+
-
    padding: 5px;
+
-
 
+
-
 
+
-
    -moz-transform: scaleY(1);
+
-
    -ms-transform: scaleY(1);
+
-
    -o-transform: scaleY(1);
+
-
    -webkit-transform: scaleY(1);
+
-
    transform: scaleY(1);
+
-
}
+
-
#nav li:hover ul.subs li a
+
-
{
+
-
padding-top: 5px;
+
-
padding-bottom: 5px;
+
-
height: auto;
+
-
  border-bottom: 1px solid #7F9DB0;
+
-
border-right: 0px;
+
-
padding: 10px;
+
-
}
+
-
#nav li:hover ul.subs li a:hover
+
-
{
+
-
background-color: #7F9DB0;
+
-
opacity: 1.0;
+
-
color: white;
+
-
border-radius: 5px;
+
-
 
+
-
}
+
-
#nav ul li {
+
-
    background: none;
+
-
    width: 100%;
+
-
}
+
-
#nav ul li a {
+
-
    float: none;
+
-
}
+
-
#nav ul li:hover > a {
+
-
    background-color: #cccccc;
+
-
    color: #333333;
+
-
}
+
#globalWrapper
#globalWrapper
Line 624: Line 510:
margin-top: 50px;
margin-top: 50px;
-
}
 
-
#menu1
 
-
{
 
-
width:72px;
 
-
height: 0px;
 
-
background-image:url('http://dl.dropbox.com/u/46807995/protein1.png');
 
-
position:absolute;
 
-
color: transparent;
 
-
top: 53px;
 
-
left: 430px;
 
}
}
#topbarcontainer
#topbarcontainer
Line 671: Line 547:
<div id="topbar">
<div id="topbar">
<a href="https://2012.igem.org/Team:Queens_Canada">
<a href="https://2012.igem.org/Team:Queens_Canada">
-
<img src="https://static.igem.org/mediawiki/2012/9/96/Headerv2.png">
+
<img src="https://static.igem.org/mediawiki/2012/9/96/Headerv2.png" style="float:left">
</a>
</a>
<a id="qboxlink" href="http://www.queensu.ca/"></a>
<a id="qboxlink" href="http://www.queensu.ca/"></a>
<a id="iboxlink" href="https://2012.igem.org/Main_Page"></a>
<a id="iboxlink" href="https://2012.igem.org/Main_Page"></a>
-
<ul id="nav">
+
      <div id="menu">
-
<li class="menuoption"><a href="https://2012.igem.org/Team:Queens_Canada">Home</a></li>
+
        <ul class="menulist">
-
<li class="menuoption"><a href="https://2012.igem.org/Team:Queens_Canada/Team">Team</a></li>
+
       
-
        <li class="menuoption"><a class="hsubs" href="#">Project</a>
+
<li class="menuitem">
-
<ul class="subs">
+
            <a href="">Home </a>
-
<li><a href="#">Chimeric Flagella</a></li>
+
 
-
<li><a href="#">Ligation Method</a></li>
+
<div class="subs">
-
</ul>
+
asdfasdf
 +
</div>
</li>
</li>
-
<li class="menuoption"><a class="hsubs" href="https://2012.igem.org/Team:Queens_Canada/Notebook">Notebook</a>
+
 
-
</li>
+
-
<li class="menuoption"><a href="https://2012.igem.org/Team:Queens_Canada/SynthetiQ">SynthetiQ</a>
+
-
<ul class="subs">
+
-
        <li><a href="https://2012.igem.org/Team:Queens_Canada/SynthetiQ/DNA">DNA</a></li>
+
-
        </ul>
+
</li>
</li>
-
<li class="menuoption"><a class="hsubs" href="#">Partners</a>
+
<li class="menuitem">
-
<ul class="subs">
+
            <a href="">Team</a>
-
<li><a href="https://2012.igem.org/Team:Queens_Canada/Sponsors">Sponsors</a></li>
+
<div class="subs">
-
</ul>
+
asdfasdfthis
 +
</div>
 +
          </li>
 +
<li class="menuitem">
 +
            <a href="">Project</a>
 +
<ul class="subs">
 +
<li>
 +
asdfasdf
</li>
</li>
-
<li class="menuoption"><a class="hsubs" href="#">Extras</a> </li>
+
</ul>
-
<div id="lavalamp"></div>
+
          </li>
-
</ul>
+
<li class="menuitem">
 +
            <a href="">Notebook</a>
 +
<ul class="subs">
 +
<li>
 +
asdfasdf
 +
</li>
 +
</ul>
 +
          </li>
 +
<li class="menuitem">
 +
            <a href="">SynthetiQ</a>
 +
<ul class="subs">
 +
<li>
 +
asdfasdf
 +
</li>
 +
</ul>
 +
          </li>
 +
<li class="menuitem">
 +
            <a href="">Partners</a>
 +
<ul class="subs">
 +
<li>
 +
asdfasdf
 +
</li>
 +
</ul>
 +
          </li>
 +
<li class="menuitem">
 +
            <a href="">Extras</a>
 +
<ul class="subs">
 +
<li>
 +
asdfasdf
 +
</li>
 +
</ul>
 +
          </li>
 +
        </ul>
 +
      </div>
<div id="igemlogocontainer">
<div id="igemlogocontainer">
<a href="https://2012.igem.org/Main_Page"> <img src="https://static.igem.org/mediawiki/2012/e/e2/Igemlogo.png" width=75> </a>
<a href="https://2012.igem.org/Main_Page"> <img src="https://static.igem.org/mediawiki/2012/e/e2/Igemlogo.png" width=75> </a>
Line 718: Line 630:
Control
Control
</div>
</div>
 +
<script type="text/javascript">
 +
 +
$('.menuitem').hover(
 +
function()
 +
{
 +
$(this).children().delay(300).fadeIn(500);
 +
}
 +
,
 +
function()
 +
{
 +
$(".subs").delay(300).fadeOut(500);
 +
}
 +
);
 +
</script>
<script type="text/javascript">
<script type="text/javascript">
var startleft =$("#nav").offset().left;
var startleft =$("#nav").offset().left;

Revision as of 21:12, 19 July 2012
Control

Retrieved from "http://2012.igem.org/Template:Queens_Canada/Header"