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:
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
| « vorige Seite | Seitenanfang | nächste Seite » |