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