Deze tutorial is bedoel voor mensen met enige kennis van html en css. De tutorial
is gebaseerd op een horizontaal ul-menu. Om het menu horizontaal te brengen maak ik gebruik van float:left,
dus wanneer je van display:inline gebruik maakt om je menu mee op te maken moet je daar helaas even van afstappen.

Een menu maken met een afgeronde hover.
Een rolover maken kan bijna iedereen, en wanneer het iets moeilijker word kunnen vele ook wel
een achtergrond toevoegen aan een hover.
Een type rolover, namelijk een rolover met een afgeronde (tabblad stijl) achtergrond,
word als erg moeilijk ervaren en daarmee gaan veel html schrijvers de mist in.

Een voorbeeld van zo'n afgeronde rolover zie je hieronder:


We beginnen met het maken van onze normale html:

<ul>
<li><a href="#">Korte tekst</a></li>
<li><a href="#">Een langere tekst</a></li>
<li><a href="#">De tekst is nu nog een stukje langer</a></li>

</ul>

De opmaak die bij een normale horizontale menu hoort ziet er zo uit:
Ik houd de opmaak nou nog vrij simpel, voor de zekerheid heb ik bij de styles
die nodig zijn voor een goede weergave een comment gezet.

ul {
margin:0px; /* algemene opmaak, kan verandert worden */
padding:0px; /* algemene opmaak, kan verandert worden */
list-style:none; /* zorgt ervoor dat er geen special menu-opmaak te zien is */
}

li {
float:left; /* zorgt dat de menu's naast elkaar komen te staan */
padding:0px; /* voorkomt dat er een padding ontstaat in sommige browsers */
margin:0px; /* eventueel kan hier een margin ingesteld worden op de li's, de padding volgt in een andere style */
}

li a {
color:#000;
text-decoration:none;
font:bold 11px Arial, Helvetica, sans-serif; /* zorg dat dit boven de line-heigt staat */

height:25px; /* hoogte van de li word hier bepaald */
line-height:25px; /* de uitlijn hoogte word hier bepaald */
}

li a:hover {
color:#ff0000;
}

Oké, nou moeten we nog een hover onder de menu items krijgen, natuurlijk zonder
20 verschillende afbeeldingen van allerlei formaten etc. Dus als eerst gaan we twee afbeeldingen
knippen die geschikt zijn voor alle menu items.

In rechter afbeelding moet je alleen de rechter afronding meenemen. De afbeelding is dus meestal erg klein.
In ons geval maar 5 pixels breed. (dit is afbeelding rechts.png)
De linker afbeelding moet zo ver mogelijk worden afgesneden. Deze bevat naast de afronding dus ook de complete
achtergrond. Neem hiervoor de langste hover, anders gaat het menu niet helemaal werken zoals het hoort.
(dit is afbeelding links.png , een beetje overdreven lang)

Hieronder zie je een afbeelding om het nog iets duidelijker te maken.


Nou we de afbeeldingen hebben moeten we de html en de css aanpassen voor de hovers.
In de li items komt een span te staan. Aangezien er toch geen anders span-tags in onze li staan
hoeven we deze span geen class mee te geven.

Onze html komt er nu zo uit te zien:

<ul>
<li><a href="#"><span>Korte tekst</span></a></li>
<li><a href="#"><span>Een langere tekst</span></a></li>
<li><a href="#"><span>De tekst is nu nog een stukje langer</span></a></li>
</ul>

De css verandert het meeste, die moet er dan ook uiteindelijk voor
zorgen dat de hover gaat werken.

Dit word de nieuwe css, ook hierbij heb ik weer comments gezet om alles duidleijk te maken.
De styles die zijn verandert of erbij zijn gekomen geef ik aan met 'NIEUW'.

ul {
margin:0px; /* algemene opmaak, kan verandert worden */
padding:0px; /* algemene opmaak, kan verandert worden */
list-style:none; /* zorgt ervoor dat er geen special menu-opmaak te zien is */
}

li {
float:left; /* zorgt dat de menu's naast elkaar komen te staan */
display:block; /* NIEUW in elke menu style komt een display:block te staan */
padding:0px; /* verkomt dat er een apdding ontstaat in sommige browsers */
margin:0px; /* eventueel kan hier een margin ingesteld worden op de li's, de padding volgt in een andere style */
}

li a {
color:#000;
text-decoration:none;
font:bold 11px Arial, Helvetica, sans-serif; /* zorg dat dit boven de line-heigt staat */

float:left; /* NIEUW vergeet de float niet, dit zorgt voor een goede weergave in IE6 */
display:block; /* NIEUW in elke menu style komt een display:block te staan */
height:25px; /* hoogte van de div word hier bepaald */
line-height:25px; /* ook de lijn hoogte word hier bepaald */

}

