Hjelp til CSS rollover i meny

[AnaXyd]

Heisann!

 

Lurer på hvordan jeg kan klare å lage en slik rollover effekt i en meny, som illustrert her:

 

 

Jeg ser at rollover effekten er uavhengig av bredde, så du kan ha så lang tekst som overhode mulig, og den passer fremdeles. Har også prøvd meg på å bare kopiere koden til siden jeg har sett på, og testet om dette ville fungere. Det gjorde det dermed ikke.

 

Her er koden:

 

HTML

Klikk for å se/fjerne innholdet nedenfor

<ul id="sub-menu">
	<li><a href="#"><span>Kontakt oss</span></a></li>
	<li><a href="#">Om oss</a></li>
	</ul>

 

CSS

Klikk for å se/fjerne innholdet nedenfor

#sub-menu {	list-style-type: none;	height: 37px;	_height: auto;	float: right;	margin: 0 !important;	padding: 0 !important; }
#sub-menu li {	background: none;	float: left;	display: inline;	/*margin: -3px 0 0 14px;*/	height: 37px; }
#sub-menu li a {	display: block;	float: left;	height: 37px;	color: #333;	font-size: 0.975em;	text-transform: uppercase;	text-decoration: none;	font-weight: bold;	letter-spacing: 0.01em;	/*padding: 0 0 0 16px; }*/
#sub-menu li.active {	background: #FFF url(images/bg-submenu-active-li.gif) 0 100% no-repeat; }
#sub-menu li.active a {	background: url(images/bg-submenu-active-a.gif) 100% 100% no-repeat;	color: #ffb117; }
#sub-menu li a span {	padding: 12px 16px 0 0;	float: left;	height: 27px;	cursor: pointer; }

 

Jeg har de to bildene som trengs på riktig plass også:

 

 

Hva gjør jeg galt, og hva kan jeg gjøre for å få mekket denne riktig? Setter pris på svar!

Endret 24. november 2007 av AnaXyd

[Runar]

For det første, har du ikke spesifisert (morsomt ord) hva som skal skje når man tar musepekeren over menyen din. Prøv å legg et bakgrunnsbilde på en #sub-menu li a:hover eller hvor du nå har satt det "vanlige" bakgrunnsbildet.

[AnaXyd]

Det er det jeg også har lagt merke til, men jeg finner ikke den :hover greia i kildekoden jeg driver å graver i heller... Kanskje jeg leter på feil sted?

[Thullball]

Er et kodeeksempel på en CSS rollovermeny her:

http://mgmweb.no/kodeeksempler/css/meny/horisontal-css-meny

 

Vet ikke om det er noe slikt du er ute etter?

[AnaXyd]

Nja, på en måte.. Det som er spesielt med den jeg har funnet i førsteposten, er at bredden kan være uavhengig. Og jeg vil ha omtrent det samme utseendet som i bildet i førstepost også..

[Anders Moen]

Det er det jeg også har lagt merke til, men jeg finner ikke den :hover greia i kildekoden jeg driver å graver i heller... Kanskje jeg leter på feil sted?

Hvilken side er det vi prater om da? Kunne kanskje ha funnet den for deg om du hadde posta den

[AnaXyd]

www.keyteq.no

 

For en pen side!

Endret 25. november 2007 av AnaXyd

[AnaXyd]

Ah! Der fant jeg resten av koden også... (hover funksjonen)

 

/* SUB MENU DYNAMIC HOVER  ============================ */
#sub-menu li a:hover {	color: #ffb117;	background: #FFF url(images/bg-submenu-active-li.gif) 0 100% no-repeat; }
#sub-menu li a:hover span {	background: url(images/bg-submenu-active-a.gif) 100% 100% no-repeat; }

 

Men fremdeles er det sikkert en hel haug i denne koden jeg kan luke bort.. Eller?

 

Prøver selv nå, men hadde vært fint om noen kunne ha hjulpet meg..

[Runar]

Jeg anbefaler at du lærer deg hvordan HTML og CSS fungerer sammen. Hvis du skal begynne å klippe ut det som ikke er høyst nødvendig for å få til en rollover-funksjon uten å ha den minste anelse om hva du gjør, kan det "gå galt".

 

Les litt på HTML Dog.

[Haraldson]

Er jeg som har koda menyen, men jeg har ikke planer om å hjelpe deg med å rippe den... Syns du kan lage noe eget.

[Steinmann]

Er jeg som har koda menyen, men jeg har ikke planer om å hjelpe deg med å rippe den... Syns du kan lage noe eget.

Stå på krava!

[AnaXyd]

Er jeg som har koda menyen, men jeg har ikke planer om å hjelpe deg med å rippe den... Syns du kan lage noe eget.

Okay, har fått den til, men har ingen planer om å lage den lik. Var bare den bredden som er uavhengig som er litt fiffig..