Template:Team:Bonn:PageMenu
From 2013.igem.org
(Difference between revisions)
Line 6: | Line 6: | ||
$(function(){ | $(function(){ | ||
$(".myMenu").buildMenu({ | $(".myMenu").buildMenu({ | ||
- | |||
additionalData:"", | additionalData:"", | ||
menuSelector:".menuContainer", | menuSelector:".menuContainer", | ||
Line 33: | Line 32: | ||
}); | }); | ||
</script> | </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> | ||
<div class="myMenu"> | <div class="myMenu"> |
Revision as of 16:41, 28 April 2013
ajax menu 12 | menu 2 | menu 3 | menu 4 empty |