Template:Team:DukeMenu/CSS

From 2014.igem.org

(Difference between revisions)
 
(61 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 IS FOR THE MENU-BAR-->
 
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-
<style media="screen" type="text/css">
+
<head>
-
/* Makes the square buttons for the menu */     
+
 
-
.sq-menu {
+
 
-
     display:block;
+
<style type="text/css">
-
     height:50px;
+
#navbar ul, #navbar li {
-
     border:none;
+
    list-style: none;
-
     line-height:50px;
+
     list-style-position:inside;
-
     color:#f5f5f5;
+
     margin:0px 0px;
 +
    padding:0;
 +
}
 +
 
 +
#navbar img {
 +
width:25%;
 +
height:25%;
 +
}
 +
 
 +
#navbar ul  {
 +
     display:none;
 +
     position:absolute;
 +
     left:0px;
 +
    width:100%;
 +
    background-color:#0736A4;
 +
}
 +
 
 +
 
 +
#navbar li{
 +
    float:left;
 +
    padding:10px 0px;
 +
    position:relative;
 +
    width:12.5%; /*originally 16.66%*/
 +
}
 +
 
 +
#navbar > li >ul {
 +
    margin: 10px 0px;
 +
}
 +
 
 +
#navbar {
     text-align:center;
     text-align:center;
 +
    height: 43px; /*43px originally*/
 +
    background-color:#0736A4;
 +
    margin: 0px 0px 40px 0px;
 +
    z-index:51;
 +
}
 +
 +
#navbar a {
     text-decoration:none;
     text-decoration:none;
-
     opacity: 1;
+
     color:white;
-
     background: #0736A4;
+
     /*font-family:raleway;*/
     font-size:16px;
     font-size:16px;
-
    font-weight:bold;
 
-
    overflow:hidden;
 
-
    -webkit-transition: all 0.5s ease;
 
-
    -moz-transition: all 0.5s ease;
 
-
    -o-transition: all 0.5s ease;
 
-
/*margins must be half of the change in size*/   
 
-
    margin: 0px;
 
-
    line-height:200%;
 
}
}
-
.sq-menu:hover {
+
#navbar li li {
-
     background-color: #0000ff;
+
     width:100%;
-
    opacity: 1;
+
-
/* Glow effect */
+
-
  -webkit-box-shadow: 0px 0px 20px rgba(7, 54, 164, 0);
+
-
  -moz-box-shadow: 0px 0px 20px rgba(7, 54, 164, 0;
+
-
  box-shadow: 0px 0px 20px rgba(7, 54, 164, 0);
+
}
}
 +
