Team:UEA-JIC Norwich/Experiment

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<ul class="topnav"> 
+
#page-wrap {
-
    <li><a href="#">Home</a></li> 
+
         min-width: 960px; max-width: 1260px;
-
    <li> 
+
        margin: 0 auto; padding: 0 10px;
-
         <a href="#">Tutorials</a> 
+
        width:expression(document.body.clientWidth < 961? "960px" : document.body.clientWidth > 1261? "1260px" : "auto");
-
        <ul class="subnav"> 
+
-
            <li><a href="#">Sub Nav Link</a></li> 
+
-
            <li><a href="#">Sub Nav Link</a></li> 
+
-
        </ul> 
+
-
    </li> 
+
-
    <li> 
+
-
        <a href="#">Resources</a> 
+
-
        <ul class="subnav"> 
+
-
            <li><a href="#">Sub Nav Link</a></li> 
+
-
            <li><a href="#">Sub Nav Link</a></li> 
+
-
        </ul> 
+
-
    </li> 
+
-
    <li><a href="#">About Us</a></li> 
+
-
    <li><a href="#">Advertise</a></li> 
+
-
    <li><a href="#">Submit</a></li> 
+
-
    <li><a href="#">Contact Us</a></li> 
+
-
</ul> 
+
-
ul.topnav {
+
-
list-style: none;
+
-
padding: 0 20px;
+
-
margin: 0;
+
-
float: left;
+
-
width: 920px;
+
-
background: #222;
+
-
font-size: 1.2em;
+
-
background: url(topnav_bg.gif) repeat-x;
+
}
}
-
ul.topnav li {
+
#right-side {
-
float: left;
+
        float: right;
-
margin: 0;
+
        padding-top: 15px;
-
padding: 0 15px 0 0;
+
        }
-
position: relative; /*--Declare X and Y axis base for sub navigation--*/
+
        #right-side img {
 +
                border: 1px solid white;
 +
                vertical-align: middle;
 +
        }
 +
form#main-search {
 +
        display: inline;
 +
        position: relative;
 +
        padding-right: 10px;
 +
        }
 +
        form#main-search label {
 +
                display: none;
 +
        }
 +
        #search-button {
 +
                position: absolute;
 +
                right: 0px;
 +
                top: -6px;
 +
        }
 +
 
 +
#zone-bar ul li:hover {
 +
        background: url(images/zonebar-navleft.png) center left no-repeat;
}
}
-
ul.topnav li a{
+
#zone-bar ul li a:hover {
-
padding: 10px 5px;
+
        background: url(images/zonebar-navright.png) center right no-repeat;
-
color: #fff;
+
-
display: block;
+
-
text-decoration: none;
+
-
float: left;
+
}
}
-
ul.topnav li a:hover{
+
<li>
-
background: url(topnav_hover.gif) no-repeat center top;
+
        <a href="#"><span>
 +
                Science &nbsp;
 +
                <em class="opener-science">
 +
                        <img src="images/zonebar-downarrow.png" alt="dropdown" />
 +
                </em>
 +
        </span></a>
 +
        <ul class="sciencesublist">
 +
                <li><a href="#">Enviornment</a></li>
 +
                <li><a href="#">General Sciences</a></li>
 +
                <li><a href="#">Space</a></li>
 +
        </ul>
 +
</li>
 +
#zone-bar ul li ul {
 +
        display: none;
 +
        position: absolute;
 +
        top: 29px;
 +
        left: 0px;
 +
        width: 150px;
 +
        border: 1px solid #ccc;
 +
        background: white;
 +
        padding: 10px 0 0 0;
}
}
-
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: 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(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;
 
-
}
 
-
$(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 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" 
 
-
    }); 
 
-
 
 
-
});
 

Revision as of 09:43, 22 June 2011

  1. page-wrap { 
       min-width: 960px; max-width: 1260px;
       margin: 0 auto; padding: 0 10px;
       width:expression(document.body.clientWidth < 961? "960px" : document.body.clientWidth > 1261? "1260px" : "auto");

}

  1. right-side { 
       float: right;
       padding-top: 15px;
       }
       #right-side img {
               border: 1px solid white;
               vertical-align: middle;
       }

form#main-search { 

       display: inline;
       position: relative;
       padding-right: 10px;
       }
       form#main-search label {
               display: none;
       }
       #search-button {
               position: absolute;
               right: 0px;
               top: -6px;
       }
  1. zone-bar ul li:hover { 
       background: url(images/zonebar-navleft.png) center left no-repeat;

}

  1. zone-bar ul li a:hover { 
       background: url(images/zonebar-navright.png) center right no-repeat;

}

  • <a href="#"> Science   <img src="images/zonebar-downarrow.png" alt="dropdown" /> </a>
    • <a href="#">Enviornment</a>
    • <a href="#">General Sciences</a>
    • <a href="#">Space</a>

    </li>

    1. zone-bar ul li ul { 
           display: none;
       position: absolute;
       top: 29px;
       left: 0px;
       width: 150px;
       border: 1px solid #ccc;
       background: white;
       padding: 10px 0 0 0;

    }

    Retrieved from "http://2011.igem.org/Team:UEA-JIC_Norwich/Experiment"