Template:Team:UGA-Georgia/Templates/Header

From 2013.igem.org

(Difference between revisions)
m
m
 
(7 intermediate revisions not shown)
Line 160: Line 160:
}
}
</script>
</script>
 +
 +
<html>
 +
<head>
 +
<title>CSS: drop down menu example</title>
<style>
<style>
-
.ddcolortabs{
+
body {
-
padding: 0;
+
margin: 0;
-
width: 100%;
+
padding: 0;
-
background: transparent;
+
font: 60% Arial;
-
voice-family: "\"}\"";
+
background: #C0C0C0;
-
voice-family: inherit;
+
}
}
-
.ddcolortabs ul{
+
#navigation {
-
font: normal 11px Arial, Verdana, sans-serif;
+
margin: 0;
-
margin:0;
+
padding: 0 1em;
-
padding:0;
+
background: #000;
-
list-style:none;
+
height: 3em;
 +
list-style: none;
}
}
-
.ddcolortabs li{
+
#navigation > li {
-
display:inline;
+
float: left;
-
margin:0 2px 0 0;
+
height: 100%;
-
padding:0;
+
margin-right: 0.5em;
-
text-transform:uppercase;
+
padding: 0 0.6em;
}
}
-
 
+
#navigation > li > a {
-
.ddcolortabs a{
+
float: left;
-
float:left;
+
height: 100%;
-
color: white;
+
color: #F8F8F8;
-
background: black url(media/color_tabs_left.gif) no-repeat left top;
+
text-decoration: none;
-
margin:0 2px 0 0;
+
line-height: 3;
-
padding:0 0 1px 3px;
+
font-weight: bold;
-
text-decoration:none;
+
text-transform: uppercase;
-
letter-spacing: 1px;
+
}
}
-
.ddcolortabs a span{
+
#navigation > li > a:hover {
-
float:left;
+
color: red;
-
display:block;
+
text-decoration: underline;
-
background: transparent url(media/color_tabs_right.gif) no-repeat right top;
+
-
padding: 4px 8px 2px 7px;
+
}
}
-
.ddcolortabs a span{
+
#navigation > li.sub {
-
float:none;
+
position: relative;
}
}
-
.ddcolortabs a:hover{
+
#navigation > li.sub ul {
-
background-color: #591f20;
+
width: 10em;
 +
margin: 0;
 +
padding: 0.5em 0;
 +
list-style: none;
 +
background: #008000;
 +
position: absolute;
 +
top: -1000em;
}
}
-
.ddcolortabs a:hover span{
+
#navigation > li.sub ul li {
-
background-color: #591f20;
+
width: 90%;
 +
margin: 0 auto 0.3em auto;
}
}
-
.ddcolortabs .selected a, #ddcolortabs .selected a span{ /*currently selected tab*/
+
#navigation > li.sub ul li a {
-
background-color: #591f20;
+
height: 100%;
 +
display: block;
 +
padding: 0.4em;
 +
color: #fff;
 +
font-weight: bold;
 +
text-decoration: none;
}
}
-
.ddcolortabsline{
+
#navigation > li.sub ul li a:hover {
-
clear: both;
+
background: #008000;
-
padding: 0;
+
        color: #FF0000;
-
width: 100%;
+
text-decoration: underline;
-
height: 8px;
+
-
line-height: 8px;
+
-
background: black;
+
-
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
+
}
}
-
/* ######### Style for Drop Down Menu ######### */
+
#navigation > li.sub:hover ul {
-
 
+
top: 3em;
-
.dropmenudiv_a{
+
-
position:absolute;
+
-
top: 0;
+
-
border: 1px solid black; /*THEME CHANGE HERE*/
+
-
border-top-width: 8px; /*Top border width. Should match height of .ddcolortabsline above*/
+
-
border-bottom-width: 0;
+
-
font:normal 12px Arial;
+
-
line-height:18px;
+
-
z-index:100;
+
-
background-color: white;
+
-
width: 200px;
+
-
visibility: hidden;
+
}
}
 +
</style>
 +
</head>
-
.dropmenudiv_a a{
+
<body>
-
width: auto;
+
-
display: block;
+
-
text-indent: 5px;
+
-
border-top: 0 solid #678b3f;
+
-
border-bottom: 1px solid #678b3f; /*THEME CHANGE HERE*/
+
-
padding: 2px 0;
+
-
text-decoration: none;
+
-
color: black;
+
-
}
+
-
* html .dropmenudiv_a a{ /*IE only hack*/
+
<ul id="navigation">
-
width: 100%;
+
-
}
+
-
.dropmenudiv_a a:hover{ /*THEME CHANGE HERE*/
+
<li><a href="https://2013.igem.org/Team:UGA-Georgia">Home</a></li>
-
background-color: #8a3c3d;
+
<li><a href="https://2013.igem.org/Team:UGA-Georgia/Plan">Plan</a></li>
-
color: white;
+
<li><a href="https://2013.igem.org/Team:UGA-Georgia/Protocol">Protocols</a></li>
-
}
+
<li class="sub">
-
</style>
+
-
</head>
+
<a href="#">Notebook</a>
-
<!-- CSS for Drop Down Tabs Menu #1 -->
+
-
<link rel="stylesheet" type="text/css" href="ddcolortabs.css" />
+
<ul>
 +
 +
