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

Dropdownmenu med grafisk baggrund

“Hemmeligheden” bag denen udførsel af en dropdown navigationsbjælke er først og fremmest bruge af background-attachment:fixed formreglen.

Denne formregel betyder, at et baggrundsbillede fikseres i forhold til browservinduet, men kun ses igennem det element, der har det samme baggrundsbillede.

div#navbar ul li a { 
  background-image:url(brohigh.jpg);
  background-position:left top;
  background-repeat:no-repeat;
  background-attachment:fixed;
  ...

Ovenstående viser et det udsnit af brohigh.jpg, der ligger under a-markøren, uanset hvor markøren er positioneret i forhold til browservinduet. Herunder ser du formdeklarationen for :hover-standen, hvor en anden udgave af baggrundsbilledet kommer i spil. Denne udgave en noget udtyndet i farverne.

div#navbar a:hover { 
  background-image:url(brohighdim.jpg);} 

For at være sikker på at baggrundsbilledet er højt nok til at dække også de nederste menupunkter har jeg ændret noget på højde/bredde-forholdet.

Med dette standardbillede er det noget vanskeligt at sikre god kontrast mellem menupunkternes tekst og baggrunden. Hvis du vil arbejde med et sådant projekt skal du nok finde et billede med en lidt mindre dynamik i billedets nederste del.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam bibendum tempor nulla. Sed commodo. Aliquam feugiat lorem nec sem. Nullam consequat tristique libero. Suspendisse id erat. Duis ante sem, laoreet nec, nonummy non, posuere at, sapien. Nam porta. Cras sapien tortor, vehicula at, scelerisque quis, consequat at, enim. Fusce quis tortor. Quisque magna. Proin nunc. Phasellus purus metus, tempus a, lobortis in, mollis sed, erat. Nulla facilisi. Curabitur wisi.