Template:Paris/NavBar

From 2008.igem.org

(Difference between revisions)
 
(47 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<ul class="s1">
+
<style type="text/css">
-
<li><a href="https://2008.igem.org/Team:Paris/Section1/Sub1">Sub 1 title</a></li>
+
#nav, #nav ul {
-
<li><a href="https://2008.igem.org/Team:Paris/Section1/Sub2">Sub 2 title</a></li>
+
position: relative;
-
<li><a href="https://2008.igem.org/Team:Paris/Section1/Sub3">Sub 3 title</a></li>
+
margin: 0 auto; /* purpose: allow centering ul table */
 +
padding: 0;
 +
display: table /* purpose: ul doesn't stretch width 100% */
 +
}
 +
 
 +
#nav li {
 +
display: table-cell; /* purpose: li behaves like table-cell */
 +
position: relative; /* purpose: non-overlap li elements in ul */
 +
list-style: none; /* purpose: remove default html list-style */
 +
}
 +
 
 +
#nav li a {
 +
display: block; /* purpose: non-overlap div on a */
 +
margin: 0 1px 0 0; /* purpose: spacing main menu items */
 +
padding: 4px 16px;
 +
background-color: #649cd7;
 +
color: #FFF;
 +
text-align: center;
 +
text-decoration: none; /* purpose: remove underline from a */
 +
font: bold 13px arial;
 +
}
 +
 
 +
#nav li a:hover {
 +
background-color: #d4e2ef;
 +
color: black;
 +
}
 +
 
 +
/*#nav div {
 +
position: absolute; /* purpose: li of div doesn't spread out */
 +
display: none;
 +
width: 10em;
 +
opacity: 0.8;
 +
filter: alpha(opacity=80);
 +
border: 1px solid #5970B2;
 +
background: #EAEBD8;
 +
}*/
 +
 
 +
#nav span a, #nav div a {
 +
position: relative;
 +
display: block; /* purpose: a's in div have same width */
 +
margin: 0;
 +
padding: 5px 10px;
 +
text-align: left;
 +
font: 11px arial;
 +
}
 +
 +
#nav span a:hover, #nav div a:hover {
 +
background-color: #d4e2ef;
 +
color: #000;
 +
}
 +
 
 +
#nav span div {
 +
position: relative;
 +
margin: 0;
 +
border: none; /* purpose: reset border to none */
 +
border-top: 1px solid #5970B2; /* purpose: add a seperator */
 +
border-bottom: 1px solid #5970B2; /* purpose: add a seperator */
 +
opacity: 1.0; /* purpose: opacity already 0.8 by #nav div */
 +
filter: alpha(opacity=100); /* purpose: opacity already 80 by #nav div */
 +
}
 +
 +
#nav span div a {
 +
text-indent: 10px;
 +
}
 +
 +
#nav span div span div a {
 +
text-indent: 20px;
 +
}
 +
 
 +
/*div#nav {
 +
display:none
 +
}*/
 +
 
 +
#ds3 div #s3 ul {
 +
Background: red;
 +
}
 +
 
 +
</style>
 +
<div id="nav">
 +
<div id="ds3">
 +
<ul id="s1">
 +
<li><a href="https://2008.igem.org/Team:Paris/Section1/Sub1">S1 / Sub1</a></li>
 +
<li><a href="https://2008.igem.org/Team:Paris/Section1/Sub2">S1 / Sub2</a></li>
 +
<li><a href="https://2008.igem.org/Team:Paris/Section1/Sub3">S1 / Sub3</a></li>
</ul>
</ul>
-
<ul class="s2">
+
<ul id="s2">
-
<li><a href="https://2008.igem.org/Team:Paris/Section2/Sub1">Sub 1 title</a></li>
+
<li><a href="https://2008.igem.org/Team:Paris/Section2/Sub1">S2 / Sub1</a></li>
-
<li><a href="https://2008.igem.org/Team:Paris/Section2/Sub2">Sub 2 title</a></li>
+
<li><a href="https://2008.igem.org/Team:Paris/Section2/Sub2">S2 / Sub2</a></li>
-
<li><a href="https://2008.igem.org/Team:Paris/Section2/Sub3">Sub 3 title</a></li>
+
<li><a href="https://2008.igem.org/Team:Paris/Section2/Sub3">S2 / Sub3</a></li>
</ul>
</ul>
-
<ul class="s3">
+
<ul id="s3">
-
<li><a href="https://2008.igem.org/Team:Paris/Section3/Sub1">Sub 1 title</a></li>
+
<li><a href="https://2008.igem.org/Team:Paris/Section3/Sub1">S3 / Sub1</a></li>
-
<li><a href="https://2008.igem.org/Team:Paris/Section3/Sub2">Sub 2 title</a></li>
+
<li><a href="https://2008.igem.org/Team:Paris/Section3/Sub2">S3 / Sub2</a></li>
-
<li><a href="https://2008.igem.org/Team:Paris/Section3/Sub3">Sub 3 title</a></li>
+
<li><a href="https://2008.igem.org/Team:Paris/Section3/Sub3">S3 / Sub3</a></li>
</ul>
</ul>
 +
</div>
 +
</div>
 +
</div>
</html>
</html>

Latest revision as of 21:55, 28 October 2008

Retrieved from "http://2008.igem.org/Template:Paris/NavBar"