li span {
padding:0 20px 0; /* NIEUW padding in de menu-items moeten hier worden opgemaakt */
display:block; /* NIEUW in elke menu style komt een display:block te staan */
}

li a:hover {
background:url('links.png') repeat-x left top; /* NIEUW deze afbeelding moet zo -lang- mogelijk worden afgesneden */
display:block; /* NIEUW in elke menu style komt een display:block te staan */
float:left; /* NIEUW vergeet de float niet, dit zorgt voor een goede weergave in IE6 */
color:#fff;
}

li a:hover span {
background:url('rechts.png') no-repeat right top; /* NIEUW deze afbeelding moet zo -kort- mogelijk worden afgesneden */
display:block; /* NIEUW in elke menu style komt een display:block te staan */
}

Als het goed is werkt je menu rolover nou zoals het moet. Zo niet, of heb
je een bepaalde opmaak waarvan je nu niet weet waar je deze moet plaatsen,
meld het dan in dit topic.

Een werkend voorbeeld is te bekijken op:
http://gijsbertsimon.nl/tutorials/hover_afgerond/

Werkt het niet bij jouw? Test het dan eens uit op een leeg html document,
dat geeft vaak een beter inzicht in de code. Daarbij, de css ziet er momenteel
uit als of het 4kb aan code is, maar door de comments die uiteraard weggehaald
kunnen worden lijkt het veel ingewikkelder en meer dan dat het eigenlijk is.

Met vriendelijke groet,

Gijsbert Simon gast2960
www.gijsbertsimon.com

Andere tutorials van mij:
Rolover effect: replace

Het werkt heel goed ! Bedankt !

Goeie tut !

Gebruik dit al enige tijd in diverse slices.
Echter een probleem waar ik tegenaan loop en nog niet opgelost krijg is als de rechter afbeelding een transparantie heeft.

Als mijn rechter plaatje bijvoorbeeld in de rechterbovenhoek transparant is (en dus niets zit omdat hij rond is), dan walst mijn linker plaatje daar gewoon overheen...

Weet jij / iemand hier een oplossing voor.

Toevallig liep ik vorige week tegen hetzelfde probleem aan.
Toen heb ik een oplossing bedacht die vrij simpel is, maar
niet helemaal netjes is.

Het resultaat is te zien op:
www.gijsbertsimon.nl/salut/

Let op. De rechtse afbeelding moet nou lang zijn, de linkse moet kort worden afgesneden.


De css die hier voor nodig is ziet er als volgt uit:

Code:

ul {
margin:0px; 
padding:0px;
list-style:none;
}

li {
float:left;
display:block; 
padding:0px; 
margin:0px;
}

li a {
color:#000;
text-decoration:none;
font:bold 11px Arial, Helvetica, sans-serif; 
float:left; 
display:block;
height:25px;
line-height:25px;

padding:0 0 0 12px; /* De rechter afbeelding */
}

li span {
padding:0 20px 0 8px; /* Zorg ervoor dat de rechterpadding net zo groot wordt als de linker door te compenseren */
display:block; 
}

li a:hover {
background:url('links.png') no-repeat left top;  
display:block; 
float:left; 
color:#fff;
}

li a:hover span {
background:url('rechts.png') no-repeat right top; 
display:block; 
}

Nou, vindt het geen lelijke oplossing hoor!
Bedankt, het werkt!

Kan het kloppen dat fireflox deze menu knoppen niet vertoond?

Om julle alvast nieuwschierig te maken, ik kom morgen met een variant op deze tutorial. Iets minder uitgebreid maar wel met hezelfde idee.

Origineel gepost door Anja v. Steenbrugge

Kan het kloppen dat fireflox deze menu knoppen niet vertoond?

Het systeem werkt op alle moderne webbrowsers inclusief IE6 & 7. Dus
waarschijnlijk zit er ergens bij jouw een fout?

Origineel gepost door Ben Greeve

Om julle alvast nieuwschierig te maken, ik kom morgen met een variant op deze tutorial. Iets minder uitgebreid maar wel met hezelfde idee.

Ik ben benieuwd ;)

Ik heb de tutorial af. Ik heb het niet getest in een aantal browsers maar ik ga er vanuit dat hij het doet in alle browsers en waarschijnlijk kan er nog een beetje code weg, maar zo valt het wel beter te begrijpen denk ik.

De tutorial is te zien op http://www.greevemedia.nl/tutorial/tut.pdf

Sorry dat ik dit oude bericht weer naar boven haal.

Ik vind dit een hele mooie tutorail maar ik krijg het menu niet in het midden. Gecentreerd zegmaar. Ik heb van alles geprobeerd maar ik krijg het niet voor elkaar.

Misschien kan iemand mij helpen.

Alvast bedankt