Team:Queens Canada/Notebook/Week3

From 2012.igem.org

(Difference between revisions)
Line 2: Line 2:
<html>
<html>
<head>
<head>
 +
<script type="text/javascript" src="https://sites.google.com/a/qgemteam.com/qgem3/jquery-1.2.3.js"></script>
 +
<script type="text/javascript" src="https://sites.google.com/a/qgemteam.com/qgem3/jquery.easing.1.3.js"></script>
 +
<script type="text/javascript" src="https://sites.google.com/a/qgemteam.com/qgem3/jquery.kwicks-1.5.1.js"></script>
 +
<script type="text/javascript">
 +
$().ready(function() {
 +
$('.kwicks').kwicks({
 +
max : 200,
 +
duration: 800, 
 +
easing: 'easeOutQuint'
 +
});
 +
});
 +
</script>
<style type="text/css">
<style type="text/css">
-
 
-
 
#NotebookNav .menu .primary-menu #w3 a{
#NotebookNav .menu .primary-menu #w3 a{
     background: none repeat scroll 0 0 #00438F;
     background: none repeat scroll 0 0 #00438F;
Line 11: Line 21:
     background: none repeat scroll 0 0 #00438F;
     background: none repeat scroll 0 0 #00438F;
}
}
 +
.kwicks {
 +
list-style: none;
 +
position: relative;
 +
margin: 0;
 +
padding: 0;
 +
width:840px;
 +
height:50px;
 +
z-index:2;
 +
}
 +
.kwicks li {
 +
display: block;
 +
float: left;
 +
overflow: hidden;
 +
padding: 0;
 +
cursor: pointer;
 +
width: 100px;
 +
height: 35px;
 +
z-index:2;
 +
cursor:pointer;
 +
border-left-width: 1px;
 +
border-left-style: solid;
 +
border-left-color: #FF9933;
 +
}
 +
.kwicks li a {
 +
background-image:url(images/sprites_menu.png);
 +
background-repeat:no-repeat;
 +
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial;
 +
font-size: 14px;
 +
letter-spacing: -0.07em;
 +
color: #AA0000;
 +
height: 40px;
 +
outline:none;
 +
display:block;
 +
z-index:100;
 +
cursor:pointer;
 +
text-transform: uppercase;
 +
font-weight: bold;
 +
margin-top: -3px;
 +
margin-left: 5px;
 +
text-decoration: none;
 +
}
 +
.kwicks li h3 {
 +
position: absolute;
 +
width: 120px;
 +
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial;
 +
font-size: 10px;
 +
color: #FF6600;
 +
letter-spacing: -0.02em;
 +
outline:none;
 +
z-index:0;
 +
cursor:pointer;
 +
text-transform: uppercase;
 +
font-weight: normal;
 +
margin-left: 5px;
 +
text-decoration: none;
 +
left: 0px;
 +
top: 15px;
 +
right: 0px;
 +
bottom: 0px;
 +
}
 +
#kwick_1, #kwick_2, #kwick_3, #kwick_4, #kwick_5, #kwick_6, #kwick_7 {
 +
margin: 0pt;
 +
overflow: hidden;
 +
position: absolute;
 +
display: block;
 +
width: 120px;
 +
}
 +
#kwick_1 {
 +
left: 0px;
 +
border: none;
 +
}
 +
#kwick_2 {
 +
left: 120px;
 +
}
 +
#kwick_3 {
 +
left: 240px;
 +
}
 +
#kwick_4 {
 +
left: 360px;
 +
}
 +
#kwick_5 {
 +
left: 480px;
 +
}
 +
#kwick_6 {
 +
left: 600px;
 +
}
 +
#kwick_7 {
 +
right: 0px;
 +
}
 +
#kwick_1 a {
 +
background-position:0px 0px;
 +
}
 +
.kwicks a:hover, .kwicks #active {
 +
color: #3399FF;
 +
}
 +
.kwicks li a:hover h3, .kwicks li #active h3 {
 +
color: #999999;
 +
}
 +
#kwick_2 a {
 +
background-position:0px -50px;
 +
}
 +
#kwick_3 a {
 +
background-position:0px -192px;
 +
}
 +
#kwick_4 a {
 +
background-position:0px -100px;
 +
}
 +
#kwick_5 a {
 +
background-position:0px -150px;
 +
}
 +
#kwick_6 a {
 +
background-position:0px -250px;
 +
}
 +
#kwick_7 a {
 +
background-position:0px -300px;
 +
}
 +
</style>
</style>
 +
</head>
</head>
<body>
<body>
 +
<div class="kwicks_container">
 +
  <ul class="kwicks">
 +
  <li id="kwick_1">
 +
  <a href="http://aext.net/">Home
 +
  <h3>Front page</h3>
 +
    </a>
 +
  </li>
 +
  <li id="kwick_2">
 +
  <a href="http://aext.net/category/css/">CSS & XHTML
 +
  <h3>Makeup web page</h3>
 +
    </a>
 +
  </li>
 +
  <li id="kwick_3">
 +
  <a href="http://aext.net/category/java/">Java
 +
  <h3>Learning Java</h3>
 +
    </a>
 +
  </li>
 +
  <li id="kwick_4">
 +
  <a href="http://aext.net/category/others">Others
 +
  <h3>In the other hand</h3>
 +
    </a>
 +
  </li>
 +
  <li id="kwick_5">
 +
  <a href="http://aext.net/category/php/">PHP
 +
  <h3>PHP Programming</h3>
 +
    </a>
 +
  </li>
 +
  <li id="kwick_6">
 +
  <a href="http://aext.net/category/resources/">Resources
 +
  <h3>Resources for Web Developers</h3>
 +
    </a>
 +
  </li>
 +
  <li id="kwick_7">
 +
  <a href="http://aext.net/category/theme-layout/">Themes
 +
  <h3>Bloggers - Wordpress Themes</h3>
 +
    </a>
 +
  </li>
 +
  </ul>
 +
</div><br />
 +
<br />
</body>
</body>

Revision as of 19:43, 28 May 2012
Control


Retrieved from "http://2012.igem.org/Team:Queens_Canada/Notebook/Week3"