|
|
| (247 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| - | <html>
| |
| - | <script type="text/javascript">
| |
| - | $(function(){
| |
| - | $(".myMenu").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:true,
| |
| - | 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>
| |
| - | .mbmenu{
| |
| - | display:none;
| |
| - | }
| |
| - | .rootVoices{
| |
| - | background-color:#EDEDED;
| |
| - | padding:5px;
| |
| - | padding-bottom:0;
| |
| - | }
| |
| - | .rootVoices td.rootVoice {
| |
| - | vertical-align:middle;
| |
| - | /*background-color:#fff;*/
| |
| - | width:120px;
| |
| - | font-family:Arial,Helvetica,sans-serif;
| |
| - | text-shadow:#fff 1px 1px 1px;
| |
| - | color: gray;
| |
| - | font-size:14px;
| |
| - | line-height:18px;
| |
| - | padding:8px;
| |
| - | cursor: pointer;
| |
| - | }
| |
| - |
| |
| - | .rootVoices td.rootVoice.selected{
| |
| - | background: black url("../images/bgnd_sel_4.png");
| |
| - | padding:8px;
| |
| - | color:#ffffff;
| |
| - | cursor: pointer;
| |
| - | font-size:14px;
| |
| - | 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;
| |
| - | }
| |
| - |
| |
| - | .rootVoices.vertical {
| |
| - | width:140px;
| |
| - | }
| |
| - | .rootVoices.vertical td.rootVoice{
| |
| - | -moz-border-radius:8px 0px 0 8px;
| |
| - | -webkit-border-top-right-radius:0px;
| |
| - | -webkit-border-top-left-radius:8px;
| |
| - | -webkit-border-bottom-right-radius:0px;
| |
| - | -webkit-border-bottom-left-radius:8px;
| |
| - | }
| |
| - |
| |
| - | /**/
| |
| - |
| |
| - | .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;
| |
| - | }
| |
| - |
| |
| - | /*BOX MENU*/
| |
| - |
| |
| - | .boxMenu{
| |
| - | color:#f3f3f3;
| |
| - | border-top:8px solid black;
| |
| - | background:url("../images/box_top.png") repeat-x;
| |
| - | }
| |
| - | .boxMenu h4{
| |
| - | white-space:nowrap;
| |
| - | margin:0 0 20px 0;
| |
| - | padding:3px;
| |
| - | font:18px/20px georgia, serif;
| |
| - | padding-right:20px;
| |
| - | text-shadow:#666 2px 2px 1px;
| |
| - | }
| |
| - |
| |
| - | .boxMenu td{
| |
| - | min-width:160px;
| |
| - | vertical-align:top;
| |
| - | border-right:1px solid #999;
| |
| - | }
| |
| - | .boxMenu td:hover{
| |
| - | background:url(../images/box_menu_over.png);
| |
| - | -moz-box-shadow:#666 2px 2px 4px;
| |
| - | -webkit-box-shadow:#666 2px 2px 4px;
| |
| - | }
| |
| - |
| |
| - | .boxMenu td:hover a{
| |
| - | margin-right:3px;
| |
| - | text-shadow:#fff 1px 1px 1px;
| |
| - | color:#000;
| |
| - | }
| |
| - |
| |
| - | .boxMenu td:last-child{
| |
| - | min-width:160px;
| |
| - | vertical-align:top;
| |
| - | border-right:none;
| |
| - | }
| |
| - |
| |
| - | .boxMenu a{
| |
| - | font-size:14px;
| |
| - | white-space:nowrap;
| |
| - | display:block;
| |
| - | padding:5px;
| |
| - | margin-bottom:5px;
| |
| - | }
| |
| - |
| |
| - | .boxMenu a img{
| |
| - | padding-right:5px;
| |
| - | }
| |
| - |
| |
| - | .boxMenu a:hover{
| |
| - | color:#000;
| |
| - | text-shadow:#fff 2px 2px 1px;
| |
| - | background-image:url("../images/bgnd_sel_2.jpg");
| |
| - | -moz-box-shadow:#666 2px 2px 4px;
| |
| - | -webkit-box-shadow:#666 2px 2px 4px;
| |
| - | }
| |
| - |
| |
| - | .boxMenu a img{
| |
| - | border:0;
| |
| - | }
| |
| - | </style>
| |
| - | <script type="text/javascript" src="http://igem.uni-bonn.de/shared/jquery.mb.menu/inc/mbMenu.js"></script>
| |
| - | <script type="text/javascript" src="http://igem.uni-bonn.de/shared/jquery.mb.menu/inc/styleswitch.js"></script>
| |
| - |
| |
| - | <div class="myMenu">
| |
| - | <table class="rootVoices" cellspacing='0' cellpadding='0' border='0'>
| |
| - | <tr>
| |
| - | <td class="rootVoice {menu: 'menu_12'}" >ajax menu 12</td>
| |
| - | <td class="rootVoice {menu: 'menu_2'}" >menu 2</td>
| |
| - | <td class="rootVoice {menu: 'menu_3'}" >menu 3</td>
| |
| - | <td class="rootVoice {menu: 'empty'}" onclick="window.open('http://www.open-lab.com','ww');">menu 4 empty</td> </tr>
| |
| - | </table>
| |
| - | </div>
| |
| - |
| |
| - | <div id="menu_1" class="menu">
| |
| - | <a rel="title" >title menu_1.1</a> <!-- menuvoice title-->
| |
| - | <a href="someUrl.html" target="_blank" img="image.gif" >menu_1.1 (href)</a> <!-- menuvoice with href-->
| |
| - | <a action="doSomething()" >menu_1.2</a> <!-- menuvoice with js action-->
| |
| - | <a rel="separator"></a> <!-- menuvoice separator-->
| |
| - | <a action="doSomething()" disabled=true>menu_1.3</a> <!-- menuvoice disabled-->
| |
| - | <a action="doSomething()" menu="menu_1" img="image.png">menu_1.4</a><!-- menuvoice with js action, image and submenu-->
| |
| - | </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>
| |
"
