1. Forsiden
  2.  » Navigation
  3.  » Dropdown menu artikel

Dropdown menu eksempel 7a

Dette eksempel er en videreførelse af eksempel 7. Problemstillingen er følgende: Hvis vi ønsker procentvise bredder af vore spalter, hvordan vil menuen – der jo har nogle absolutte mål i em'er – så opføre sig?

I første omgang nøjes jeg med at ændre layoutet fra:

div#page {
  position:relative 
  width:45em;
  margin:1em auto; 
  background:#efefff;
  border:1px solid #257;}

div#menucol {
  width:13em;
  float:left;
  padding-top:30px;}

div#rightcol {
  margin-left:13em;
  border-left:1px solid #257;
  padding-left:1em;}

til

div#page {
width:90%;
margin:1em auto; 
background:#efefff;
border:1px solid #257;}

div#menucol {
width:20%;
float:left;
padding-top:30px;}

div#rightcol {
margin-left:25%;
border-left:1px solid #257;
padding-left:1em;}

I ovenstående har jeg markeret ændringerne i forhold til eksempel 7 med rødt.

Hele formålet med øvelsen er at gå fra et fikseret layout til et elastisk layout. Derfor har jeg sat hele sidens bredde til 90% og afsat en venstre margin til menuen. Denne margin har en bredde på 25 procent, mens menucol har fået en bredde på 24 procent.

En anden og sekundær, men vigtig konsekvens af den elastiske bredde er, at billedet i banneret så at sige slipper op, hvis browservinduet gøres for eksempel 1280 pixel op.

For at undgå dette har jeg også gjort billedet elastisk. Den øvelse har jeg beskrevet i detaljer på websiden Noter om baggrundsgrafik.

Resultatet

Så længe menuen i sig selv har en absolute bredde, vil der uundgåeligt komme situationer, hvor menuen og artikelindholdet kommer til at overlappe hinanden. I dette eksempel sker det ved en bredde af browservinduet på ca. 880 pixel. Omvendt, ved en meget stor bredde af browservinduet, kommer der en frygtelig mængde luft på højre side af menuen, imellem menuen og artikelteksten.

Resultatet

Så længe menuen i sig selv har en absolute bredde, vil der uundgåeligt komme situationer, hvor menuen og artikelindholdet kommer til at overlappe hinanden. I dette eksempel sker det ved en bredde af browservinduet på ca. 880 pixel. Omvendt, ved en meget stor bredde af browservinduet, kommer der en frygtelig mængde luft på højre side af menuen, imellem menuen og artikelteksten.

Jeg har to løsninger på det problem – nemlig enten at give #menucol-elementet en fikseret bredde, eller at konstruere menuen så den bliver elastisk.

Det sidste, tror jeg, bliver en smule svært (i hvert fald mens jeg skriver dette og før jeg har prøvet det).

Men også ud fra en betragtning om, at menuer jo sjældent behøver at være elastiske, vil jeg først satse på at lave det et float-layout med en fikseret venstre spalte og det samme dropdown menupanel som i dette eksempel.

Det er eksempel 7b.