Team:Ravenwood Raptors

From 2014hs.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
 
+
<head>
<link href='http://fonts.googleapis.com/css?family=Audiowide|Share+Tech+Mono' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Audiowide|Share+Tech+Mono' rel='stylesheet' type='text/css'>
 +
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 +
</head>
<style>
<style>
Line 29: Line 31:
/* Navigation */
/* Navigation */
-
#cssmenu {
 
-
background: #b9babd;
 
-
width: auto;
 
-
}
 
-
#cssmenu ul {
 
-
list-style: none;
 
-
margin: 0;
 
-
padding: 0;
 
-
line-height: 1;
 
-
display: block;
 
-
zoom: 1;
 
-
}
 
-
#cssmenu ul:after {
 
-
content: ' ';
 
-
display: block;
 
-
font-size: 0;
 
-
height: 0;
 
-
clear: both;
 
-
visibility: hidden;
 
-
}
 
-
#cssmenu ul li {
 
-
float: left;
 
-
display: block;
 
-
padding: 0;
 
-
}
 
-
#cssmenu ul li a {
 
-
color: #ffffff;
 
-
text-decoration: none;
 
-
display: block;
 
-
padding: 15px 25px;
 
-
font-family: 'Share Tech Mono', sans-serif;
 
-
font-weight: 700;
 
-
text-transform: uppercase;
 
-
font-size: 14px;
 
-
position: relative;
 
-
-webkit-transition: color .25s;
 
-
-moz-transition: color .25s;
 
-
-ms-transition: color .25s;
 
-
-o-transition: color .25s;
 
-
transition: color .25s;
 
-
}
 
-
#cssmenu ul li a:hover {
 
-
color: #ffffff;
 
-
}
 
-
#cssmenu ul li a:hover:before {
 
-
width: 100%;
 
-
}
 
-
#cssmenu ul li a:after {
 
-
content: '';
 
-
display: block;
 
-
position: absolute;
 
-
right: -3px;
 
-
top: 19px;
 
-
height: 6px;
 
-
width: 6px;
 
-
background: #ffffff;
 
-
opacity: .5;
 
-
}
 
-
#cssmenu ul li a:before {
 
-
content: '';
 
-
display: block;
 
-
position: absolute;
 
-
left: 0;
 
-
bottom: 0;
 
-
height: 3px;
 
-
width: 0;
 
-
background: #ffffff;
 
-
-webkit-transition: width .25s;
 
-
-moz-transition: width .25s;
 
-
-ms-transition: width .25s;
 
-
-o-transition: width .25s;
 
-
transition: width .25s;
 
-
}
 
-
#cssmenu ul li.last > a:after,
 
-
#cssmenu ul li:last-child > a:after {
 
-
display: none;
 
-
}
 
-
#cssmenu ul li.active a {
 
-
color: #ffffff;
 
-
}
 
-
#cssmenu ul li.active a:before {
 
-
width: 100%;
 
-
}
 
-
@media screen and (max-width: 768px) {
 
-
#cssmenu ul li {
 
-
float: none;
 
-
}
 
-
#cssmenu ul li a {
 
-
width: 100%;
 
-
-moz-box-sizing: border-box;
 
-
-webkit-box-sizing: border-box;
 
-
box-sizing: border-box;
 
-
}
 
-
#cssmenu ul li a:after {
 
-
display: none;
 
-
}
 
-
#cssmenu ul li a:before {
 
-
height: 1px;
 
-
background: #ffffff;
 
-
width: 100%;
 
-
opacity: .2;
 
-
}
 
-
#cssmenu ul li.last > a:before,
 
-
#cssmenu ul li:last-child > a:before {
 
-
display: none;
 
-
}
 
-
}
 
</style>
</style>
<body>
<body>
 +
 +
<!-- jQuery -->
 +
<script>
 +
$('#cssmenu').prepend('<div id="indicatorContainer"><div id="pIndicator"><div id="cIndicator"></div></div></div>');
 +
    var activeElement = $('#cssmenu>ul>li:first');
 +
 +
    $('#cssmenu>ul>li').each(function() {
 +
        if ($(this).hasClass('active')) {
 +
            activeElement = $(this);
 +
        }
 +
    });
 +
 +
 +
var posLeft = activeElement.position().left;
 +
var elementWidth = activeElement.width();
 +
posLeft = posLeft + elementWidth/2 -6;
 +
if (activeElement.hasClass('has-sub')) {
 +
posLeft -= 6;
 +
}
 +
 +
$('#cssmenu #pIndicator').css('left', posLeft);
 +
var element, leftPos, indicator = $('#cssmenu pIndicator');
 +
 +
$("#cssmenu>ul>li").hover(function() {
 +
        element = $(this);
 +
        var w = element.width();
 +
        if ($(this).hasClass('has-sub'))
 +
        {
 +
        leftPos = element.position().left + w/2 - 12;
 +
        }
 +
        else {
 +
        leftPos = element.position().left + w/2 - 6;
 +
        }
 +
 +
        $('#cssmenu #pIndicator').css('left', leftPos);
 +
    }
 +
    , function() {
 +
    $('#cssmenu #pIndicator').css('left', posLeft);
 +
    });
 +
 +
 +
$('#cssmenu>ul>.has-sub>ul').append('<div class="submenuArrow"></div>');
 +
$('#cssmenu>ul').children('.has-sub').each(function() {
 +
var posLeftArrow = $(this).width();
 +
posLeftArrow /= 2;
 +
posLeftArrow -= 12;
 +
$(this).find('.submenuArrow').css('left', posLeftArrow);
 +
 +
});
 +
 +
$('#cssmenu>ul').prepend('<li id="menu-button"><a>Menu</a></li>');
 +
$( "#menu-button" ).click(function(){
 +
    if ($(this).parent().hasClass('open')) {
 +
    $(this).parent().removeClass('open');
 +
    }
 +
    else {
 +
    $(this).parent().addClass('open');
 +
    }
 +
    });
 +
</script>
<!-- Logo -->
<!-- Logo -->
Line 145: Line 100:
<!-- Navigation -->
<!-- Navigation -->
-
<div id='cssmenu'>
+
 
-
<ul>
+
-
  <li class='active'><a href='https://2014hs.igem.org/Team:Ravenwood_Raptors'><span>Home</span></a></li>
+
-
  <li><a href='#'><span>Team</span></a></li>
+
-
  <li><a href='#'><span>Project</span></a></li>
+
-
  <li><a href='#'><span>Notebook</span></a></li>
+
-
  <li><a href='#'><span>Sponsors</span></a></li>
+
-
</ul>
+
-
</div>
+
</body>
</body>
</html>
</html>

Revision as of 15:34, 5 April 2014

Ravenwood Raptors

Retrieved from "http://2014hs.igem.org/Team:Ravenwood_Raptors"