Skip to main content

Menü mit CSS

Ein CSS-basiertes 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>
Back to top