Template:Paris/Menu

From 2008.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<style type="text/css">
<style type="text/css">
-
pre {font-size: 1.2em}
 
-
span.keyword {color: #0000FF}
 
-
span.comment {color: #228B22}
 
-
span.string {color: #A020F0}
 
-
span.untermstring {color: #B20000}
 
-
span.syscmd {color: #B28C00}
 
-
#menu {
+
#header {
-
height: 208px;
+
height: 150px;
background: url(https://static.igem.org/mediawiki/2008/4/4c/Panoramique.jpg) no-repeat center;
background: url(https://static.igem.org/mediawiki/2008/4/4c/Panoramique.jpg) no-repeat center;
}
}
-
#menu ul{
+
 
 +
#menu {
 +
background: url(https://static.igem.org/mediawiki/2008/5/58/Gradient.png);
 +
}
 +
 
 +
#menu ul {
 +
margin: 0;
 +
padding: 0;
list-style: none;
list-style: none;
-
padding-top: 11px;
+
text-align: center;
}
}
-
#menu li{
+
 
 +
#menu li {
display: inline;
display: inline;
-
padding: 3px;
 
-
border: none;
 
-
background: none;
 
}
}
-
#menu a {
+
 
-
font-size: 10pt;
+
#menu li a {
-
font-family: Lucida Grande, Verdana, Arial, Sans-Serif;
+
padding: 4px 20px;
 +
font: 2em "Trebuchet MS",Arial,sans-serif;
text-decoration: none;
text-decoration: none;
-
color: #CFE4E7;
+
/*
-
}
+
text-align: center;
-
#menu a:hover {
+
color: black;
-
color: #CFE4E7;
+
background: #c00;
 +
border: 1px solid #600;
 +
line-height: 1em;
 +
*/
}
}
-
#nav, #nav ul {
+
#menu li a:hover, #menu li a:focus, #menu li a:active {
-
position: relative;
+
color:white;
-
margin: 0 auto; /* purpose: allow centering ul table */
+
background: blue;
-
padding: 0;
+
text-decoration: underline;
-
display: table /* purpose: ul doesn't stretch width 100% */
+
}
}
-
#nav li {
+
#menu a:after {
-
display: table-cell; /* purpose: li behaves like table-cell */
+
background: url(https://static.igem.org/mediawiki/2008/4/41/Arrow.png) no-repeat;
-
position: relative; /* purpose: non-overlap li elements in ul */
+
content: "";
-
list-style: none; /* purpose: remove default html list-style */
+
padding: 0 25px 0 0;
 +
/*height: 25px; width: 25px;*/
}
}
-
#nav li a {
+
#menu li:last-child a:after {
-
display: block; /* purpose: non-overlap div on a */
+
width: 0;
-
margin: 0 1px 0 0; /* purpose: spacing main menu items */
+
padding: 0;
-
padding: 4px 16px;
+
background: none;
-
background-color: #649cd7;
+
-
color: #FFF;
+
-
text-align: center;
+
-
text-decoration: none; /* purpose: remove underline from a */
+
-
font: bold 13px arial;
+
}
}
-
#nav li a:hover {
+
pre {font-size: 1.2em}
-
background-color: #d4e2ef;
+
span.keyword {color: #0000FF}
-
color: black;
+
span.comment {color: #228B22}
 +
span.string {color: #A020F0}
 +
span.untermstring {color: #B20000}
 +
span.syscmd {color: #B28C00}
}
}
-
#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;
 
-
}
 
-
 
-
#nav .expand {
 
-
background-image: url('https://static.igem.org/mediawiki/2008/e/ef/Icon-expand.png');
 
-
background-repeat: no-repeat;
 
-
background-position: 95% 50%;
 
-
}
 
-
 
-
#nav .collapse {
 
-
background-image: url('https://static.igem.org/mediawiki/2008/c/cd/Icon-collapse.png');
 
-
background-repeat: no-repeat;
 
-
background-position: 95% 50%;
 
-
}
 
</style>
</style>
-
 
-
<script type="text/javascript" src="http://student.kuleuven.be/~s0173901/scripts/jquery.js"></script>
 
<script type="text/javascript">
<script type="text/javascript">
Line 130: Line 76:
</script>
</script>
-
<script type="text/javascript">
+
<div align="center">
-
 
+
<div id="header"></div><br />
-
function ddmsie() {
+
<div id="menu">
-
$("#nav ul").css('display', 'inline-block');
+
-
$("#nav li").css('display', 'inline');
+
-
$("#nav a").css('display', 'inline-block');
+
-
$("#nav a").hover(function () {$(this).css('background-color', '#d4e2ef')},
+
-
function () {$(this).css('background-color', '#649cd7')});
+
-
$("#nav div a").css('display', 'block');
+
-
$("#nav div").css('left', '0');
+
-
$("#nav div").css('top', '100%');
+
-
$("#nav span div").css('top', '0');
+
-
}
+
-
 
+
-
function ddmozilla() {
+
-
+
-
}
+
-
+
-
function ddnav() {
+
-
$("#nav li").hover(
+
-
function () {
+
-
$(this).find("div:first").css('display', 'inline');},
+
-
function () {
+
-
$(this).find("div:first").css('display', 'none');}
+
-
);
+
-
+
-
$("#nav span > a").toggle(
+
-
function () {
+
-
$(this).removeClass("#nav expand").addClass("#nav collapse");
+
-
$(this).css('background-color', '#99AAFF');
+
-
$(this).parent().find("div:first").css('display', 'block');},
+
-
function () {
+
-
$(this).removeClass("#nav collapse").addClass("#nav expand");
+
-
$(this).hover(
+
-
function () {
+
-
$(this).css('background-color', '#d4e2ef');},
+
-
function () {
+
-
$(this).css('background-color', '#649cd7');}
+
-
);
+
-
$(this).parent().find("div:first").css('display', 'none');
+
-
}
+
-
).addClass("#nav expand");
+
-
}
+
-
 
