|
|
| Line 46: |
Line 46: |
| | | | |
| | </style> | | </style> |
| - |
| |
| - |
| |
| - | <style>
| |
| - | /* main menu styles */
| |
| - |
| |
| - |
| |
| - | .menuholder {
| |
| - | float:center;
| |
| - | font:normal bold 14px/60px verdana, sans-serif;
| |
| - | overflow:hidden;
| |
| - | position:center;
| |
| - | }
| |
| - | .menuholder .shadow {
| |
| - | -moz-box-shadow:0 0 20px rgba(0, 0, 0, 1);
| |
| - | -o-box-shadow:0 0 20px rgba(0, 0, 0, 1);
| |
| - | -webkit-box-shadow:0 0 20px rgba(0, 0, 0, 1);
| |
| - | background:#888;
| |
| - | box-shadow:0 0 20px rgba(0, 0, 0, 1);
| |
| - | height:5px;
| |
| - | left:5%;
| |
| - | position:absolute;
| |
| - | top:-9px;
| |
| - | width:90%;
| |
| - | z-index:50;
| |
| - | }
| |
| - | .menuholder .back {
| |
| - | -moz-transition-duration:.4s;
| |
| - | -o-transition-duration:.4s;
| |
| - | -webkit-transition-duration:.4s;
| |
| - | background-color:rgba(0, 0, 0, 0.5);
| |
| - | height:0;
| |
| - | width:100%;
| |
| - | }
| |
| - | .menuholder:hover div.back {
| |
| - | height:250px;
| |
| - | }
| |
| - | ul.menu {
| |
| - | display:block;
| |
| - | float:center;
| |
| - | list-style:none;
| |
| - | margin:0;
| |
| - | padding:0 125px;
| |
| - | position:relative;
| |
| - | }
| |
| - | ul.menu li {
| |
| - | float:left;
| |
| - | margin:0 5px 0 0;
| |
| - | }
| |
| - | ul.menu li > a {
| |
| - | -moz-border-radius:0 0 10px 10px;
| |
| - | -moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
| |
| - | -moz-transition:all 0.2s ease-in-out;
| |
| - | -o-border-radius:0 0 10px 10px;
| |
| - | -o-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
| |
| - | -o-transition:all 0.2s ease-in-out;
| |
| - | -webkit-border-bottom-left-radius:10px;
| |
| - | -webkit-border-bottom-right-radius:10px;
| |
| - | -webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
| |
| - | -webkit-transition:all 0.2s ease-in-out;
| |
| - | border-radius:0 0 10px 10px;
| |
| - | box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
| |
| - | color:#eee;
| |
| - | display:block;
| |
| - | padding:0 10px;
| |
| - | text-decoration:none;
| |
| - | transition:all 0.2s ease-in-out;
| |
| - | }
| |
| - | ul.menu li a.red {
| |
| - | background:#a00;
| |
| - | }
| |
| - | ul.menu li a.orange {
| |
| - | background:#da0;
| |
| - | }
| |
| - | ul.menu li a.yellow {
| |
| - | background:#aa0;
| |
| - | }
| |
| - | ul.menu li a.green {
| |
| - | background:#060;
| |
| - | }
| |
| - | ul.menu li a.blue {
| |
| - | background:#00a;
| |
| - | }
| |
| - | ul.menu li a.violet {
| |
| - | background:#682bc2;
| |
| - | }
| |
| - | .menu li div.subs {
| |
| - | left:0;
| |
| - | overflow:hidden;
| |
| - | position:absolute;
| |
| - | top:35px;
| |
| - | width:0;
| |
| - | }
| |
| - | .menu li div.subs dl {
| |
| - | -moz-transition-duration:.2s;
| |
| - | -o-transition-duration:.2s;
| |
| - | -webkit-transition-duration:.2s;
| |
| - | float:left;
| |
| - | margin:0 130px 0 0;
| |
| - | overflow:hidden;
| |
| - | padding:40px 0 5% 2%;
| |
| - | width:0;
| |
| - | }
| |
| - | .menu dt {
| |
| - | color:#fc0;
| |
| - | font-family:arial, sans-serif;
| |
| - | font-size:12px;
| |
| - | font-weight:700;
| |
| - | height:20px;
| |
| - | line-height:20px;
| |
| - | margin:0;
| |
| - | padding:0 0 0 10px;
| |
| - | white-space:nowrap;
| |
| - | }
| |
| - | .menu dd {
| |
| - | margin:0;
| |
| - | padding:0;
| |
| - | text-align:left;
| |
| - | }
| |
| - | .menu dd a {
| |
| - | background:transparent;
| |
| - | color:#fff;
| |
| - | font-size:12px;
| |
| - | height:20px;
| |
| - | line-height:20px;
| |
| - | padding:0 0 0 10px;
| |
| - | text-align:left;
| |
| - | white-space:nowrap;
| |
| - | width:80px;
| |
| - | }
| |
| - | .menu dd a:hover {
| |
| - | color:#fc0;
| |
| - | }
| |
| - | .menu li:hover div.subs dl {
| |
| - | -moz-transition-delay:0.2s;
| |
| - | -o-transition-delay:0.2s;
| |
| - | -webkit-transition-delay:0.2s;
| |
| - | margin-right:2%;
| |
| - | width:21%;
| |
| - | }
| |
| - | ul.menu li:hover > a,ul.menu li > a:hover {
| |
| - | background:#aaa;
| |
| - | color:#fff;
| |
| - | padding:10px 10px 0;
| |
| - | }
| |
| - | ul.menu li a.red:hover,ul.menu li:hover a.red {
| |
| - | background:#c00;
| |
| - | }
| |
| - | ul.menu li a.orange:hover,ul.menu li:hover a.orange {
| |
| - | background:#fc0;
| |
| - | }
| |
| - | ul.menu li a.yellow:hover,ul.menu li:hover a.yellow {
| |
| - | background:#cc0;
| |
| - | }
| |
| - | ul.menu li a.green:hover,ul.menu li:hover a.green {
| |
| - | background:#080;
| |
| - | }
| |
| - | ul.menu li a.blue:hover,ul.menu li:hover a.blue {
| |
| - | background:#00c;
| |
| - | }
| |
| - | ul.menu li a.violet:hover,ul.menu li:hover a.violet {
| |
| - | background:#8a2be2;
| |
| - | }
| |
| - | .menu li:hover div.subs,.menu li a:hover div.subs {
| |
| - | width:100%;
| |
| - | }
| |
| - |
| |
| - |
| |
| - |
| |
| - | </style>
| |
| | | | |
| | | | |
| Line 351: |
Line 182: |
| | | | |
| | | | |
| - | <!-- here ends the section that changes the default wiki template to a white full width background -->' | + | <!-- Menu-->' |
| | | | |
| - | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
| |
| - | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
| |
| - | <head>
| |
| - | <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
| |
| - | <title>CSS3 drop down menu #3</title>
| |
| - | </head>
| |
| | | | |
| | | | |
| - | <body>
| |
| - | <div class="example">
| |
| - | <div class="menuholder">
| |
| - | <ul class="menu slide">
| |
| - | <li><a href="https://2014.igem.org/Team:Colombia" class="red">Home</a></li>
| |
| - | <li><a href="https://2014.igem.org/Team:Colombia/Projectt" class="orange">Project</a>
| |
| - |
| |
| - | <li><a href="https://2014.igem.org/Team:Colombia/Modelling/" class="yellow">Modelling</a>
| |
| - | <div class="subs">
| |
| - | <dd><a href="http://www.script-tutorials.com/category/php/">PHP</a></dd>
| |
| - | <dd><a href="http://www.script-tutorials.com/category/mysql/">MySQL</a></dd>
| |
| - |
| |
| - | </div>
| |
| - | </li>
| |
| - | <li><a href="http://www.script-tutorials.com/category/resources/" class="green">Other</a></li>
| |
| - | <li><a href="http://www.script-tutorials.com/about/" class="blue">About</a></li>
| |
| - | <li><a href="http://www.script-tutorials.com/creating-css3-dropdown-menu-3/" class="violet">Back</a></li>
| |
| - | </ul>
| |
| - | <div class="back"></div>
| |
| - | <div class="shadow"></div>
| |
| - | </div>
| |
| - | <div style="clear:both"></div>
| |
| - | </div>
| |
| | | | |
| | + | <!-- beginning of your page --> |
| | | | |
| | + | |
| | + | <table width="975px" align="center"> |
| | + | <tr ><td coslpan="2" height="35px"></td></tr> |
| | + | <tr> |
| | + | |
| | + | <td width="35%" valign="top"> |
| | + | <h3>Welcome ! </h3> |
| | + | <p> |
| | + | This is a basic template you may use to customize your wiki, |
| | + | |
| | + | you can take it apart and modify it as much as you want. The |
| | + | |
| | + | links and tabs provided here are basic suggestions, feel free |
| | + | |
| | + | to adapt it for your team and your project. </p> |
| | + | <p> |
| | + | If you are looking for general wiki guidelines, |
| | + | |
| | + | restrictions, design tips and more, visit the <br><a |
| | + | |
| | + | href="https://2014.igem.org/Wiki_How-To"> Wiki How-To |
| | + | |
| | + | Page</a></p> |
| | + | </p> |
| | + | |
| | + | |
| | + | </td> |
| | + | |
| | + | <td width="5%" > </td> |
| | + | |
| | + | |
| | + | <!-- here you can place an image related to your project or |
| | + | |
| | + | your logo! --> |
| | + | <td width="60%" > <img |
| | + | |
| | + | src="https://static.igem.org/mediawiki/2014/b/b7/2014placeholderima |
| | + | |
| | + | ge.jpg" width="600px" height="300px"></td> |
| | | | |
| | | | |
| - | <!-- beginning of your page -->
| |
| | | | |
| | + | <tr ><td coslpan="2" height="35px"></td></tr> |
| | + | </tr> |
| | + | </table> |
| | | | |
| | | | |
"
