Template:Queens Canada/Header

From 2012.igem.org

(Difference between revisions)
Line 4: Line 4:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="http://2012.igem.org/Team:Queens_Canada/Javascript/Smoothscroll?action=raw&ctype=text/js"></script>  
<script type="text/javascript" src="http://2012.igem.org/Team:Queens_Canada/Javascript/Smoothscroll?action=raw&ctype=text/js"></script>  
 +
<style type="text/css">
<style type="text/css">
Line 488: Line 489:
display:inline;
display:inline;
float:right;
float:right;
 +
 +
}
 +
ul#submenu {
 +
    position: fixed;
 +
    margin: 0px;
 +
    padding: 0px;
 +
    top: 0px;
 +
    right: 200px;
 +
    list-style: none;
 +
    z-index:999999;
 +
}
 +
ul#submenu li {
 +
    display:inline;
 +
    float:left;
 +
    width:100px;
 +
    margin-left:1px;
 +
 +
}
 +
ul#submenu li a {
 +
    display: block;
 +
    font-weight:bold;
 +
    text-shadow:1px 1px 1px #fff;
 +
    float:left;
 +
    width: 100px;
 +
    height: 35px;
 +
    color:#603d05;
 +
    background:transparent url(item.png) no-repeat bottom right;
 +
    text-decoration:none;
 +
    text-align:center;
 +
    padding-top:80px;
 +
    margin-top: -40px;
 +
    cursor:pointer;
 +
 +
}
 +
ul#submenu li a:hover{
}
}
Line 519: Line 555:
</div>
</div>
 +
<div id="submenu container">
 +
        <ul id="submenu">
 +
            <li class="home"><a title="Home">Home</a></li>
 +
            <li class="about"><a title="About">About</a></li>
 +
            <li class="search"><a title="Search">Search</a></li>
 +
            <li class="photos"><a title="Photos">Photos</a></li>
 +
            <li class="contact"><a title="Contact">Contact</a></li>
 +
        </ul>
 +
</div>
 +
<script type="text/javascript">
 +
            $(function() {
 +
                var d=300;
 +
                $('#submenu a').each(function(){
 +
                    var $this = $(this);
 +
var r=Math.floor(Math.random()*41)-20;
 +
                    $this.css({'-moz-transform':'rotate('+r+'deg)','-webkit-transform':'rotate('+r+'deg)','transform':'rotate('+r+'deg)'});
 +
                    $('#content').css({'-moz-transform':'rotate('+r+'deg)','-webkit-transform':'rotate('+r+'deg)','transform':'rotate('+r+'deg)'});
 +
                    $this.stop().animate({
 +
                        'marginTop':'-70px'                     
 +
                    },d+=150);
 +
                });
 +
                $('#submenu > li').hover(
 +
function () {
 +
var $this = $(this);
 +
$('a',$this).stop().animate({
 +
'marginTop':'-40px'
 +
},200);
 +
},
 +
function () {
 +
var $this = $(this);
 +
$('a',$this).stop().animate({
 +
'marginTop':'-70px'
 +
},200);
 +
}
 +
)
 +
            });
 +
        </script>
<a href="#top-section">
<a href="#top-section">
<div id="upbutton">
<div id="upbutton">

Revision as of 19:20, 12 June 2012

up