Menübeispiel

Anwendungsbeispiel für ein horizontales Hauptmenü (Level1 (H1)) mit einem vertikalen Untermenü (Level 2+3 (H2+H3))
In dem folgenden Beispiel wird die Anordnung eines horizontalen Hauptmenüs (Level 1 (H1)) mit einem vertikalen Untermenü (Level 2+3 (H2+H3)) auf Basis des Standardtemplates "mini1" gezeigt:

Anwendungsbeispiel horizontales und vertikales Menü

Template:

<!DOCTYPE html>
<html lang="<?php echo $sl;?>">
...
<head>
<?php echo head();?>
...
</head>
<body id="body" <?php echo onload();?>>
...
    <!--Navigation 1st level-->
    <div class="nav">
        <?php echo toc(1);?>
    </div>
....
    <!-- Navigation 2nd-3rd level -->
    <div class="nav2">
        <?php echo toc(2,3);?>
        <?php echo tag('hr');?>
    </div>
...
</body>
</html>

CSS:

/**********************/
/*    Navigation 1    */
/**********************/
.nav {
    background:#e7e7e7;
    padding:0 .4em;
    border-radius: .5em;
    border:1px #0080c0 solid;
}
.nav ul {
    list-style-type: none;
    margin:0;
    padding:0;
}
.nav ul li {
    display: inline; /* horizontale Ausrichtung des Menüs */
    line-height:2.5;
    padding: .3em;
    margin: .1em;
    background:#FCA1B0;
    white-space: nowrap;
    border:1px #0080c0 solid;border-radius:.5em; 
}
.nav ul li a {
    color:black;
    text-decoration: none;
    background:#e7e7e7;
    margin:-.3em;
    padding: .3em ;
}
.nav ul li a:hover {
    color:#0a0;
    background:white;
}
.nav li.sdocs a {
    text-decoration: underline;
    font-weight: bold;
}

/**********************/
/*    Navigation 2    */
/**********************/
.nav2 {
    float:left; /* right  */
    width: 19em;
    clear:left; /* right  */
}
.nav2 ul {
    list-style-type: none;
    padding:.3em 0 .01em 0;
    margin:1em 0 1em 0;
    background:#eaeaea;
    border-radius: .5em;
    border:1px #0080c0 solid;
}
.nav2 ul li {
    margin: 0 .5em .6em .5em ;
    padding: 0 .5em 0 .5em;
    background:#FCA1B0;
}
.nav2 ul li a {
    color: black;
    text-decoration:none;
    margin: 0 -.6em 0 -.6em;
    padding: 0 .5em 0 .6em;
    background:#eaeaea;
    display:block; /* vertikale Ausrichtung des Menüs */
}
.nav2 ul li a:hover {
    color:#0a0;
    background:white;
}
.nav2 ul li ul  {
    margin:0 -1em 0 1em;
    padding: .5em 0 0 0;
    border-radius: .5em;
    border:1px #0080c0 solid;
}
.nav2 ul li ul li {
    padding-left: 1em;
    margin-left:0;
}
.nav2 ul li ul li a {
    margin-left:-1em;
    padding-left: 1em;
}

Hartmut Keil - http://cmsimplexh.webdesign-keil.de - Stand: 07.01.2016