Test
From 2010.igem.org
(Difference between revisions)
(Removing all content from page) |
|||
Line 1: | Line 1: | ||
+ | __NOTOC__ | ||
+ | <html> | ||
+ | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> | ||
+ | <script> | ||
+ | $(document).ready(function(){ | ||
+ | $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav | ||
+ | $("ul.topnav li a") .mouseover(function() { //When trigger is clicked... | ||
+ | //Following events are applied to the subnav itself (moving subnav up and down) | ||
+ | $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click | ||
+ | $(this).parent().hover(function() { | ||
+ | }, function(){ | ||
+ | $(this).parent().find("ul.subnav").slideUp('medium'); //When the mouse hovers out of the subnav, move it back up | ||
+ | }); | ||
+ | //Following events are applied to the trigger (Hover events for the trigger) | ||
+ | }).hover(function() { | ||
+ | $(this).addClass("subhover"); //On hover over, add class "subhover" | ||
+ | }, function(){ //On Hover Out | ||
+ | $(this).removeClass("subhover"); //On hover out, remove class "subhover" | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | <style type="text/css"> | ||
+ | body { | ||
+ | margin: 0; padding: 0; | ||
+ | font: 10px normal Arial, Helvetica, sans-serif; | ||
+ | background: url(bg.gif); | ||
+ | background-repeat:repeat-x; | ||
+ | background-position:top center; | ||
+ | background-attachment:fixed; | ||
+ | |||
+ | } | ||
+ | .container { | ||
+ | min-height:650px; | ||
+ | height:auto !important; | ||
+ | height:650px; | ||
+ | width: 960px; | ||
+ | margin: 0 auto; | ||
+ | position: relative; | ||
+ | background:url(body_bg.gif) repeat-x; | ||
+ | } | ||
+ | #header { | ||
+ | background: url(header_bg1.gif) no-repeat right top; | ||
+ | padding-top: 120px; | ||
+ | } | ||
+ | |||
+ | .contents { | ||
+ | min-height:495px; | ||
+ | height:auto !important; | ||
+ | height:495px; | ||
+ | width: 918px; | ||
+ | margin: 0 auto; | ||
+ | padding-top:15px; | ||
+ | padding-left:20px; | ||
+ | padding-right:20px; | ||
+ | position: relative; | ||
+ | margin:35px auto 0; | ||
+ | background-color: #e5e5e5; | ||
+ | font: 13px normal Arial, Helvetica, sans-serif; | ||
+ | border-left:1px solid #000000; | ||
+ | border-right:1px solid #000000; | ||
+ | z-index:-1; | ||
+ | } | ||
+ | |||
+ | .rounded { | ||
+ | position:absolute; | ||
+ | bottom:0; | ||
+ | left:0; | ||
+ | width: 960px; | ||
+ | margin: 0 auto; | ||
+ | position: relative; | ||
+ | background: url(rounded.gif) no-repeat; | ||
+ | height:11px; | ||
+ | z-index:-1; | ||
+ | } | ||
+ | #footer{ | ||
+ | color: #003300; | ||
+ | font-size: 9px; | ||
+ | margin-top:10px; | ||
+ | font-family: Verdana, Geneva, Arial, sans-serif; | ||
+ | text-align: center; | ||
+ | //position: absolute; | ||
+ | //bottom: 0px; | ||
+ | //left: 0px; | ||
+ | width: 100%; | ||
+ | height: 18px | ||
+ | } | ||
+ | ul.topnav { | ||
+ | list-style: none; | ||
+ | padding: 0 20px; | ||
+ | margin: 0; | ||
+ | float: right; | ||
+ | z-index:1000; | ||
+ | /*width: 920px;*/ | ||
+ | background: #222; | ||
+ | font-size: 1.2em; | ||
+ | background: url(topnav_bg.gif) repeat-x; | ||
+ | } | ||
+ | ul.topnav li { | ||
+ | float: left; | ||
+ | margin: 0; | ||
+ | padding: 0 30px 0 0; | ||
+ | position: relative; /*--Declare X and Y axis base--*/ | ||
+ | } | ||
+ | ul.topnav li a{ | ||
+ | padding: 10px 5px; | ||
+ | color: #fff; | ||
+ | display: block; | ||
+ | text-decoration: none; | ||
+ | float: left; | ||
+ | } | ||
+ | ul.topnav li a:hover{ | ||
+ | background: url(topnav_hover.gif) no-repeat center top; | ||
+ | } | ||
+ | ul.topnav li span { /*--Drop down trigger styles--*/ | ||
+ | width: 17px; | ||
+ | height: 35px; | ||
+ | float: left; | ||
+ | background: url(subnav_btn.gif) no-repeat center top; | ||
+ | } | ||
+ | ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/ | ||
+ | ul.topnav li ul.subnav { | ||
+ | list-style: none; | ||
+ | position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/ | ||
+ | left: 0; top: 35px; | ||
+ | background: #333; | ||
+ | margin: 0; padding: 0; | ||
+ | display: none; | ||
+ | float: left; | ||
+ | width: 150px; | ||
+ | -moz-border-radius-bottomleft: 5px; | ||
+ | -moz-border-radius-bottomright: 5px; | ||
+ | -webkit-border-bottom-left-radius: 5px; | ||
+ | -webkit-border-bottom-right-radius: 5px; | ||
+ | border: 1px solid #111; | ||
+ | } | ||
+ | ul.topnav li ul.subnav li{ | ||
+ | margin: 0; padding: 0; | ||
+ | border-top: 1px solid #252525; /*--Create bevel effect--*/ | ||
+ | border-bottom: 1px solid #444; /*--Create bevel effect--*/ | ||
+ | clear: both; | ||
+ | width: 150px; | ||
+ | } | ||
+ | html ul.topnav li ul.subnav li a { | ||
+ | float: left; | ||
+ | width: 125px; | ||
+ | background: #333 url(dropdown_linkbg.gif) no-repeat 10px center; | ||
+ | padding-left: 20px; | ||
+ | } | ||
+ | html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/ | ||
+ | background: #222 url(dropdown_linkbg.gif) no-repeat 10px center; | ||
+ | } | ||
+ | #header img { | ||
+ | margin: 20px 0 10px; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | <div class="container"> | ||
+ | |||
+ | <div id="header"> | ||
+ | <ul class="topnav"> | ||
+ | <li><a href="index.html">Home</a></li> | ||
+ | <li> | ||
+ | <a href="research.html">Research</a> | ||
+ | <ul class="subnav"> | ||
+ | <li><a href="#">Research Link1</a></li> | ||
+ | <li><a href="#">Research Link2</a></li> | ||
+ | <li><a href="#">Research Link3</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="people.html">People</a> | ||
+ | <ul class="subnav"> | ||
+ | <li><a href="#">Hyun-Joo Nam</a></li> | ||
+ | <li><a href="#">Robel Tefe</a></li> | ||
+ | <li><a href="#">Lagnajeet Pradhan</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="publications.html">Publications</a></li> | ||
+ | <li><a href="teaching.html">Teaching</a> | ||
+ | <ul class="subnav"> | ||
+ | <li><a href="#">Subject1</a></li> | ||
+ | <li><a href="#">Subject2</a></li> | ||
+ | <li><a href="#">Etc</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="about_us.html">About Us</a> | ||
+ | <ul class="subnav"> | ||
+ | <li><a href="#">Contact Info</a></li> | ||
+ | <li><a href="#">Laboratory</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div class='contents'> | ||
+ | Home Page. | ||
+ | </div> | ||
+ | <div class="rounded"></div> | ||
+ | </div> |
Revision as of 00:34, 28 October 2010