Overvejelser om universal menupanel

Under arbejdet med præsentationen af eksemplerne blev jeg opmærksom på, at mit ellers meget anvendelige CSS-menupanel (eksempel 22-08) under visse omstændigheder kan opføre sig lidt mærkeligt i Internet Explorer 6.

Derfor denne artikel, hvor jeg peger på, hvordan denne opførsel kan hindres.

Jeg benytter tillige lejligheden til at fortælle en smule om, hvorledes du kan gøre menuen mere visuelt attraktiv.

CSS-menupanel viser den samme menu som i bogens eksempel 22-8, men i dette eksempel indsat som en integreret del af en webside.

Websiden er layoutet med følgende formdeklarationer:

div#side {
  position:relative;
  width:45em;
  margin:0 auto;
  border:1px solid black;
  background:#efefef;}
div#menucontainer {
  position:absolute; 
  left:20px; 
  top:30px;
  width:210px;
  padding-right:20px;}
div#indhold {
  margin:0 auto 0 240px;
  padding:0 1em; 
  border-left:1px solid black;}

Dette skaber en webside med en venstrestillet menuspalte, der er positioneret absolut i marginen af div#indhold-spalten. I menuspalten placeres den 200 pixel brede menu samt en nyhedsboks, der i sagens natur bliver så bred som menuspalten tillader. Det er 210 pixel.

Hvis du vil se/kopiere stylesheet'et til hele eksempelsiden, må du bruge browserens Vis kilde-funktion.)

Variabel bredde

Der er flere gode grunde til at bruge procentvise bredder, så websidens bredde indretter sig efter bredden på brugerens browservindue. Derfor har jeg lavet eksemplet CSS-menupanel I.

Denne eksempelside er layout med følgende formdeklarationer:

div#side {
  position:relative;
  width:90%;
  max-width:900px;
  min-width:600px;
  margin:0 auto;
  border:1px solid black;
  background:#efefef;}
div#menucontainer {
  position:absolute; 
  left:10px; 
  top:35px;
  width:25%;}
div#indhold {
  margin:0 auto 40px 28%;
  padding-right:1em; padding-left:1%;
  border-left:1px solid black}

Som det ses af eksemplet, er det problemløst at ændre på layout, således at hele websidens bredde ændres med browservinduet, og menuspalte og indholdsspalte dermed også ændres proportionalt.

Float'et venstre kolonne

CSS-menupanel II viser menuen indsat i et ganske populært layout, der på overfladen ikke ser anderledes ud end de foregående eksempler, men til forskel fra disse er lavet med float-egenskaben:

div#side {
  position:relative;
  width:90%;
  margin:0 auto;
  border:1px solid black;
  background:#efefef;}
div#menucontainer {
  float:left;
  margin-top:35px;
  padding-left:1.5em;
  width:25%;}
div#indhold {
  margin:0 auto 40px 30%;
  padding-right:1em; padding-left:2%;
  border-left:1px solid black}

Hvis du fører musen hen over menuen i dette eksempel, vil du opleve Internet Explorers "Three-pixel Text Jog" for fuld udblæsning.

Dette "Three-pixel Text Jog" er det fænomen, at tekst, der flyder op på højre side af et floatet element, indrykkes 3 pixel. Den indrykning forsvinder, når et link i den float'ede boks kommer i :hover-stilstand. Dermed ser det ud som om teksten rykker 3 pixel til venstre, men i virkeligheden er det kun de tekstasfnit, der står til højre for den floatede elements tekstindhold.

Der er et middel mod dette – se http://www.positioniseverything.net – men det kræver en del rettelser i stylesheet koden med stylesheet hacks, der er tvivlsomme i Internet Explorer 7.

Den grimme løsning

I stedet for at hekse rundt med denne som sagt tvivlsomme IE6 only løsning foretrækker jeg at snyde lidt på vægten med marginer og padding, og sætte visse værdier i em'er i stedet for procenter. Det har jeg faktisk allerede gjort i stylesheet'et herover, idet padding-left for #menucontainer er sat til 1.5em.

div#side {
  position:relative;
  width:90%;
  margin:0 auto;
  border:1px solid black;
  background:#efefef;}
div#menucontainer {
  float:left;
  margin-top:35px;
  padding-left:1.5em
  width:25%;}
div#indhold {
  margin:0 auto 40px 30%;
  padding-right:1em; padding-left:1.5em;
  border-left:1px solid black;}

For at få menukassen og nyhedskassen til at have samme bredde, skal vi gør det umulige, nemlig lægge procenter og pixler sammen i det stylesheet, der serveres for IE6:

<!--[if lt IE 7]>
<style type="text/css" media="screen">
ul.menu li { 	display:inline; }
ul.menu a {width:96%;}
</style>
<![endif]-->

Don't ask som de siger derovre, og det betyder: lad være med at spørge, hvordan jeg er kommet frem til 96 procent for bredden på a-markøren.

Resultatet er CSS-menupanel III, hvor intet rykker sig, når musen føres hen over menuen, og hvor menuen er lige så bred som nyhedsboksen.

Hvis du vil se kildekoden til hele eksemplet, må du bruge browserens Vis kilde-funktion.

Menuens udseende

Menuen i alle disse eksempler er jo visuelt forholdsvis banal. Du kan eksperimentere med formateringen af a-markøren for at få en mere interessant udseende menu.

I eksemplet CSS-menupanel IV har jeg skilt menupunkterne fra hinanden med en lille margin:

ul.menu li a { 
  text-decoration:none;
  color:#fff; 
  background-color:#457;
  display:block;
  /* margin:0; */
  margin:2px 0;
  padding:3px 5px; 
  font-size:100%;
  /*border-top:1px solid #257;*/
  border:1px solid #257; }

ul.menu li a:visited { 
  color:#ddd; 
  background-color:#457; }

ul.menu li a:hover { 
  color:#457; 
  background-color:#efefef; }

Og i eksemplet CSS-menupanel V har jeg yderligere mingeleret lidt med rammekanten:

ul.menu {	
  font-family:arial, sans-serif;
  font-size:90%;
  font-weight:bold;
  list-style: none; 
  width:198px; 
  /*background-color:#fff;
  border-width:0 1px 1px 1px;
  border-style: solid; 
  border-color: #257; */
  margin: 0; 
  padding:0; }

ul.menu li a { 
  text-decoration:none;
  color:#fff; 
  background-color:#457;
  display:block;
  /* margin:0; */
  margin:2px 0;
  padding:3px 5px; 
  font-size:100%;
  /*border-top:1px solid #257;*/
  border-top:1px solid #457;
  border-right:5px solid #457;
  border-bottom:1px solid #457;
  border-left:1px solid #457;}

ul.menu li a:visited { 
  color:#ddd; 
  background-color:#457; }
  
ul.menu li a:hover { 
  color:#457; 
  background-color:#efefef; 
  border-right:5px solid #457;
  }

Jeg er sikker på, at din fantasi rækker længere end min, så lav dine egne eksperimenter.

Grafisk menu

For så vidt angår brugen af disse principper til en grafisk menu, er der i bogen adskillige eksempler på dette.

Denne side er senest opdateret: 16. November, 2006