+
-
$(function () {
+
-
if(jQuery.browser.msie) ddmsie();
+
-
if(jQuery.browser.mozilla) ddmozilla();
+
-
ddnav();
+
-
});
+
-
</script>
+
-
<div align="center" id="menu"></div><br />
+
-
<div align="center" id="nav">
+
<ul>
<ul>
-
 
+
<li><a href="#">Project</a></li>
-
<li><a href="https://2008.igem.org/Team:Paris">Home</a></li>
+
<li><a href="#">Design</a></li>
-
 
+
<li><a href="#">Construction</a></li>
-
<li><a href="https://2008.igem.org/Team:Paris/Team">Team</a>
+
<li><a href="#">Results</a></li>
-
<div>
+
<li><a href="#">Characterization</a></li>
-
<a href="https://2008.igem.org/Team:Paris/Team">Introduction</a>
+
-
<a href="https://2008.igem.org/Team:Paris/Team/Students">Students</a>
+
-
<a href="https://2008.igem.org/Team:Paris/Team/Instructors">Instructors</a>
+
-
<a href="https://2008.igem.org/Team:Paris/Team/Adisors">Advisors</a>
+
-
        <a href="mailto:igem08paris@ml.free.fr?subject=Contact">Contact</a>
+
-
</div>
+
-
</li>
+
-
 
+
-
<li><a href="https://2008.igem.org/Team:Paris/Project">Project</a>
+
-
<div>
+
-
<a href="https://2008.igem.org/Team:Paris/Project">Introduction</a>
+
-
<span><a>Modules</a>
+
-
<div>
+
-
<a href="https://2008.igem.org/Team:Paris/Project/Oscillations">Oscillations</a>
+
-
<a href="https://2008.igem.org/Team:Paris/Project/FIFO">FIFO</a>
+
-
<a href="https://2008.igem.org/Team:Paris/Project/Synchronisation">Synchronisation</a>
+
-
</div>
+
-
</span>
+
-
</div>
+
-
</li>
+
-
 
+
-
<li><a href="https://2008.igem.org/Team:Paris/Parts">Parts</a>
+
-
<div>
+
-
<a href="https://2008.igem.org/Team:Paris/Parts">Parts</a>
+
-
<a href="https://2008.igem.org/Team:Paris/Parts/Plastest">Measurement</a>
+
-
</div>
+
-
</li>
+
-
 
+
-
<li><a>Modeling</a>
+
-
<div>
+
-
<a href="https://2008.igem.org/Team:Paris/Modeling">Introduction</a>
+
-
        <span><a>BOB approach</a>
+
-
<div>
+
-
<a href="https://2008.igem.org/Team:Paris/Modeling/BOB">Model Establishment</a>
+
-
<a href="https://2008.igem.org/Team:Paris/Modeling/BOB/Simulations">Simulations</a>
+
-
</div>
+
-
        </span>
+
-
<span><a>APE approach</a>
+
-
<div>
+
-
<a href="https://2008.igem.org/Team:Paris/Modeling/hill_approach">Model</a>
+
-
                <a href="https://2008.igem.org/Team:Paris/Modeling/Programs">Complexations</a>
+
-
<a href="https://2008.igem.org/Team:Paris/Modeling/estimation">Estimation</a>
+
-
</div>
+
-
</span>
+
-
<a href="https://2008.igem.org/Team:Paris/Modeling/BOB/Akaike">Model comparison</a>
+
-
 
+
-
        </div>
+
-
</li>
+
-
 
+
-
<li><a href="https://2008.igem.org/Team:Paris/Notebook">Notebook</a>
+
-
<div>
+
-
<a href="https://2008.igem.org/Team:Paris/Notebook">Calendar</a>
+
-
<a href="https://2008.igem.org/Team:Paris/Notebook/Freezer">Freezer</a>
+
-
<a href="https://2008.igem.org/Team:Paris/Notebook/Oligo">Oligos</a>
+
-
<a href="https://2008.igem.org/Team:Paris/Notebook/Protocols">Protocols</a>
+
-
</div>
+
-
</li>
+
-
<li>
+
-
 
+
-
<li><a>External Links</a>
+
-
<div>
+
-
<a href="http://igem-paris.org">iGEM Paris</a>
+
-
<a href="http://biosynthetique.free.fr/">SynBioSys</a>
+
-
</div>
+
-
</li>
+
-
 
+
</ul>
</ul>
</div>
</div>
 +
</div>
 +
</html>
</html>
<br />
<br />
Line 261: Line 94:
|-valign="top"
|-valign="top"
|style="background:#ffffff"|
|style="background:#ffffff"|
 +
http://css.alsacreations.com/Construction-de-menus-en-CSS/Faire-un-menu-avec-onglets-en-CSS-avec-before-after

Revision as of 20:35, 25 October 2008



http://css.alsacreations.com/Construction-de-menus-en-CSS/Faire-un-menu-avec-onglets-en-CSS-avec-before-after

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