<li><a href="https://2013.igem.org/Team:UGA-Georgia/NotebookE.coli">E. coli</a></li>
 +
<li><a href="https://2013.igem.org/Team:UGA-Georgia/NotebookMethanococcus">Methanococcus</a></li>
 +
 +
</ul>
 +
 +
</li>
 +
<li><a href="https://2013.igem.org/Team:UGA-Georgia/Results">Results</a></li>
 +
<li><a href="https://2013.igem.org/Team:UGA-Georgia/Parts">Parts</a></li>
 +
<li><a href="https://2013.igem.org/Team:UGA-Georgia/Safety">Safety</a></li>
 +
<li class="sub">
 +
<a href="#">Outreach</a>
 +
 +
<ul>
 +
 +
<li><a href="https://2013.igem.org/Team:UGA-Georgia/Outreach/EngineeringSeminar">Engineering Seminar</a></li>
 +
<li><a href="https://2013.igem.org/Team:UGA-Georgia/Outreach/ClarkeMiddleSchool">Clarke Middle School</a></li>
 +
 +
</ul>
 +
 +
</li>
 +
<li><a href="https://2013.igem.org/Team:UGA-Georgia/humanpractice">Human Practice</a></li>
 +
<li class="sub">
 +
<a href="#">The Team</a>
 +
 +
<ul>
 +
 +
<li><a href="https://2013.igem.org/Team:UGA-Georgia/Team">Meet The Team</a></li>
 +
<li><a href="https://igem.org/Team.cgi">Official Team Profile</a></li>
 +
 +
</ul>
 +
 +
</li>
 +
<li><a href="https://2013.igem.org/Team:UGA-Georgia/Acknowledgements">Acknowledgements</a></li>
 +
</ul>
-
<div id="colortab" class="ddcolortabs">
+
</body>
-
<ul>
+
-
<li><a href="https://2013.igem.org/Team:UGA-Georgia" title="Home"><span>Home</span></a></li>
+
-
<li><a href="https://2013.igem.org/Team:UGA-Georgia/Plan" title="Plan of the biology" rel="dropmenu1_a"><span>Plan</span></a></li>
+
-
<li><a href="https://2013.igem.org/Team:UGA-Georgia/Protocol" title="New Protocols developed" rel="dropmenu1_a"><span>Protocols</span></a></li>
+
-
<li><a href="https://2013.igem.org/Team:UGA-Georgia/Notebook" title="Details of labwork, in realtime"><span>Notebook</span></a></li>
+
-
<li><a href="https://2013.igem.org/Team:UGA-Georgia/Results" title="Results" rel="dropmenu1_a"><span>Results</span></a></li>
+
-
<li><a href="https://2013.igem.org/Team:UGA-Georgia/Parts" title="Our submitted BioBrick parts" rel="dropmenu1_a"><span>Parts</span></a></li>
+
-
<li><a href="https://2013.igem.org/Team:UGA-Georgia/Safety" title="Safety" rel="dropmenu1_a"><span>Safety</span></a></li>
+
-
<li><a href="https://2013.igem.org/Team:UGA-Georgia/Outreach" title="Outreach" rel="dropmenu1_a"><span>Outreach</span></a></li>
+
-
<li><a href="https://2013.igem.org/Team:UGA-Georgia/FAQ" title="Human Practices" ><span>Human Practices</span></a></li>
+
-
<li><a href="https://2013.igem.org/Team:UGA-Georgia/Team" title="Meet the team" ><span>The Team</span></a></li>
+
-
<li><a href="https://2013.igem.org/Team:UGA-Georgia/Acknowledgements" title="Acknowledgements" ><span>Acknowledgements</span></a></li>
+
-
</ul>
+
-
</div>
+
-
<div class="ddcolortabsline">&nbsp;</div>
+
-
<div id="dropmenu1_a" class="dropmenudiv_a">
+
-
<a href="https://2013.igem.org/Team:UGA-Georgia/Team">Overview</a>
+
-
<a href="https://2013.igem.org/Team:UGA-Georgia/Team">Step1</a>
+
-
<a href="https://2013.igem.org/Team:UGA-Georgia/Team">Step2</a>
+
-
</div>
+
-
<script type="text/javascript">
+
-
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
+
-
tabdropdown.init("colortab", 3)
+
-
</script>
+
</html>
</html>

Latest revision as of 23:01, 25 September 2013

Uga igem logo complete.png

Georgia iGEM 2013 CSS: drop down menu example

Retrieved from "http://2013.igem.org/Template:Team:UGA-Georgia/Templates/Header"