Exempel på ett dynamiskt & sökmotorvänligt menysystem.

Denna sida publicerades 2008-02-10 av Mattias Nordin.

Last indexed by Google 12/3/2022 7:45:1

Hur bygger man ett menysystem med dynamiska bakgrundsknappar?

Fördelen med detta koncept är att du slipper rita om bilderna när du behöver skapa nya knappar. En annan fördel är att konceptet är sökmotorvänligt. Det är vanliga <a href... länkar!

Hur gör man menysystemet som du har på mattiasNordin.net/web02?

Börja med att rita dina knappbilder. Minimum är att du ritar 2 versioner. En med mouse over utseendet och en som visar inaktivt läge. Jag brukar döpa dem till ett filnamn med ett nummer efter som indikerar event status. Orkar du inte rita dina egna bilder så kan du sno mina genom att högerklicka på följande bilder:

menobj_blankbox_0.gif Används vid mouse out
menobj_blankbox_1.gif Används vid mouse over
menobj_blankbox_2.gif Används vid on click (använder samma bild som _1 i detta exempel)
menobj_blankbox_3.gif Används vid vald bild

1) Spara bilderna i samma katalog som din websida.

2) Skapa sedan en layout för dina bilder. Notera att du ska använda dig av koden nedan och inte klassiska <img... taggar. Vi kommer att använda CSS (längre ner) för att lägga till en bakgrundsbild bakom länkarna. Ersätt länktexten (A,B,C,D) med egen text. Kanske du lägger dem i en tabell enligt nedan för att formatera dem:

<table><td> <a href="http://MattiasNordin.Net" id="test1" class="image">A</a> </td><td> <a href="http://MattiasNordin.Net" id="test2" class="image">B</a> </td><td> <a href="http://MattiasNordin.Net" id="test3" class="image">C</a> </td><td> <a href="http://MattiasNordin.Net" id="test4" class="image">D</a> </td><td> <a href="http://MattiasNordin.Net">Vanlig länk</a> </table>

3) Lägg sedan följande CSS kod i din html header. Glöm inte att ersätta sökvägen till bilderna till din lokala sökväg. CSS koden nedan kommer att lägga till bakgrundbilder bakom dina länkar. Vid "hover"-eventet så körs "a.image:hover". a.selected styr den knappen som vi kan ha förvald, tex direkt när sidan laddas. Mer om det nedan.

<html> <head> <title>...</title> <style> a.image { display:block; height:26px; width:112px; background-image:url(/_design/menobj_blankbox_0.gif); background-repeat:no-repeat; color:#395173; font-family:Calibri,tahoma; font-size:11px; font-weight:bold; text-align:center; text-decoration:none; vertical-align: middle; line-height:26px; text-transform: uppercase; } a.image:hover { background-image:url(/_design/menobj_blankbox_1.gif); } a.selected, a.image:active, a.selected:hover { background-image:url(/_design/menobj_blankbox_2.gif); } </style> </head> <body> <table><td> <a href="http://MattiasNordin.Net" id="test1" class="image">A</a> </td><td> <a href="http://MattiasNordin.Net" id="test2" class="image">B</a> </td><td> <a href="http://MattiasNordin.Net" id="test3" class="image">C</a> </td><td> <a href="http://MattiasNordin.Net" id="test4" class="image">D</a> </td><td> <a href="http://MattiasNordin.Net">Vanlig länk</a> </table> </body></html>

Nu kan du provköra din kod. Resultatet ska se ut så här:

Vanlig länk

Denna knapplösning är ganska vanlig att använda i en ASP include lösning där man har en menyfil som inkluderas på alla andra sidor. Om du navigerar till en av dina sidor via en extern länk så vill du att menysystemet ska visa rätt flik utan att besökaren klickar någonstans. För att ladda en defaultknapp så använder vi ett litet javascript för att tända knapparna. OBSERVERA att javascriptet måste placeras under tabellen annars får du ett felmeddelande.

4) Lägg till följande javascript under tabellen för att sätta någon knapp som aktiverad.

Och resultatet ser nu ut så här. Knapp test2 och test4 är laddade. Vanligtvis så tänder du nog bara en knapp med denna metod. Använd då bara en av raderna i javascriptet. Observera att mouseOver (hover) inte byter bild på vald knapp.

Vanlig länk

Hoppas att någon har nytta av detta finurliga menysystem. Om inte så har jag det nu dokumenterat tills nästa gång det är dags att göra en website.

De riktiga hjärnorna bakom skriptet hittar ni på www.WebForum.nu.
Posta i mitt forum om ni behöver hjälp eller sök er till webforum.nu.

Mvh Mattias Nordin