Gå til innhold

trenger hjelp til navigasjonsbar som skal skifter farge


Anbefalte innlegg

Jeg holder på å kode en webside der jeg vil at navigasjonsbaren øverst skifter farge etter hvilken side du er på.

 

Jeg fant denne (http://www.w3schools..._float_advanced) og håpte at den kunne løse problemet.Dessverre er den bare farge når aktiv...

 

Er det noen som vet om det går ann å få den til å holde fargen helt til jeg skifter side? (og da uten å bruke bilde hvor bilde endrer seg)

 

På forhånd takk :)

Lenke til kommentar
Videoannonse
Annonse

Halloen du, slenger meg innpå!

 

F.eks om du har ei nettside med en meny som inneholder følgende, hjem, tull, og info. Og skal vise at du er på hjem og ikke tull eller info kan du sette en id="noe_her" i en li tag.

 

Om du er på index siden så blir da menyen noe slikt:

Meny

 

Det eneste du må gjøre da er å pynte opp id taggen i f.eks ei css fil slik at fargen forandrer seg.

css eksempel

 

Da vil resten av menyen ha den originale fargen på skrifta mens index-siden (i dette tilfelle) vil ha en anna farge.

Og for å spesifisere ei anna side, klipper du bare ut id="noe_her" og limer den inn på en annen li tag.

 

 

 

Må beklage norsken min, den er ikke noe vakkert å høre til tider! :p

Lenke til kommentar
Bruk id. I CMSet jeg bruker har jeg skrevet en menygenerator som setter id-en til hvert li-element.

Det der ga ingen mening for meg, kan du skjekke rettskriving og punktum/komma :)

Kan du utdype, eventuelt vise til kode?

Jeg skriver så rett som en planke.

 

Det jeg mener, er at du må assigne en id til hver av li-elementene i menyen din. Når du har gjort dette kan du referere til dem i CSS og assigne dem hver sin farge. Så kan du sette en klasse på det li-elementet som gjelder for gjeldende side.

 

HTML:

<ul class="menu">
 <li id="forside"><a href="/forside">Forside</a></li>
 <li id="omoss" class="active"><a href="/om-oss">Om oss</a></li>
 <li id="kontakt"><a href="/kontakt">Kontakt</a></li>
</ul>

 

CSS:

ul.menu {
 list-style-type: none;
 margin: 0;
 padding: 0;
}

ul.menu li {
 float: left;
}

ul.menu li a {
 display: block;
 padding: 3px 10px;
 background: #333;
 color: #fff;
}

ul.menu li.active#forside a { background: #300; }
ul.menu li.active#omoss a { background: #030; }
ul.menu li.active#kontakt a { background: #003; }

Endret av LostOblivion
Lenke til kommentar

Mange fine forslag, men han må fortsatt angi hvilken side han er på. Jeg foreslår å gi &--#60;body&--#62;-taggen en egen ID, og deretter gjøre noe lignende dette:

 

body#bilder ul.meny li#bilder { background: pink; }
body#kontakt ul.meny li#kontakt { background: orange; }

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
×
×
  • Opprett ny...