Menü mit CSS
InhaltEin wirdCSS-basiertes geladen…Menü, das zur Not auch ohne JavaScript funktioniert und beliebig viele Ebenen darstellen kann.
Zum Betrieb des Menüs sind nur zwei Textbausteine in den HTML-Quelltext zu integrieren.
Textbaustein 1 für den HTML-Body
<!-- #################### Beginn CSS-Menü #################### -->
<ul id="qm0" class="qmmc">
<bx:sitemap.0>
<li><a class="<bx:sitemap.if hasChilds>qmparent</bx:sitemap.if><bx:sitemap.IF open> qmactive</bx:sitemap.IF>" href="/www/<bx:pagedata.webdir/>/<bx:navigation.path/>/"><bx:sitemap.name/></a>
<bx:sitemap.iF hasChilds>
<ul>
<bx:sitemap.1>
<li><a<bx:sitemap.if hasChilds> class="qmparent<bx:sitemap.IF open> qmactive</bx:sitemap.IF>"</bx:sitemap.if> href="/www/<bx:pagedata.webdir/>/<bx:navigation.path/>/"><bx:sitemap.name/></a>
<bx:sitemap.IF hasChilds>
<ul style="width:auto;">
<bx:sitemap.2>
<li><a<bx:sitemap.if hasChilds> class="qmparent"</bx:sitemap.if> href="/www/<bx:pagedata.webdir/>/<bx:navigation.path/>/"><bx:sitemap.name/></a>
<bx:sitemap.if hasChilds>
<ul>
<bx:sitemap.3>
<li><a href="/www/<bx:pagedata.webdir/>/<bx:navigation.path/>/"><bx:sitemap.name/></a></li>
</bx:sitemap.3>
</ul>
</bx:sitemap.if>
</li>
</bx:sitemap.2>
</ul>
</bx:sitemap.IF>
</li>
</bx:sitemap.1>
</ul>
</bx:sitemap.iF>
</li>
</bx:sitemap.0>
<li class="qmclear"> </li>
</ul>
<!-- ##################### Ende CSS-Menü ##################### -->
<!-- Create Menu Settings: (Menu ID, Is Vertical, Show Timer, Hide Timer, On Click ('all' or 'lev2'), Right to Left, Horizontal Subs, Flush Left, Flush Top) -->
<script type="text/javascript">qm_create(0,false,100,500,false,false,false,false,false);</script>
Textbaustein 2 für den HTML-Head
<!-- #################### Beginn Styles für CSS-Menü #################### -->
<style type="text/css">
/*!!!!!!!!!!! Diese Styles nicht ändern !!!!!!!!!!!!!*/
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}.qmmc .qmdividery{float:left;width:0px;}.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}.qmmc {position:relative;zoom:1;z-index:10;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;}
/*!!!!!!!!! Diese Styles zur individuellen Anpassung verändern !!!!!!!!!*/
/*"""""""" (MAIN) Container"""""""""""*/
#qm0
{
padding:0px;
margin:20px 0 0 15px;
}
/*"""""""" (MAIN) Items"""""""""""*/
#qm0 a
{
padding:2px 40px 2px 10px;
background-color:#A20002;
color:#FFFFFF;
font-family:Arial;
font-size:12px;
text-decoration:none;
font-weight:bold;
text-align:left;
border-width:1px 0px 1px 2px;
border-style:solid;
border-color:#7C0000;
-moz-border-top-left-radius:7px;
border-top-left-radius:7px;
-moz-border-top-right-radius:7px;
border-top-right-radius:7px;
}
/*"""""""" (MAIN) Hover State"""""""""""*/
#qm0 a:hover
{
background-color:#7C0000;
color:#FFFC85;
}
/*"""""""" (MAIN) Active State"""""""""""*/
body #qm0 .qmactive, body #qm0 .qmactive:hover
{
background-color:#7C0000;
color:#FFFC85;
}
/*"""""""" (MAIN) Persistent State"""""""""""*/
body #qm0 .qmpersistent, body #qm0 .qmpersistent:hover
{
background-color:#7C0000;
}
/*"""""""" (SUB) Container"""""""""""*/
#qm0 div, #qm0 ul
{
background-color:#A20002;
border-width:1px;
border-style:solid;
border-color:#7C0000;
}
/*"""""""" (SUB) Items"""""""""""*/
#qm0 div a, #qm0 ul a
{
padding:4px 20px 4px 15px;
color:#FFFFFF;
font-size:12px;
font-weight:normal;
text-align:left;
border-width:0px 0px 1px;
border-style:solid;
border-color:#7C0000;
}
/*"""""""" (SUB) Hover State"""""""""""*/
#qm0 div a:hover, #qm0 ul a:hover
{
color:#FFFC85;
border-color:#7C0000;
}
/*"""""""" (SUB) Active State"""""""""""*/
body #qm0 div .qmactive, body #qm0 div .qmactive:hover
{
color:#FFFC85;
}
/*"""""""" (SUB) Persistent State"""""""""""*/
body #qm0 div .qmpersistent, body #qm0 div .qmpersistent:hover
{
background-color:#7C0000;
}
</style>
<!-- ##################### Ende Styles für CSS-Menü ##################### -->
<!-- #################### Beginn Scripts für CSS-Menü ################### -->
<!-- Core MyCSSMenu Code -->
<script type="text/javascript">/* <![CDATA[ */var qm_si,qm_li,qm_lo,qm_tt,qm_th,qm_ts,qm_la,qm_ic,qm_ib;var qp="parentNode";var qc="className";var qm_t=navigator.userAgent;var qm_o=qm_t.indexOf("Opera")+1;var qm_s=qm_t.indexOf("afari")+1;var qm_s2=qm_s&&qm_t.indexOf("ersion/2")+1;var qm_s3=qm_s&&qm_t.indexOf("ersion/3")+1;var qm_n=qm_t.indexOf("Netscape")+1;var qm_v=parseFloat(navigator.vendorSub);;function qm_create(sd,v,ts,th,oc,rl,sh,fl,ft,aux,l){var w="onmouseover";var ww=w;var e="onclick";if(oc){if(oc=="all"||(oc=="lev2"&&l>=2)){w=e;ts=0;}if(oc=="all"||oc=="main"){ww=e;th=0;}}if(!l){l=1;qm_th=th;sd=document.getElementById("qm"+sd);if(window.qm_pure)sd=qm_pure(sd);sd[w]=function(e){qm_kille(e)};document[ww]=qm_bo;if(oc=="main"){qm_ib=true;sd[e]=function(event){qm_ic=true;qm_oo(new Object(),qm_la,1);qm_kille(event)};document.onmouseover=function(){qm_la=null;clearTimeout(qm_tt);qm_tt=null;};}sd.style.zoom=1;if(sh)x2("qmsh",sd,1);if(!v)sd.ch=1;}else if(sh)sd.ch=1;if(oc)sd.oc=oc;if(sh)sd.sh=1;if(fl)sd.fl=1;if(ft)sd.ft=1;if(rl)sd.rl=1;sd.style.zIndex=l+""+1;var lsp;var sp=sd.childNodes;for(var i=0;i<sp.length;i++){var b=sp[i];if(b.tagName=="A"){lsp=b;b[w]=qm_oo;if(w==e)b.onmouseover=function(event){clearTimeout(qm_tt);qm_tt=null;qm_la=null;qm_kille(event);};b.qmts=ts;if(l==1&&v){b.style.styleFloat="none";b.style.cssFloat="none";}}else if(b.tagName=="DIV"){if(window.showHelp&&!window.XMLHttpRequest)sp[i].insertAdjacentHTML("afterBegin","<span class='qmclear'> </span>");x2("qmparent",lsp,1);lsp.cdiv=b;b.idiv=lsp;if(qm_n&&qm_v<8&&!b.style.width)b.style.width=b.offsetWidth+"px";new qm_create(b,null,ts,th,oc,rl,sh,fl,ft,aux,l+1);}}};/* ]]> */</script>
<!-- Add-On Core Code (Remove when not using any add-on's) -->
<style type="text/css">.qmfv{visibility:visible !important;}.qmfh{visibility:hidden !important;}</style>
<script type="text/JavaScript">var qmad = new Object();qmad.bvis="";qmad.bhide="";</script>
<!-- Add-On Settings -->
<script type="text/JavaScript">
/******* Menu 0 Add-On Settings *******/
var a = qmad.qm0 = new Object();
// Sub Menu Fade Animation Add On
a.fade_in_frames = 10;
a.fade_out_frames = 20;
// Item Bullets (CSS - Imageless) Add On
a.ibcss_apply_to = "parent";
a.ibcss_main_type = "arrow";
a.ibcss_main_direction = "down";
a.ibcss_main_size = 5;
a.ibcss_main_position_x = -16;
a.ibcss_main_position_y = -5;
a.ibcss_main_align_x = "right";
a.ibcss_main_align_y = "middle";
a.ibcss_sub_type = "arrow";
a.ibcss_sub_direction = "right";
a.ibcss_sub_size = 5;
a.ibcss_sub_position_x = -22;
a.ibcss_sub_align_x = "right";
a.ibcss_sub_align_y = "middle";
// Drop Shadow Add On
a.shadow_offset = 3;
a.shadow_color = "#AFAFAF";
a.shadow_opacity = 1;
// Keyboard Access Add On
a.keyboard_access_active = true;
</script>