Template:Team:DukeMBar/CSS

From 2014.igem.org

(Difference between revisions)
 
(32 intermediate revisions not shown)
Line 1: Line 1:
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
-
 
-
<!--THIS STYLE SHEET REPLACES THE HOME TEMPLATE: https://2014.igem.org/Template:Team:DukeHomePage/CSS -->
 
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex1/chrome/chromejs/chrome.js"></script>
+
<head>
-
<style type="text/css" media="screen">
+
-
.chromestyle{
+
-
width: 99%;
+
-
font-weight: bold;
+
-
}
+
-
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
 
-
content: ".";
 
-
display: block;
 
-
height: 0;
 
-
clear: both;
 
-
visibility: hidden;
 
-
}
 
-
.chromestyle ul{
+
<style type="text/css">
-
border: 1px solid #BBB;
+
#navbar ul, #navbar li {  
-
width: 100%;
+
    list-style: none;
-
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
+
    list-style-position:inside;
-
padding: 4px 0;
+
    margin:0px 0px;
-
margin: 0;
+
    padding:0;
-
text-align: center; /*set value to "left", "center", or "right"*/
+
}
}
-
.chromestyle ul li{
+
#navbar ul {
-
display: inline;
+
    display:none;
 +
    position:absolute;
 +
    left:0px;
 +
    width:100%;
 +
    background-color:#0736A4;
}
}
-
.chromestyle ul li a{
 
-
color: #494949;
 
-
padding: 4px 7px;
 
-
margin: 0;
 
-
text-decoration: none;
 
-
border-right: 1px solid #DADADA;
 
-
}
 
-
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
+
#navbar li{
-
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
+
    float:left;
 +
    padding:10px 0px;
 +
    position:relative;
 +
    width:14%; /*16.66%*/
}
}
-
/* ######### Style for Drop Down Menu ######### */
+
#navbar > li >ul {
-
 
+
    margin: 10px 0px;
-
.dropmenudiv{
+
-
position:absolute;
+
-
top: 0;
+
-
border: 1px solid #BBB; /*THEME CHANGE HERE*/
+
-
border-bottom-width: 0;
+
-
font:normal 12px Verdana;
+
-
line-height:18px;
+
-
z-index:100;
+
-
background-color: white;
+
-
width: 200px;
+
-
visibility: hidden;
+
-
 
+
}
}
-
 
+
#navbar {
-
.dropmenudiv a{
+
    text-align:center;
-
width: auto;
+
    /*height: 43px;*/
-
display: block;
+
    background-color:#0736A4;
-
text-indent: 3px;
+
    margin: 0px 0px 40px 0px;
-
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
+
-
padding: 2px 0;
+
-
text-decoration: none;
+
-
font-weight: bold;
+
-
color: black;
+
}
}
-
* html .dropmenudiv a{ /*IE only hack*/
+
#navbar a {
-
width: 100%;
+
    text-decoration:none;
 +
    color:white;
 +
    /*font-family:raleway;*/
 +
    font-size:16px;
}
}
-
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
+
#navbar li li {
-
background-color: #F0F0F0;
+
    width:100%;
}
}
</style>
</style>
 +
</head>
</head>
<body>
<body>
 +
<script>
-
<div class="chromestyle" id="chromemenu">
+
$(document).ready(function(){
 +
  $('#navbar > li').hover(function() {
 +
$(this).find('ul').slideToggle("slow");
 +
});
 +
 
 +
 
 +
$('#navbar > li > ul > li').mouseover(function(){
 +
  $(this).css("background-color","#0730D3");
 +
});
 +
 
 +
$('#navbar li').hover(function(){
 +
  $(this).css("background-color","#0736A4");
 +
});
 +
 
 +
 
 +
$('#navbar > li > a').hover(function(){$(this).parent().css("background-color","#0730D3");}, function(){$(this).parent().css("background-color","#0736A4");});
 +
});
 +
  </script>
 +
 
 +
<!-- 0736A4 is duke blue -->
 +
 
 +
 
 +
<ul id="navbar">
 +
        <li><a href="https://2014.igem.org/Team:Duke">Home</a></li>
 +
        <li><a href="https://2014.igem.org/Team:Duke/Team">Team</a>
<ul>
<ul>
-
<li><a href="http://www.dynamicdrive.com">Home</a></li>
+
                <li><a href="https://2014.igem.org/Team:Duke/Team">About Us</a></li>
-
<li><a href="#" rel="dropmenu1">Resources</a></li>
+
                <li><a href="https://igem.org/Team.cgi?year=2014&amp;team_name=Duke">Official Team Profile</a></li>
-
<li><a href="#" rel="dropmenu2">News</a></li>
+
                <li><a href="https://2014.igem.org/Team:Duke/Safety">Photo Gallery</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke">Attributions</a></li>          
</ul>
</ul>
-
</div>
+
        </li>    
-
 
+
        <li><a href="https://2014.igem.org/Team:Duke/Project">Project</a>
-
<!--1st drop down menu -->  
+
<ul>
-
<div id="dropmenu1" class="dropmenudiv">
+
  <li><a href="https://2014.igem.org/Team:Duke/Project#background">Background</a></li>             
-
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
+
                <li><a href="https://2014.igem.org/Team:Duke/Project#summary">Summary</a></li>             
-
<a href="http://www.cssdrive.com">CSS Drive</a>
+
  <li><a href="https://2014.igem.org/Team:Duke">Results</a></li>       
-
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
+
  <li><a href="https://2014.igem.org/Team:Duke">Future Steps</a></li>           
-
</div>
+
   
 +
</ul>
 +
      </li>
 +
      <li><a href="https://2014.igem.org/Team:Duke/Notebook">Notebook</a>
 +
<ul>
 +
                <li><a href="https://2014.igem.org/Team:Duke/Notebook">Overview</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke">Month</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke">Month</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke">Month</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke">Month</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke">Month</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke">Month</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke">Month</a></li>             
 +
        <li><a href="https://2014.igem.org/Team:Duke/Notebook/Protocols">Protocols</a></li>           
 +
</ul>
 +
      </li>
 +
      <li><a href="https://2014.igem.org/Team:Duke">Policy and Practice</a>
 +
        <ul>
 +
                <li><a href="https://2014.igem.org/Team:Duke">3D Printing</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke">House Course</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke">NCSSM Team</a></li>             
 +
        </ul>
 +
      </li>       
 +
      <li><a href="https://2014.igem.org/Team:Duke/Safety">Safety</a></li>     
 +
      <li><a href="https://2014.igem.org/"><img src = "https://static.igem.org/mediawiki/2014/1/1a/Mattigemlogowhite.png" height="17px"></a></li>    
 +
<div style="clear: both;"></div>
 +
</ul>
-
<!--2nd drop down menu -->
 
-
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
 
-
<a href="http://www.cnn.com/">CNN</a>
 
-
<a href="http://www.msnbc.com">MSNBC</a>
 
-
<a href="http://news.bbc.co.uk">BBC News</a>
 
-
</div>
 
-
<script type="text/javascript">
 
-
cssdropdown.startchrome("chromemenu")
 
-
</script>
 
</body>
</body>
</html>
</html>

Latest revision as of 14:41, 16 October 2014

Retrieved from "http://2014.igem.org/Template:Team:DukeMBar/CSS"