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

Dropdown menu eksempel 7c

Dette eksempel er en videreførelse af eksempel 7. Problemstillingen er nu at vi gerne vil bevare den elastiske bredde på både menuspalten og artikelspalten. Problemet knytter sig til menuen, som vi nu ønsker skal blive smallere eller bredere alt efter bredden af #menucol-elementet.

Der er kun én måde at gøre det på, og det er at give menu-elementet en procentvis bredde:

div#menucol ul {
  font-family:arial,sans-serif;
  margin: 0; padding: 0; 
  width: 90%; 
  background: white;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-color:#257;  }
  
div#menucol li {
  position: relative; 
  list-style: none; 
  margin: 0;
  border-bottom: 1px solid #257; 
  z-index:9;}
  
div#menucol li:hover {
  background-color: #aaf;}
  
div#menucol li.sub {
  background-image:url(rarrow.gif);
  background-position:right center;
  background-repeat:no-repeat;}
  
div#menucol li a {
  display: block; 
  padding: 0.25em 0 0.25em 0.5em;
  text-decoration: none; 
  width:90%;}
  
div#menucol>ul a {
  width: auto;}
  
div#menucol ul ul {
  position: absolute; 
  top: -1px; 
  left: 100%;
  display:none;}
  
div#menucol ul.niveau1 li.sub:hover ul.niveau2,
div#menucol ul.niveau2 li.sub:hover ul.niveau3 {
  display:block;}

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

Du kan selv vurdere resultatet.

Jeg har opnået den ønskede effekt, at menuens bredde ændres alt efter, hvor meget plads der er til den.

Der kan komme et problem. Hvis linksterne bliver meget lange, vil de blive omrbudt til 2 eller flere linier. Det synes jeg ikke gør noget, hvis det kun er nogle få links det drejer sig om. Du kan give mere plads til tekst ved at gøre #menucol- elementet bredere eller gøre menuteksten mindre. Tekststørrelsen er jo rigelig i disse eksempler.

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.