|
|
| (3 intermediate revisions not shown) |
| Line 197: |
Line 197: |
| | <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"> | | <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"> |
| | </script> | | </script> |
| - | <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
| |
| - | <!-- initialize the slideshow when the DOM is ready -->
| |
| - |
| |
| - | <script type="text/javascript">
| |
| - | $(document).ready(function() {
| |
| - | $('.slideshow').cycle({
| |
| - | fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
| |
| - | });
| |
| - |
| |
| - | //Here I am declaring the functions for the menu behavior "Miguel Leonardo"
| |
| - |
| |
| - | $("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 span").click(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('slow'); //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">
| |
| - | .container { position:relative; height: auto; width: 900px; margin:auto; z-index:1; background-color: rgba(255, 255, 255, 0.7)}
| |
| - | .header { position:inherit; height:158px; width: 900px; margin:auto; z-index:2; background-image:url(images/HEADER.jpg);/*Change this link with the one from iGEM*/
| |
| - | background-repeat:no-repeat;}
| |
| - | .menu {position: relative; height:auto; width: 900px; margin:auto; z-index:3;}
| |
| - | .menu1 {position: relative; height:auto; width: 900px; margin:auto; z-index:7;}
| |
| - | .intro {position: relative; height:auto; width: 900px; margin:auto; z-index:9;}
| |
| - | .content{position:inherit; height:auto; width: 850px; margin:auto; z-index:4; background-color:#CCF; background-repeat:no-repeat}
| |
| - | .content_logo{}
| |
| - | .footer{position:relative; height:auto; width: 900px; margin:auto; z-index:5; background-color:#000}
| |
| - | .bottom{position:relative; height:16px; width: 900px; margin:auto; z-index:6; background-image:url(images/bottom.png)/*Change this link with the one from iGEM*/}
| |
| - |
| |
| - | .slideshow { height:auto; width: 224px; margin-left:200px; margin-top:40px; position:relative}
| |
| - | .slideshow img { padding: 15px; border: 0px solid #ccc; background-color:transparent; }
| |
| - | body {
| |
| - | background-attachment:fixed;
| |
| - | background-image: url(images/Background.gif)/*Change this link with the one from iGEM*/;
| |
| - | background-repeat: no-repeat;
| |
| - | }
| |
| - |
| |
| - | ul.topnav {
| |
| - | list-style: none;
| |
| - | padding: 0 20px;
| |
| - | margin: 0;
| |
| - | float: left;
| |
| - | width: 900px;
| |
| - | background: #222;
| |
| - | font-size: 1.2em;
| |
| - | background: url(images/topnav_bg.gif)/*Change this link with the one from iGEM*/ no-repeat;
| |
| - | }
| |
| - | ul.topnav li {
| |
| - | float: left;
| |
| - | margin: 0;
| |
| - | padding: 0 15px 0 0;
| |
| - | position: relative; /*--Declare X and Y axis base for sub navigation--*/
| |
| - | }
| |
| - | ul.topnav li a{
| |
| - | padding: 10px 5px;
| |
| - | color: #fff;
| |
| - | display: block;
| |
| - | text-decoration: none;
| |
| - | float: left;
| |
| - | }
| |
| - | ul.topnav li a:hover{
| |
| - | background: url(images/topnav_hover.gif) no-repeat center top;
| |
| - | }
| |
| - | ul.topnav li span { /*--Drop down trigger styles--*/
| |
| - | width: 17px;
| |
| - | height: 35px;
| |
| - | float: left;
| |
| - | background: url(images/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: 170px;
| |
| - | 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: 170px;
| |
| - | }
| |
| - | html ul.topnav li ul.subnav li a {
| |
| - | float: left;
| |
| - | width: 145px;
| |
| - | background: #333 url(images/dropdown_linkbg.gif)/*Change this link with the one from iGEM*/ no-repeat 10px center;
| |
| - | padding-left: 20px;
| |
| - | }
| |
| - | html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
| |
| - | background: #222 url(images/dropdown_linkbg.gif)/*Change this link with the one from iGEM*/ no-repeat 10px center;
| |
| - | }
| |
| - |
| |
| - | body,td,th {
| |
| - | font-family: Arial, Helvetica, sans-serif;
| |
| - | }
| |
| - | </style>
| |
| - | <!-- include jQuery library -->
| |
| - | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
| |
| - |
| |
| - | <!-- include Cycle plugin -->
| |
| - | <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
| |
| | <script src="Scripts/swfobject_modified.js" type="text/javascript"></script> | | <script src="Scripts/swfobject_modified.js" type="text/javascript"></script> |
| | <!-- initialize the slideshow when the DOM is ready --> | | <!-- initialize the slideshow when the DOM is ready --> |
"
