CSS menysystem: Hjelp med enklere hovereffekt

[AnaXyd]

Heisann!

 

Jeg driver å setter opp en meny i CSS nå, og har en hovereffekt med bilde og alt i css. Det jeg er ute etter, er en enklere funksjon for de sidene man er på, istedet for å bytte ut hele menybildet. Har sett noen bruker span og classes for å fikse dette, men jeg får det ikke helt til.

 

Det skal altså være ett fast bilde på det menybildet som samsvarer med den siden man er på.

 

Hvis dere ser på siden under, er det slik. Bare her har jeg brukt DW's egen heftige javascript for å generere hovereffekt (juhu?) og bare legger inn et fast bilde uten hover på de riktige sidene.

 

Tendo UB

 

Her er koden jeg bruker på den nye:

 

HTML

Klikk for å se/fjerne innholdet nedenfor

<ul id="meny">
		<li><a href="/" class="hjem">Hjem <span></span></a></li>
		<li><a href="produkter.php" class="produkter">Produkter <span></span></a></li>
		<li><a href="butikk.php" class="butikk">Butikk <span></span></a></li>
		<li><a href="om_oss.php" class="omoss">Om oss <span></span></a></li>
		<li><a href="aktuelt.php" class="aktuelt">Aktuelt <span></span></a></li>
	</ul>

 

CSS

Klikk for å se/fjerne innholdet nedenfor

#meny {
 list-style: none;
 padding: 0;
 margin: 0;
 width: 900px;
 height: 36px;
 background: url(images/meny/bg.meny.gif) no-repeat;
 position: relative;
}

#meny span {
 display: none;
 position: absolute;
}

#meny a {
 display: block;
 text-indent: -900%;
 position: absolute;
 outline: none;
}

#meny a:hover {
 background-position: left bottom;
}

#meny a:hover span {
 display: block;
}

#meny li.active { /*<-- Prøvde meg på en class, men funkerte ikke*/
 width: 140px;
 height: 36px;
 background: url(images/meny/btn.meny.hjem.hover.gif) no-repeat;
 left: 0px;
 top: 0px;
}

#meny .hjem {
 width: 140px;
 height: 36px;
 background: url(images/meny/btn.meny.hjem.gif) no-repeat;
 left: 0px;
 top: 0px;
}


#meny .produkter {
 width: 140px;
 height: 36px;
 background: url(images/meny/btn.meny.produkter.gif) no-repeat;
 left: 140px;
 top: 0px;
}

#meny .butikk {
 width: 100px;
 height: 36px;
 background: url(images/meny/btn.meny.butikk.gif) no-repeat;
 left: 280px;
 top: 0px;
}

#meny .omoss {
 width: 110px;
 height: 36px;
 background: url(images/meny/btn.meny.omoss.gif) no-repeat;
 left: 380px;
 top: 0px;
}
#meny .aktuelt {
 width: 122px;
 height: 36px;
 background: url(images/meny/btn.meny.aktuelt.gif) no-repeat;
 left: 490px;
 top: 0px;
}

 

 

Jeg føler det blir litt tungvint å klundre med å bytte ut bilder og styre, når det helt sikkert finnes enklere løsninger!

 

 

Noen som veit? Si gjerne ifra om dere ikke skjønner hva jeg mener!

Endret 18. desember 2007 av AnaXyd

[Jesper Karsrud]

Tja, du har jo den muligheten å kun bruke ett bilde som du flytter på ved hjelp av background-position. Det er den beste og letteste løsningen vil jeg si, da du slipper loading av hover-bildet.

[Kenny Bones]

Går da an å bruke

 

#my_button:hover {
background-position: -200px;
}

 

Hvilket som betyr at det bildet som brukes som knapp er dobbelt så langt. Når du da legger musepekeren over så flyttes bildet såså mange pixler og den nye staten vil da vises.

 

 

Les mer om det her:

http://www.daobydesign.com/blog/2007/08/01...-hover-effects/

[Jesper Karsrud]

Som jeg sa; bruke ett bilde, som flyttes ved hjelp av background-position ved hover.

[AnaXyd]

Tja, du har jo den muligheten å kun bruke ett bilde som du flytter på ved hjelp av background-position. Det er den beste og letteste løsningen vil jeg si, da du slipper loading av hover-bildet.

Det er vel det som akkurat blir gjort i det utkastet jeg har nå? Bare at jeg trenger en slags active class for de sidene hover effekten skal være fast. Noen mulighet for å fikse dette?

 

Takk for svar forresten..

Endret 21. desember 2007 av AnaXyd

[Kim T]

er det a:active du tenker på?

 

Du har jo fire stadier av a tag'en. Visited,active,hover og link. Mener du kan style a:active med background position slik du vil. Eller med et annet bilde.

 

Kim...

[Jesper Karsrud]

Men husk at :active-staten kun slår inn i det du trykker på linken, aldri ellers. Hvis du vil bruker :active til å markere aktiv side, vil du aldri få det til å fungere, da CSS ikke har noen som helst peiling på hvilken side du er inne på, eller hvilken link du har trykket på.

[Kenny Bones]

Stemmer da ikke helt det Jesper? Er jo flere som bruker CSS til å markere hvilken side man er på. Skal jo være bare å legge til body <class="klassen"> på hver side som referer til den klassen så holdes active-staten aktiv?

 

Like this?

http://www.456bereastreet.com/archive/2005...state_with_css/

 

Dog, sliter jeg voldsomt med det samme selv..

[AnaXyd]

Har nå fått det til, ved å gi body en spesiell id på hver side slik som du nevner.. Syntes det blir litt tungvint å gjøre dette på hver side, men det fungerer!

 

Får du det ikke til enda? Kan dele den koden jeg bruker:

 

 

HTML

Klikk for å se/fjerne innholdet nedenfor

<ul id="nav">
  <li class="blogg"><a href="<?php echo get_settings('home'); ?>/" title="Home"></a></li>
  <li class="portfolio"><a href="http://anaxyd.tendoub.no/wp/?page_id=3" title="Portefølje"></a></li>
  <li class="about"><a href="http://anaxyd.tendoub.no/wp/?page_id=2" title="About"></a></li>
</ul>

 

 

CSS

Klikk for å se/fjerne innholdet nedenfor

body#blogg .blogg a{
background: url(images/btn.submeny.blogg.gif) no-repeat left bottom;
}

 

Men a:active syntes jeg ikke at fungerte spesielt bra. Mulig jeg ikke gjorde det riktig..

Endret 23. desember 2007 av AnaXyd

[Jesper Karsrud]

Stemmer da ikke helt det Jesper? Er jo flere som bruker CSS til å markere hvilken side man er på. Skal jo være bare å legge til body <class="klassen"> på hver side som referer til den klassen så holdes active-staten aktiv?

Jada, men ikke ved å bruke :active. Gir man body en id er det jo selvfølgelig mulig, men det er ikke det samme som å bruke :active, som jeg nevnte.