Skip to main content

CSS-Menü

Beispielcode für ein einfaches Menü

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Batix Testmenü mit CSS</title>
<link rel="stylesheet" href="batix-css-menue.css" type="text/css">
</head>
<body>
 
<div class="BX_cssmenue">
  <ul>
    <bx:sitemap.0>
     <li><!--[if IE]><!--><a<bx:sitemap.if hasChilds> class="submenue"</bx:sitemap.if> href="/www/<bx:pagedata.webdir/>/<bx:navigation.path/>/" target="<bx:navigation.target default="_self"/>" title="<bx:navigation.meta name="meta"/>"><!--<![endif]--><bx:sitemap.name/>
      <!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
        <bx:sitemap.if hasChilds><ul></bx:sitemap.if>
          <bx:sitemap.1>
           <li class="<bx:sitemap.if first>firstitem</bx:sitemap.if><bx:sitemap.if last>lastitem</bx:sitemap.if>"><a<bx:sitemap.if hasChilds> class="submenue"</bx:sitemap.if> href="/www/<bx:pagedata.webdir/>/<bx:navigation.path/>/" target="<bx:navigation.target default="_self"/>" title="<bx:navigation.meta name="meta"/>"><bx:sitemap.name/>
            <!--[if gt IE 6]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
              <bx:sitemap.if hasCHilds><ul></bx:sitemap.if>
                <bx:sitemap.2>
                 <li class="<bx:sitemap.if first>firstitem</bx:sitemap.if><bx:sitemap.if last>lastitem</bx:sitemap.if>"><a<bx:sitemap.if hasChilds> class="submenue"/</bx:sitemap.if> href="/www/<bx:pagedata.webdir/>/<bx:navigation.path/>/" target="<bx:navigation.target default="_self"/>" title="<bx:navigation.meta name="meta"/>"><bx:sitemap.name/></a></li>
                </bx:sitemap.2>
              <bx:sitemap.if hasCHilds></ul></bx:sitemap.if>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
           </li>
          </bx:sitemap.1>
        <bx:sitemap.if hasChilds></ul></bx:sitemap.if>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
     </li>
   </bx:sitemap.0>
  </ul>
</div>
 
</body>
</html>

Beispiel für die dazugehörige css-Datei

 .BX_cssmenue {
  width:600px;
  height:25px;
  border:1px solid #98b1c4;
  background:#bdcedc;
  z-index:100;
  position:relative;
}
.BX_cssmenue ul {
  float:left;
  list-style-type:none;
  position:relative;
  margin:0;
  padding:0;
}
.BX_cssmenue li {
  float:left;
}
.BX_cssmenue li:hover,.BX_cssmenue li a:hover {
  position:relative;
}
.BX_cssmenue a {
  display:block;
  float:left;
  height:25px;
  white-space:nowrap;
  padding:0 10px 0 10px;
  line-height:25px;
  font-size:12px;
  font-weight:bold;
  font-family:Arial,Helvetica,sans-serif;
  text-align:center;
  color:#293d6b;
  text-decoration:none;
}
.BX_cssmenue li:hover a,.BX_cssmenue a:hover {
  background:#98b1c4;
}
.BX_cssmenue a.submenue {
  background:url(/static/dev/css-menu/top-sub.gif) no-repeat center right;
  padding:0 20px 0 10px;
}
.BX_cssmenue li:hover a.submenue,.BX_cssmenue a.submenue:hover {
  background:#98b1c4 url(/static/dev/css-menu/top-sub.gif) no-repeat center right;
}
.BX_cssmenue ul ul {
  position:absolute;left:-5000px;
  top:-5000px;
  width:202px;
  height:auto;
  border:none;
  background:#bdcedc;
}
.BX_cssmenue table {
  margin-top:-1px;
  border-collapse:collapse;
}
.BX_cssmenue ul :hover ul {
  left:0px;
  top:25px;
}
.BX_cssmenue li li {
  width:200px;
  border:1px solid #98b1c4;
  border-width:0 1px;
  padding:0
}
.BX_cssmenue li li.firstitem {
  border-top:1px solid #98b1c4;
}
.BX_cssmenue li li.lastitem {
  border-bottom:1px solid #98b1c4;
}
.BX_cssmenue ul ul a,.BX_cssmenue ul :hover ul a,.BX_cssmenue ul :hover ul :hover ul a {
  float:none;
  margin:0;
  width:180px;
  height:auto;
  white-space:normal;
  padding:4px 10px 5px 10px;
  font:bold 12px Arial,Helvetica,sans-serif;
  text-decoration:none;
  text-align:left;
  color:#293d6b;
  background:none;
}
.BX_cssmenue ul ul :hover a,.BX_cssmenue ul ul a:hover,.BX_cssmenue ul ul :hover ul :hover a,.BX_cssmenue ul ul :hover ul a:hover {
  background:#98b1c4;
}
.BX_cssmenue ul ul a.submenue,.BX_cssmenue ul :hover ul a.submenue {
  width:180px;
  padding:4px 10px 5px 10px;
  background:url(/static/dev/css-menu/sub-sub.gif) no-repeat center right;
}
.BX_cssmenue ul ul :hover a.submenue,.BX_cssmenue ul ul a.submenue:hover  {
  background:#98b1c4 url(/static/dev/css-menu/sub-sub.gif) no-repeat center right;
}
.BX_cssmenue ul :hover ul ul {
  position:absolute;
  left:-5000px;
  top:-5000px;
}
.BX_cssmenue ul :hover ul :hover ul {
  left:190px;
  top:-1px;
}
.BX_cssmenue br {
  clear:both;
  height:0;
  font-size: 1px;
  line-height: 0px;
 }

Link zur Demo-Seite mit diesem Code http://dev.batix.local/www/dev/purecssmenu/

Back to top