|
|
(204 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | <html>
| |
- | <script type="text/javascript">
| |
- | $(function(){
| |
- | $(".igemMenu").buildMenu({
| |
- | additionalData:"",
| |
- | menuSelector:".menuContainer",
| |
- | menuWidth:150,
| |
- | openOnRight:false,
| |
- | containment:"window",
| |
- | iconPath:"ico/",
| |
- | hasImages:true,
| |
- | fadeInTime:100,
| |
- | fadeOutTime:200,
| |
- | menuTop:0,
| |
- | menuLeft:0,
| |
- | submenuTop:0,
| |
- | submenuLeft:4,
| |
- | opacity:1,
| |
- | shadow:false,
| |
- | shadowColor:"black",
| |
- | shadowOpacity:.2,
| |
- | openOnClick:false,
| |
- | closeOnMouseOut:false,
| |
- | closeAfter:500,
| |
- | minZindex:"auto",
| |
- | hoverIntent:0, //if you use jquery.hoverIntent.js set this to time in milliseconds; 0= false;
| |
- | submenuHoverIntent:0, //if you use jquery.hoverIntent.js set this to time in milliseconds; 0= false;
| |
- | });
| |
- | });
| |
- | </script>
| |
| | | |
- | <style>
| |
- | table, tr, td {background:transparent; border:0px;}
| |
- | table table table {background:transparent;}
| |
- | table table table td {background-color:transparent;}
| |
- |
| |
- | .mbmenu{
| |
- | display:none;
| |
- | }
| |
- | .rootVoices{
| |
- | padding-bottom:0;
| |
- | background: transparent;
| |
- | }
| |
- |
| |
- | .rootVoices td.rootVoice {
| |
- | vertical-align:middle;
| |
- | width:120px;
| |
- | font-family:Arial,Helvetica,sans-serif;
| |
- | text-shadow:#fff 1px 1px 1px;
| |
- | color: gray;
| |
- | font-size:14px;
| |
- | line-height:18px;
| |
- | padding:8px 64px;
| |
- | cursor: pointer;
| |
- | box-shadow: 0px 0px 10px #6EA2DE;
| |
- | }
| |
- |
| |
- | .rootVoices td.rootVoice.selected{
| |
- | background: black url("https://static.igem.org/mediawiki/2013/a/a6/Bonn_igem_menu_sel.jpg");
| |
- | padding:8px 64px;
| |
- | color:#ffffff;
| |
- | cursor: pointer;
| |
- | font-size:14px;
| |
- | box-shadow: 0px 0px 14px #DF0101;
| |
- | text-shadow:#660033 1px 1px 1px;
| |
- | /*
| |
- | -moz-box-shadow:#999 2px 2px 10px;
| |
- | -webkit-box-shadow:#999 2px 2px 10px;
| |
- | */
| |
- | -moz-border-radius:8px 8px 0 0px;
| |
- | -webkit-border-top-right-radius:8px;
| |
- | -webkit-border-top-left-radius:8px;
| |
- | -webkit-border-bottom-right-radius:0px;
| |
- | -webkit-border-bottom-left-radius:0px;
| |
- | }
| |
- | .rootVoices td.rootVoice.disabled.selected{
| |
- | background:#999!important;
| |
- | color:#666;
| |
- | text-shadow:#ddd 1px 1px 1px;
| |
- | }
| |
- |
| |
- | /**/
| |
- |
| |
- | .menuContainer{
| |
- | /*overflow:hidden;*/
| |
- | position:absolute;
| |
- | background-color:gray;
| |
- | border-top:5px solid black;
| |
- | padding:0;
| |
- | -moz-box-shadow:#999 2px 2px 10px;
| |
- | -webkit-box-shadow:#999 2px 2px 10px;
| |
- | box-shadow:#999 2px 2px 10px;
| |
- | -moz-border-radius: 0 0 8px 8px;
| |
- | -webkit-border-top-right-radius:0px;
| |
- | -webkit-border-top-left-radius:0px;
| |
- | -webkit-border-bottom-right-radius:8px;
| |
- | -webkit-border-bottom-left-radius:8px;
| |
- | }
| |
- | .menuContainer.submenuContainer{
| |
- | border-top:none!important;
| |
- | }
| |
- |
| |
- | .menuContainer.disabled{
| |
- | border-top:5px solid #999;
| |
- | background-color:gray;
| |
- | }
| |
- | .menuContainer .line{
| |
- | background-color:transparent;
| |
- | width:100%;
| |
- | }
| |
- | .menuContainer .line.title {
| |
- | background-color:black;
| |
- | font-family:Arial,Helvetica,sans-serif;
| |
- | font-size:14px;
| |
- | /*border-bottom:1px solid black;*/
| |
- | }
| |
- | .menuContainer.disabled .line.title {
| |
- | background-color:#999;
| |
- | }
| |
- | .menuContainer .line.title a{
| |
- | font-size:14px;
| |
- | color:#ccc;
| |
- | }
| |
- | .menuContainer.disabled .line.title a{
| |
- | font-size:14px;
| |
- | color:#666;
| |
- | text-shadow:#999 1px 1px 1px;
| |
- | }
| |
- | .menuContainer td a{
| |
- | text-decoration:none;
| |
- | color:#f3f3f3;
| |
- | text-shadow:#666 1px 1px 1px;
| |
- | }
| |
- | .menuContainer td.voice{
| |
- | font-family:Arial,Helvetica,sans-serif;
| |
- | font-size:14px;
| |
- | padding:7px;
| |
- | }
| |
- | .menuContainer .separator{
| |
- | background-color:#999;
| |
- | height:1px;
| |
- | padding:0;
| |
- | margin:0;
| |
- | }
| |
- | .menuContainer td.img{
| |
- | font-family:Arial,Helvetica,sans-serif;
| |
- | text-align:center;
| |
- | font-size:12px;
| |
- | color: #c3c3c3;
| |
- | background-color:transparent;
| |
- | width:24px;
| |
- | padding:5px;
| |
- | }
| |
- | .menuContainer td.img img{
| |
- | width:20px;
| |
- | }
| |
- | .menuContainer .textBox{
| |
- | padding: 10px;
| |
- | font-family:Arial,Helvetica,sans-serif;
| |
- | font-size:12px;
| |
- | color: #c3c3c3;
| |
- | }
| |
- | .menuContainer .selected td{
| |
- | background-color:#f3f3f3;
| |
- | background-image:url("../images/bgnd_sel_2.jpg")
| |
- | }
| |
- | .menuContainer .selected td a{
| |
- | color:#000;
| |
- | text-shadow:#fff 2px 2px 1px;
| |
- | display:block;
| |
- | }
| |
- | .menuContainer .disabled td, .menuContainer .disabled td a {
| |
- | color:#555;
| |
- | text-shadow:#999 1px 1px 1px;
| |
- | }
| |
- | .menuContainer .subMenuOpener{
| |
- | background-image:url("../images/menuArrow_w.gif");
| |
- | background-repeat:no-repeat;
| |
- | background-position:right;
| |
- | }
| |
- | .menuContainer .selected .subMenuOpener{
| |
- | background-image:url("../images/menuArrow.gif");
| |
- | background-repeat:no-repeat;
| |
- | background-position:right;
| |
- | }
| |
- |
| |
- | </style>
| |
- | <script type="text/javascript" src="http://igem.uni-bonn.de/shared/jquery.mb.menu/inc/mbMenu.js"></script>
| |
- |
| |
- | <table border="0">
| |
- | <tr>
| |
- | <td class="igemMenu">
| |
- |
| |
- | <!-- start horizontal menu -->
| |
- |
| |
- | <table class="rootVoices" cellspacing='0' cellpadding='0' border='0'><tr>
| |
- | <td class="rootVoice {menu: 'empty'}" onclick="window.open ('https://2013.igem.org/Team:Bonn','_self',false)">Home</td>
| |
- | <td class="rootVoice {menu: 'menu_team'}">Team</td>
| |
- | <td class="rootVoice {menu: 'empty'}" onclick="alert('Hey, we need to write this!')">Introduction</td>
| |
- | <td class="rootVoice {menu: 'empty'}" onclick="alert('Hey, we need to write this!')">Project</td>
| |
- | <td class="rootVoice {menu: 'empty'}" onclick="alert('Hey, we need to write this!')">Human Practice</td>
| |
- | </tr></table>
| |
- |
| |
- | <!-- end horizontal menu -->
| |
- |
| |
- | </td>
| |
- | </tr>
| |
- | </table>
| |
- |
| |
- |
| |
- | <div id="menu_team" class="mbmenu">
| |
- | <a rel="title" >Our Team</a>
| |
- | <a href="#" class="{img: 'some_nice_igem_image.png'}" >About Us</a>
| |
- | <a href="https://igem.org/Team.cgi?year=2013&team_name=Bonn" class="{img: 'some_nice_igem_image.png'}" >Official Profile</a>
| |
- | <a href="#" class="{img: 'some_nice_igem_image.png'}" >Sponsors</a>
| |
- | <a href="#" class="{img: 'some_nice_igem_image.png'}" >Acknowledgements</a>
| |
- |
| |
- | <a rel="separator"> </a> <!-- menuvoice separator-->
| |
- |
| |
- | <a href="#" class="{img: 'some_nice_igem_image.png'}" >Bonn</a>
| |
- | </div>
| |
- |
| |
- | <!--
| |
- | <div class="menu">
| |
- | <ul id="menu-top">
| |
- | <li id="menu-1" class="menu-column">
| |
- | <div id="menu-home" class="menu-head"></html> [[Team:Bonn|Home]] <html></div>
| |
- | </li>
| |
- | <li id="menu-2" class="menu-column">
| |
- | <div class="menu-head"></html> Team <html></div>
| |
- | <ul class="menu-sub-ul" id="menu-sub-team">
| |
- | <li class="menu-sub" id="menu-team-aboutus">
| |
- | </html> About Us <html>
| |
- | </li>
| |
- | <li class="menu-sub" id="menu-team-officialprofile">
| |
- | </html> [https://igem.org/Team.cgi?year=2013&team_name=Bonn Official Profile] <html>
| |
- | </li>
| |
- | <li class="menu-sub" id="menu-team-sponsors">
| |
- | </html> Sponsors <html>
| |
- | </li>
| |
- | <li class="menu-sub" id="menu-team-sponsors">
| |
- | </html> Acknowledgements<html>
| |
- | </li>
| |
- | <li class="menu-sub" id="menu-team-sponsors">
| |
- | </html> Bonn <html>
| |
- | </li>
| |
- | </ul>
| |
- | </li>
| |
- | <li id="menu-3" class="menu-column">
| |
- | <div class="menu-head"></html> Introduction <html></div>
| |
- | <ul class="menu-sub-ul" id="menu-sub-intro">
| |
- | </ul>
| |
- | </li>
| |
- | <li id="menu-4" class="menu-column">
| |
- | <div class="menu-head"></html> Project <html></div>
| |
- | <ul class="menu-sub-ul" id="menu-sub-project">
| |
- | </ul>
| |
- | </li> <li id="menu-5" class="menu-column">
| |
- | <div class="menu-head"></html> Human Practice <html></div>
| |
- | <ul class="menu-sub-ul" id="menu-sub-hp">
| |
- | </ul>
| |
- | </li>
| |
- |
| |
- | </ul>
| |
- | </div>
| |
- | <script>
| |
- | for(var m,m=1; m<3;m++) {
| |
- | dropdown("menu-"+m);
| |
- | }
| |
- | </script>
| |
- | -->
| |
- | </html>
| |