Formatering af listemenuen

Menutræ

I de tidligere eksempler har mit mål været at præsentere min menu som en kasse bestående af flere mindre kasser, én til hvert menupunkt.

Et alternativ kan være at præsentere menuen, så den afspejler webstedets træstruktur. Det er det, du ser til højre.

Stylesheet'et til denne udgave af menuen er:

#menu9 {
  position:relative;
  padding: 0; 
  margin: 2em 0 0 0;
  font-weight: bold;
  font-size:12px;
  font-family:arial,verdana, sans-serif;
  width: 11em;
  border-width: 1px 1px 0 0;
  border-style: solid;
  border-color: gray; }
  
#menu9 li {
  list-style: none; 
  padding: 0; 
  margin: 0.5em 0;
  text-align: right;}
  
#menu9 li a {
  padding-right: 0.5em; 
  border-bottom: 1px solid gray;
  text-decoration: none;}
  
#menu9 li a:link {
  color: #448;}

#menu9 li a:visited {
  color: #667;}

#menu9 li a:hover {
  border-color: red; 
  color: #000;}

#menu9 h4 {
  display: inline; 
  margin: 0; 
  padding: 1px 0.33em;
  position: relative; 
  top: -1em; 
  font-size: 1.1em;
  background: white; 
  border: 1px solid gray;}

#menu9 #title {
  text-align: left;} 

Spejling af menuen

Med nogle ganske få ændringer kan denne menu spejles, det vil sige vises som en venstrestillet menu.

Webdesign - illustreret håndbog
Webdesign med XHTML

– 2 gode bøger om webdesign
Køb dem hos forlaget Globe A/S