</style>
-
.banner--clone{position:fixed;top:0;left:0;background:#c95a5d;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.banner--stick{-webkit-transform:translateY(0%);-ms-transform:translateY(0%);transform:translateY(0%)}
 
-
*{-webkit-box-sizing:border-box;-mox-box-sizing:border-box;box-sizing:border-box}html{line-height:1.6;font-family:'Open Sans', 'Helvetica', sans-serif}a{text-decoration:none;color:#c95a5d;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}a:hover{color:#7C2B2D}.lead{font-size:18px;margin-bottom:60px}.btn{border:2px solid #fff;border-radius:6px;font-weight:bold;text-transform:uppercase;padding:10px;text-shadow:none !important}.btn:hover{background:#fff;color:#7C2B2D}.banner{background:#c95a5d;border-bottom:1px solid rgba(255,255,255,0.1);height:70px;width:100%;color:#fff}.banner a{color:#fff}.banner a:hover{color:#7C2B2D}.logo{float:left;margin:0;font-size:20px;line-height:70px}.nav{height:40px;padding:0;margin:15px 0 0;float:right}.nav__item{height:40px;line-height:40px;padding:0;margin-left:10px;display:inline-block}.nav__item--btn{display:inline-block;padding:0 10pxi;font-size:14px;line-height:38px;padding:0 20px;width:auto}.hero{background:#c95a5d;color:#fff;text-align:center;margin-bottom:60px;overflow:hidden;padding:60px;text-shadow:0 1px 1px rgba(0,0,0,0.3)}.hero__title{font-size:72px;margin:0 0 10px}.hero__snippet{font-size:32px;font-style:italic;margin:0 0 40px}.hero__btn{border-color:#fff;color:#fff;padding:10px 0;width:160px;display:inline-block}.btn-list{list-style:none;margin:0;padding:0}.btn-list__item{display:inline-block;margin:auto 5px}.container{width:90%;max-width:800px;margin:auto}footer{margin-top:60px;color:#888;border-top:1px solid #eee;font-size:14px}footer .top{float:right}
 
-
 
-
</style>
 
</head>
</head>
-
 
<body>
<body>
-
<!--width/height of table must equal the sq-menu attributes. consider changing the widths to percentages -->
+
<script>
-
<div id="menu">
+
 
-
<table width="100%" align="center">
+
$(document).ready(function(){
-
<tr height="50px">
+
  $('#navbar > li').hover(function() {
-
<td width="50px"><a href="https://2014.igem.org/Team:Duke" class="sq-menu"> <img src="https://static.igem.org/mediawiki/2014/a/aa/Homeicon.png" width="50px" height="50px"  /></a></td>
+
$(this).find('ul').slideToggle("slow");
-
<td width="200px"><a class="sq-menu" href="https://2014.igem.org/Team:Duke">Team</a></td>
+
});
-
<td width="200px"><a class="sq-menu" href="https://igem.org/Team.cgi">Team Profile</a></td>
+
 
-
<td width="200px"><a class="sq-menu" href="https://2014.igem.org/Team:Duke">Project</a></td>
+
 
-
<td width="200px"><a class="sq-menu" href="https://2014.igem.org/Team:Duke">Parts</a></td>
+
$('#navbar > li > ul > li').mouseover(function(){
-
<td width="200px"><a class="sq-menu" href="https://2014.igem.org/Team:Duke">Modeling</a></td>
+
  $(this).css("background-color","#0730D3");
-
<td width="200px"><a class="sq-menu" href="https://2014.igem.org/Team:Duke">Notebook</a></td>
+
});
-
<td width="200px"><a class="sq-menu" href="https://2014.igem.org/Team:Duke">Safety</a></td>
+
 
-
<td width="200px"><a class="sq-menu" href="https://2014.igem.org/Team:Duke">Attributions</a></td>
+
$('#navbar li').hover(function(){
-
<td width="100px"><a class="sq-menu" href="https://2014.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2014/1/1a/Mattigemlogowhite.png " alt="Duke iGEM" height="60px" width="60px" /></a></td>
+
  $(this).css("background-color","#0736A4");
-
</tr>
+
});
-
</table>
+
 
-
</div>
+
 
 +
$('#navbar > li > a').hover(function(){$(this).parent().css("background-color","#0730D3");}, function(){$(this).parent().css("background-color","#0736A4");});
 +
});
 +
  </script>
-
<header class="banner">
+
<!-- 0736A4 is duke blue -->
-
        <nav class="container">
+
-
            <h1 class="logo">Headhesive.js</h1>
+
-
            <ul class="nav">
+
-
                <li class="nav__item"><a href="https://twitter.com/markgdyr">@markgdyr</a></li>
+
-
            </ul>
+
-
        </nav>
+
-
    </header>
+
-
    <script type="text/javascript" src="/labs/headhesive/js/headhesive.min.js"></script>
+
<ul id="navbar">
-
     <script>
+
        <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>
 +
                <li><a href="https://2014.igem.org/Team:Duke/Team">About Us</a></li>
 +
                <li><a href="https://igem.org/Team.cgi?year=2014&amp;team_name=Duke">Official Team Profile</a></li>
 +
                <li><a href="https://2014.igem.org/Team:Duke/Team/Gallery">Photo Gallery</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke/Team/Attributions">Attributions</a></li>           
 +
</ul>
 +
        </li>     
 +
        <li><a href="https://2014.igem.org/Team:Duke/Project">Project</a>
 +
<ul>
 +
  <li><a href="https://2014.igem.org/Team:Duke/Project#background">Background</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke/Project#summary">Summary</a></li>
 +
              <li><a href="https://2014.igem.org/Team:Duke/Modeling">Modeling</a></li>
 +
  <li><a href="https://2014.igem.org/Team:Duke/Project#results">Results</a></li>       
 +
  <li><a href="https://2014.igem.org/Team:Duke/Project#future">Future Directions</a></li>           
 +
      
 +
</ul>
 +
      </li>
 +
      <li><a href="https://2014.igem.org/Team:Duke/Parts">Parts</a></li>
 +
      <li><a href="https://2014.igem.org/Team:Duke/Notebook/Overview">Notebook</a>
 +
<ul>
 +
                <li><a href="https://2014.igem.org/Team:Duke/Notebook/Overview">Overview</a></li>
 +
                <li><a href="https://2014.igem.org/Team:Duke/Notebook/Months">Notebook by 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">Policy and Practice</a>
 +
        <ul>
 +
                <li><a href="https://2014.igem.org/Team:Duke/Policy#threed">3D Printing</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke/Policy#hoco">House Course</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke/Policy#smath">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"></a></li>    
-
        // Set options
+
<div style="clear: both;"></div>
-
        var options = {
+
</ul>
-
            offset: '#showHere',
+
-
            classes: {
+
-
                clone:  'banner--clone',
+
-
                stick:  'banner--stick',
+
-
                unstick: 'banner--unstick'
+
-
            }
+
-
        };
+
-
        // Initialise with options
 
-
        var banner = new Headhesive('.banner', options);
 
-
        // Headhesive destroy
 
-
        // banner.destroy();
 
-
    </script>
 
</body>
</body>
</html>
</html>

Latest revision as of 02:49, 18 October 2014

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