"
Template:Paris/NavBar
From 2008.igem.org
| Line 1: | Line 1: | ||
| - | {{:Team:Paris/MenuBackup}} | + | <!-- {{:Team:Paris/MenuBackup}} --> |
| + | <style type="text/css"> | ||
| + | #nav, #nav ul { | ||
| + | position: relative; | ||
| + | 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; | ||
| + | } | ||
| + | |||
| + | #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> | ||
<div class="s1"> | <div class="s1"> | ||
<html> | <html> | ||
Revision as of 19:32, 28 October 2008
<style type="text/css">
- nav, #nav ul {
position: relative; 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; }
- 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>
