|
|
| 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;
| + | text-decoration: underline; |
| - | width: 100%;
| + | |
| - | 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="https://2013.igem.org/Team:UGA-Georgia/Notebook">Notebook</a> |
| - | <!-- CSS for Drop Down Tabs Menu #1 --> | + | |
| - | <link rel="stylesheet" type="text/css" href="ddcolortabs.css" /> | + | <ul> |
| | + | |
| | + | <li><a href="#">E. coli</a></li> |
| | + | <li><a href="#">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><a href="https://2013.igem.org/Team:UGA-Georgia/Outreach">Outreach</a></li> |
| | + | <li><a href="https://2013.igem.org/Team:UGA-Georgia/humanpractice">Human Practice</a></li> |
| | + | <li><a href="https://2013.igem.org/Team:UGA-Georgia/Team">The Team</a></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/humanpractice" title="Human Practice" ><span>Human Practice</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"> </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> |
"
