Template:Team:DukeMenu/CSS

From 2014.igem.org

(Difference between revisions)
 
(44 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" />
 +
<head>
-
<style media="screen" type="text/css">
+
 
-
/* Makes the square buttons for the menu */     
+
<style type="text/css">
-
.sq-menu {
+
#navbar ul, #navbar li {  
-
     display:block;
+
     list-style: none;
-
    height:50px;
+
     list-style-position:inside;
-
    border:none;
+
     margin:0px 0px;
-
    line-height:50px;
+
     padding:0;
-
    color:#f5f5f5;
+
-
    text-align:center;
+
-
    text-decoration:none;
+
-
     opacity: 1;
+
-
    background: #0736A4;
+
-
    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 img {
-
    background-color: #0000ff;
+
width:25%;
-
    opacity: 1;
+
height:25%;
-
/* 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);
+
}
}
-
.menu { width:100%; margin:0 auto; z-index:0; }
+
#navbar ul  {
-
.menu li {
+
    display:none;
-
display:inline;
+
    position:absolute;
 +
    left:0px;
 +
    width:100%;
 +
    background-color:#0736A4;
}
}
-
#demo_top_wrapper { margin:0 0 20px 0; }
 
-
#demo_top { height:100px; padding:20px 0 0 0; }
 
-
#my_logo { font:70px Georgia, serif; }
 
-
 
-
/* our menu styles */
 
-
#sticky_nav_wrap { width:100%; height:50px; }
 
-
#sticky_navigation { width:100%; height:50px; background:url(trans-black-60.png); -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999; }
 
-
#sticky_navigation ul { list-style:none; margin:0; padding:5px; }
 
-
#sticky_navigation ul li { margin:0; padding:0; display:inline; }
 
-
#sticky_navigation ul li a { display:block; float:left; margin:0 0 0 5px; padding:0 20px; height:40px; line-height:40px; font-size:14px; font-family:Arial, serif; font-weight:bold; color:#ddd; background:#333; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }
 
-
#sticky_navigation ul li a:hover, #sticky_navigation ul li a.selected { color:#fff; background:#111; }
 
 +
#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;
 +
    height: 43px; /*43px originally*/
 +
    background-color:#0736A4;
 +
    margin: 0px 0px 40px 0px;
 +
    z-index:51;
 +
}
 +
 +
#navbar a {
 +
    text-decoration:none;
 +
    color:white;
 +
    /*font-family:raleway;*/
 +
    font-size:16px;
 +
}
 +
 +
#navbar li li {
 +
    width:100%;
 +
}
</style>
</style>
 +
 +
</head>
 +
 +
<body>
<script>
<script>
-
$(function() {
+
 
-
+
$(document).ready(function(){
-
    // grab the initial top offset of the navigation
+
  $('#navbar > li').hover(function() {
-
    var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
+
$(this).find('ul').slideToggle("slow");  
-
   
+
});
-
    // our function that decides weather the navigation bar should have "fixed" css position or not.
+
 
-
    var sticky_navigation = function(){
+
 
-
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top
+
$('#navbar > li > ul > li').mouseover(function(){
-
       
+
  $(this).css("background-color","#0730D3");
-
        // if we've scrolled more than the navigation, change its position to fixed to stick to top,
+
-
        // otherwise change it back to relative
+
-
        if (scroll_top > sticky_navigation_offset_top) {
+
-
            $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
+
-
        } else {
+
-
            $('#sticky_navigation').css({ 'position': 'relative' });
+
-
        } 
+
-
    };
+
-
   
+
-
    // run our function on load
+
-
    sticky_navigation();
+
-
   
+
-
    // and run it again every time you scroll
+
-
    $(window).scroll(function() {
+
-
        sticky_navigation();
+
-
    });
+
-
+
});
});
-
</script>
 
-
</head>
 
 +
$('#navbar li').hover(function(){
 +
  $(this).css("background-color","#0736A4");
 +
});
-
<body>
+
 
 +
$('#navbar > li > a').hover(function(){$(this).parent().css("background-color","#0730D3");}, function(){$(this).parent().css("background-color","#0736A4");});
 +
});
 +
  </script>
 +
 
 +
<!-- 0736A4 is duke blue -->
-
<!--learned to do the sticky from http://www.backslash.gr/content/blog/webdevelopment/6-navigation-menu-that-stays-on-top-with-jquery -->
+
<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>
 +
                <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>    
-
<div id="demo_top_wrapper">
+
<div style="clear: both;"></div>
-
+
</ul>
-
    <!-- this will be our navigation menu -->
+
-
    <div id="sticky_nav_wrap">
+
-
        <div id="sticky_navigation">
+
-
            <div class="menu">
+
-
                <!--width/height of table must equal the sq-menu attributes. consider changing the widths to percentages -->
+
-
<table width="100%" align="center">
+
-
<tr height="50px">
+
-
<td width="4%"><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>
+
-
<td width="11%"><a class="sq-menu" href="https://2014.igem.org/Team:Duke/Team">Team</a></td>
+
-
<td width="11%"><a class="sq-menu" href="https://igem.org/Team.cgi?year=2014&team_name=Duke">Team Profile</a></td>
+
-
<td width="11%"><a class="sq-menu" href="https://2014.igem.org/Team:Duke/Project">Project</a></td>
+
-
<td width="11%"><a class="sq-menu" href="https://2014.igem.org/Team:Duke/Parts">Parts</a></td>
+
-
<td width="11%"><a class="sq-menu" href="https://2014.igem.org/Team:Duke/Modeling">Modeling</a></td>
+
-
<td width="11%"><a class="sq-menu" href="https://2014.igem.org/Team:Duke/Notebook">Notebook</a></td>
+
-
<td width="11%"><a class="sq-menu" href="https://2014.igem.org/Team:Duke/Safety">Safety</a></td>
+
-
<td width="11%"><a class="sq-menu" href="https://2014.igem.org/Team:Duke/Attributions">Attributions</a></td>
+
-
<td width="8%"><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>
+
-
</tr>
+
-
</table>
+
-
            </div>
+
-
        </div>
+
-
    </div>
+
-
+
-
</div>
+
</body>
</body>
</html>
</html>

Latest revision as of 02:49, 18 October 2014

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