Lave menu til hjemmeside

Tags:    html css javascript

Hej
Jeg er igang med at lave eksamensprojekt i IT A på min uddannelse, og i den forbindelse laver vi i min gruppe en inspirationssite/blog/portal.
Sagen er den at vi rigtig gerne vil have et helt bestemt design på vores menu, men jeg synes ikke rigtig at jeg kan få det til at virke.
Vi vil gerne lave en menu der ligner den på costume.dk.
Er der nogen der kan hjælpe mig med at lave en menu der minder om den sorte menu på linket ovenfor?



6 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 14 karma
Sorter efter stemmer Sorter efter dato
Jeg har altid været fan af simpel HTML og kompleks CSS, af den simpel grund det performer bedre på mine favoritområder.

Gad ikke style søgeboksen, og det er kun sikkert at det renderes nogenlunde i Chrome. :)
Fold kodeboks ind/udHTML kode 




Hej Kenneth.

Du sætter current ved at tjekke hvilken side du er på.

Fx.

<li class=" <?php if($_GET['side'] == 'forside') { echo ' current'; } ?>">
Forside</li>





mhh... Den ser ud til at være forholdsvis simpel.

Du kan lave to div elementer, en med den sorte menu, og en med undermenuen nedenunder den sorte menu (den hvide af dem).

I begge div kan du så have en usorteret liste (ul) med nogle list items (li). Et eksempel kunne være
Fold kodeboks ind/udHTML kode 

Du kan så med noget CSS positionerer dine list items, så de ligger ned, og de får de farver du ønkser.

Kig evt. på deres kildekode på siden og se hvordan de har lavet det - så vidt jeg kan se har de ikke lavet div omkring dem, men kun brugt <ul> og <li> tags for menuen.



Fold kodeboks ind/udHTML kode 


Ved <li class="current"> Skal du angive den som den side du er på f.eks "Home" og give den baggrunden hvid som du ser på costume.dk.
Ved de andre skal du angive en a:hover effekt så når du kører mussen over a href'en vil den blive grå i baggrunden.
Alt dette kan klares med klassisk CSS eller piftes op med CSS3.

Så som Martin har sagt skal der anvendes CSS til denne sag.
Sæt body'en så den sidder helt fast oppe i toppen af din browser.
Fold kodeboks ind/udCSS kode 





Indlæg senest redigeret d. 28.03.2012 20:58 af Bruger #17149
Tak for det Michael. Det virker helt perfekt. Jeg har tilføjet hover på den øverste menu, men jeg skulle måske have fortalt lidt omkring hvordan jeg indsætter menuen på min side.
Jeg gør nemlig sådan:
Fold kodeboks ind/udHTML kode 

Hvordan sætter jeg så li class="current", når jeg bruger den metode. Det er selvfølgelig ikke et krav at jeg gerne vil have at den highlighter den side jeg er på med li class="current", men det ville da være en ekstra lille bonus. Jeg kunne forestille mig at det muligvis fixes med noget javascript, men hvordan det skal gøres ved jeg ikke



super tak :)



t