|
|
| (12 intermediate revisions not shown) |
| Line 94: |
Line 94: |
| | /**************** horizontal menu coding *****************/ | | /**************** horizontal menu coding *****************/ |
| | #hmenu { | | #hmenu { |
| - | position:relative;
| |
| | float:left; | | float:left; |
| | + | position:relative; |
| | width: 100%; | | width: 100%; |
| | } | | } |
| Line 112: |
Line 112: |
| | vertical-align:middle; | | vertical-align:middle; |
| | text-transform:uppercase; | | text-transform:uppercase; |
| - | display:table-cell; | + | display:table-cell; |
| | vertical-align:middle; | | vertical-align:middle; |
| | margin:0; | | margin:0; |
| Line 148: |
Line 148: |
| | } | | } |
| | | | |
| - | #hmenu li { | + | #hmenu ul li { |
| | position:relative; | | position:relative; |
| | } | | } |
| Line 158: |
Line 158: |
| | } | | } |
| | | | |
| - | #menu ul ul { | + | #hmenu ul ul { |
| | position: absolute; | | position: absolute; |
| | z-index: 500; | | z-index: 500; |
| | } | | } |
| | | | |
| - | div#menu ul ul { | + | div#hmenu ul ul { |
| | display: none; | | display: none; |
| | } | | } |
| | | | |
| - | div#menu ul li:hover ul | + | div#hmenu ul li:hover ul |
| | {display: block;} | | {display: block;} |
| | | | |
| - | div#menu ul ul, | + | div#hmenu ul ul, |
| - | div#menu ul li:hover ul ul, | + | div#hmenu ul li:hover ul ul, |
| - | div#menu ul ul li:hover ul ul | + | div#hmenu ul ul li:hover ul ul |
| | {display: none;} | | {display: none;} |
| | | | |
| - | div#menu ul li:hover ul, | + | div#hmenu ul li:hover ul, |
| - | div#menu ul ul li:hover ul, | + | div#hmenu ul ul li:hover ul, |
| - | div#menu ul ul ul li:hover ul | + | div#hmenu ul ul ul li:hover ul |
| | {display: block;} | | {display: block;} |
| | | | |
| Line 191: |
Line 191: |
| | } | | } |
| | | | |
| - | #menu ul li {float: left; width: 100%;} | + | #hmenu ul li {float: left; width: 100%;} |
| - | #menu ul li a {height: 1%;} | + | #hmenu ul li a {height: 1%;} |
| | | | |
| - | #menu a, #menu h2 { | + | #hmenu a, #hmenu h2 { |
| | font: bold 0.7em/1.4em arial, helvetica, sans-serif; | | font: bold 0.7em/1.4em arial, helvetica, sans-serif; |
| | } | | } |
| | </style> | | </style> |
| | <![endif]--> | | <![endif]--> |
| - |
| |
| - |
| |
| - | /*****************Vertical Menu Coding from http://ago.tanfa.co.uk/css/examples/menu/tutorial-h.html*******************/
| |
| - |
| |
| - | #vmenu {
| |
| - | width: 13em;
| |
| - | background: #336699;
| |
| - | position: relative;
| |
| - | float: left;
| |
| - | margin: 5px;
| |
| - | padding: 0;
| |
| - | }
| |
| - |
| |
| - | #vmenu ul {
| |
| - | list-style: none;
| |
| - | margin: 0;
| |
| - | padding: 0;
| |
| - | }
| |
| - |
| |
| - | #vmenu a, #menu h2 {
| |
| - | font: bold 11px/16px arial, helvetica, sans-serif;
| |
| - | display: block;
| |
| - | border-width: 5px;
| |
| - | border-style: solid;
| |
| - | border-color: #ccc #888 #555 #bbb;
| |
| - | margin: 0;
| |
| - | padding: 2px 3px;
| |
| - | }
| |
| - |
| |
| - | #vmenu h2 {
| |
| - | color: #fff;
| |
| - | background: #000;
| |
| - | text-transform: uppercase;
| |
| - | }
| |
| - |
| |
| - | #vmenu a {
| |
| - | color: #000;
| |
| - | background: #efefef;
| |
| - | text-decoration: none;
| |
| - | }
| |
| - |
| |
| - | #vmenu a:hover {
| |
| - | color: #336699;
| |
| - | background: #fff;
| |
| - | }
| |
| - |
| |
| - | #vmenu ul ul ul {
| |
| - | position: absolute;
| |
| - | top: 0;
| |
| - | left: 100%;
| |
| - | width: 100%;
| |
| - | }
| |
| - |
| |
| - | #vmenu li {position: relative;}
| |
| - |
| |
| - | div#vmenu ul ul ul,
| |
| - | div#vmenu ul ul li:hover ul ul
| |
| - | {display: none;}
| |
| - |
| |
| - | div#vmenu ul ul li:hover ul,
| |
| - | div#vmenu ul ul ul li:hover ul
| |
| - | {display: block;}
| |
| - |
| |
| - |
| |
| - | /**************** Navigation Buttons (for Project and Experiments pages) *****************/
| |
| - | #nav {
| |
| - | width: 770px;
| |
| - | height: 160px;
| |
| - | margin: 5px;
| |
| - | padding: 0px;
| |
| - | }
| |
| - |
| |
| - | #nav a {
| |
| - | display: inline-block;
| |
| - | list-style:none;
| |
| - | width: 175px;
| |
| - | height: 150px;
| |
| - | margin: 5px 37px;
| |
| - | border: none;
| |
| - | color: #f00;
| |
| - | font-size: 16px;
| |
| - | font-weight: bold;
| |
| - | text-transform: uppercase;
| |
| - | text-align: center;
| |
| - | }
| |
| - |
| |
| - | #nav a.intro {
| |
| - | background: url(https://static.igem.org/mediawiki/2009/6/64/UI09Intropic.png);
| |
| - | }
| |
| - |
| |
| - | #nav a.intro:hover {
| |
| - | background: url(https://static.igem.org/mediawiki/2009/c/c5/UI09Introhover.png);
| |
| - | }
| |
| - |
| |
| - | #nav a.research {
| |
| - | background: url(https://static.igem.org/mediawiki/2009/c/cb/UI09Researchpic.png);
| |
| - | }
| |
| - |
| |
| - | #nav a.research:hover {
| |
| - | background: url(https://static.igem.org/mediawiki/2009/a/a3/UI09Researchhover.png);
| |
| - | }
| |
| - |
| |
| - | #nav a.modeling {
| |
| - | background: url(https://static.igem.org/mediawiki/2009/a/a7/UI09Modelingpic.png);
| |
| - | }
| |
| - |
| |
| - | #nav a.modeling:hover {
| |
| - | background: url(https://static.igem.org/mediawiki/2009/0/06/UI09Modelinghover.png);
| |
| - | }
| |
| - |
| |
| - | #nav a.protocols {
| |
| - | background: url(https://static.igem.org/mediawiki/2009/f/f1/UI09Protocolsbutton.png);
| |
| - | }
| |
| - |
| |
| - | #nav a.protocols:hover {
| |
| - | background: url(https://static.igem.org/mediawiki/2009/f/f0/UI09Protocolshover.png);
| |
| - | }
| |
| - |
| |
| - | #nav a.vectors {
| |
| - | background: url(https://static.igem.org/mediawiki/2009/7/7c/UI09Vectorsbutton.png);
| |
| - | }
| |
| - |
| |
| - | #nav a.vectors:hover {
| |
| - | background: url(https://static.igem.org/mediawiki/2009/f/f5/UI09Vectorshover.png);
| |
| - | }
| |
| - |
| |
| - | #nav a.results {
| |
| - | width: 600px;
| |
| - | height: 35px;
| |
| - | background:#003C7D
| |
| - | }
| |
| - |
| |
| - | #nav a.results:hover {
| |
| - | background:#6e8bbf;
| |
| - | }
| |
| | | | |
| | </style> | | </style> |
| | </html> | | </html> |
"
