meny med bildbyte

Citera flera Citera

2010-08-18 20:31

Teknocide

Medlem ★

Registrerad: Sep 2007

●

Testa något sånt här:

CSS:
#hoverItem1 {
   background:url(out1.png) no-repeat top left;
}

#hoverItem1:hover {
   background:url(over1.png) no-repeat top left;
}

HTML:
...

<ul>
   <li id="hoverItem1">Test</li>
</ul>

Visa signatur

Kom-pa-TI-bilitet

Citera flera Citera

2010-08-18 22:02

Perrablerra

Medlem ★

Plats: Fjollträsk
Registrerad: Feb 2005

●

Det där såg ju trevligt ut. Dock hamnar de nedanför varandra och inte bredvid varandra som jag hade tänkt mig. Finns det något man kan göra åt det??

Visa signatur

Citera flera Citera

2010-08-18 22:13

Teknocide

Medlem ★

Registrerad: Sep 2007

●

Ändra CSS-en för listan så att de läggs på rad istället. Det kan göras med exempelvis float:left eller display:inline på LI-elementen

Visa signatur

Kom-pa-TI-bilitet

Citera flera Citera

2010-08-18 23:06

Perrablerra

Medlem ★

Plats: Fjollträsk
Registrerad: Feb 2005

●

Kalas. Tack. ska prova när jag kommer hem från jobbet imorgon bitti

Visa signatur

Citera flera Citera

2010-08-19 13:45

Garret

Medlem

Plats: Stockholm
Registrerad: Feb 2003

●

Tänk på att äldre webbläsare inte klarar av :hover på annat än länkelement.

Citera flera Citera

2010-08-19 16:28

Perrablerra

Medlem ★

Plats: Fjollträsk
Registrerad: Feb 2005

●

Ev kan jag göra en sida för äldre senare som folk nu skulle ha problem.

Jag får dock ingen ordning på var bilderna plaseras + att alla länkar får en punkt före sig. Hur fixar man detta??

Visa signatur

Citera flera Citera

2010-08-20 12:30

Garret

Medlem

Plats: Stockholm
Registrerad: Feb 2003

●

Hur menar du med att du inte får koll på var bilderna placeras?

För att få bort listpunkten:

#hoverItem1 {
  list-style-type: none;
}

Citera flera Citera

2010-08-21 18:31

Perrablerra

Medlem ★

Plats: Fjollträsk
Registrerad: Feb 2005

●

Alla bilder hamnar till vänster när de ska vara efter varandra på en rad. Fick inte till det med det Teknocide skrev tidigare. Exakt hur ska jag skriva in det??

Senast redigerat 2010-08-21 18:46

Visa signatur

Citera flera Citera

2010-08-23 18:20

save

Medlem

Plats: Stockholm
Registrerad: Feb 2005

●

Felaktig markup (se post nedan)

Det bästa är om du sätter ihop bilderna så slipper du preloada dem med javascript/dölja med en div för att slippa laddning vid mouse over. Koden ovan är otestad dock.

Senast redigerat 2010-08-25 13:39

Visa signatur

Citera flera Citera

2010-08-24 17:07

Perrablerra

Medlem ★

Plats: Fjollträsk
Registrerad: Feb 2005

●

Får inte upp några bilder alls :S

Visa signatur

Citera flera Citera

2010-08-25 13:23

save

Medlem

Plats: Stockholm
Registrerad: Feb 2005

●

Skrivet av nussse:

Får inte upp några bilder alls :S

Gå till inlägget

I made a woopsie.
Gjorde ett exempel till dig: Menu

<html>
<head>
	<style>
	#hoverItem1 a, #hoverItem2 a {background: no-repeat top left; width:100px; height:50px;}
	#hoverItem1 a:hover, #hoverItem2 a:hover {background: no-repeat top right;}
	#hoverItem1 a, #hoverItem1 a:hover {background-image: url(menuitem.jpg);}
	#hoverItem2 a, #hoverItem2 a:hover {background-image: url(menuitem.jpg);} /*Ändra till nästa bild och lägg till fler vid behov*/
	#menu ul {list-style-type: none;}
	#menu ul, ul li {margin:0;padding:0;}
	#menu ul li {float:left;}
	#menu ul li a {display:block;}
	</style>
	<title>Menu</title>
</head>

<body>
	<div id="menu">
		<ul>
			<li id="hoverItem1"><a href="#"></a></li>
			<li id="hoverItem2"><a href="#"></a></li>
		</ul>
	</div>
</body>
</html>

Sätter man bakgrundsbild på a-elementet istället för list-elementet så gillar IE läget.
Är du med på hur man kan bunta ihop selektorer som jag gjort här? Det förenklar om det blir många objekt, helst så bör dock inte en huvudmeny överstiga 7 objekt men det blir ändå lite snabbare att redigera i slutändan.

Beroende på kravet på menyn så bör man även oftast använda text istället för bilder, så att bakgrundsbilden är densamma för alla. Exempel:

<html>
<head>
	<style>
	#menu ul {list-style-type: none}
	#menu ul, ul li {margin:0;padding:0}
	#menu ul li {float:left}
	#menu ul li a {color:#666; display:block; text-align:center; padding-top: 14px; background: url(menuitem.jpg) no-repeat top left; width:100px; height:50px}
	#menu ul li a:hover {background: url(menuitem.jpg) no-repeat top right}
	#menu ul li a:visited {color:#666}
	</style>
	<title>Menu (same bg-image for all)</title>
</head>

<body>
	<div id="menu">
		<ul>
			<li><a href="#">Menuitem1</a></li>
			<li><a href="#">Menuitem2</a></li>
			<li><a href="#">Menuitem3</a></li>
		</ul>
	</div>
</body>
</html>

Senast redigerat 2010-08-25 14:13

Visa signatur

Citera flera Citera

2010-08-25 22:27