|
|
 | Menu
Fra :  Dudder | Vist : 760 gange
200 point
Dato : 25-01-06 20:03 |
|
Hej
Er der nogen, der gider forklare mig, hvordan jeg lave en menu som den på f.eks. denne hjemmeside www.aalflasker.dk ?
vh-
Dudder
| |
 | Kommentar
Fra : bentjuul  |
Dato : 25-01-06 20:18 |
|
Det kan lavet med en onmouserover og en mouseout effekt og to image for hvert menupunkt.
Du kan også få en effekt uden image, men med menupunkterne i tekst, se her
Citat
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
a:link {
color: #00FF00;
}
a:hover {
color: #FFFF00;
}
-->
</style></head>
<body>
<p> </p>
<p><a href="http://www.dr.dk" target="_blank">DR</a></p>
<p><a href="http://www.tv2.dk">TV2</a></p>
<p> </p>
</body>
</html> |
| |
 | Kommentar
Fra : molokyle  |
Dato : 25-01-06 23:03 |
|
Den er ikke bare laver med eventen onmouseover="...";
Den benytter også direkte manipulation af HTML DOM : http://www.w3schools.com/htmldom/default.asp
..med disse metoder kan man lave ALT til links. Selv en alm. tekst omgivet af in-line markøren SPAN:
Citat
<span style="color:black;" onmouseover="this.style.color='red';this.style.cursor='pointer'" onmouseout="this.style.color='black';" onclick="this.location.href='http://www.dmi.dk';">DMI</span> |
 </MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 25-01-06 23:13 |
|
Faktisk kan man nøjes at bruge et billede der jo som bekendt indsættes med en enkelt <img... /> markør:
Kode
<img src="[sti]mit_link_billede.jpg" style="color:black;border:0px;" onmouseover="this.src.='[sti]mit_mouseover_billede.jpg';this.style.cursor='pointer'" onmouseout="this.src='[sti]mit_link_billede.jpg';" onclick="location.href='http://www.dmi.dk';" /> |
..man skal selfølgelig selv indsætte stien [sti], som fortæller hvor billedet ligger relativt til HTML dokumentet eller i forhold til rodelementet / , samt selv erstatte de 2 billeder: mit_link_billede.jpg og mit_mouseover_billede.jpg med sine egne billedfiler.
Piece of cake... 
 </MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 25-01-06 23:47 |
|
Hovsa... et punktum = '.' og en unødvendig sort tekstfarve for meget 
Her har jeg indsat billederne : folder.gif og openfolder.gif (du skal selvfølgelig indsætte dine egne billeder) og lagt dem i samme bibliotek som HTML filen med <img... /> markøren:
Kode
<img src="folder.gif" style="border:0px;" onmouseover="this.src='openfolder.gif';this.style.cursor='pointer'" onmouseout="this.src='folder.gif';" onclick="location.href='http://www.dmi.dk';" /> |
..men for de der har slået scripting fra ..eller ikke tillader det ved advarslen (=den gule blok i toppen af browservinduet) i Windows XS SP2, tjaeh... så må man lave samme 'nummer i ren CSS.
Her et eksempel der virker hos alle med alle typer browser, scripting slået til eller ej :
http://www.cssplay.co.uk/menus/flickerfree.html
..fra : http://www.cssplay.co.uk/
 </MOLOKYLE>
| |
 | Kommentar
Fra : sofus.dk  |
Dato : 27-01-06 10:25 |
| | |
| Kommentar
Fra : molokyle |
Dato : 27-01-06 10:57 |
|
sofus.dk -> Hvem har givet dig den idé det skulle være flash? Der benyttes et alm. link (anchor) på omtalte side:
Citat
<a href="forside.htm" onmouseover="document['fpAnimswapImgFP1'].imgRolln=document['fpAnimswapImgFP1'].src;document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].lowsrc;" onmouseout="document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].imgRolln">
<img border="0" src="skabeloner/kn-forside.gif" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="skabeloner/kn-forside1.gif" width="169" height="46"></a> |
Jeg vil prøve at forklare hvad der foregår i første menupunkt (..som principielt er mage til de øvrige):
<a href="forside.html"...> ... </a> delen er et alm. link til forsiden.
<img scrc="skabeloner/kn-forside.gif" ...> delen er linkbilledet. (parameteren border=0 betyder at der ikke skal tegnes en ramme rundt om grafikken. Den korrekte måde at skrive dette på er : style="border:0px;")
Så er der de forskellige parametre hvoraf to af disse er nogle, som kun en host (hjemmesideudbyder) der understøtter frontpage extensions kan tolke:
dynamicanimation="fpAnimswapImgFP1" lowsrc="skabeloner/kn-forside1.gif"
Så er der linkets events onmouseover="..." og onmouseout=".." som giver sig selv
Indholdet i disse events er en manipulation frontpage extensions i HTML DOM (documet object model) som fortæller at event'ene skal ændre det billede, som er indsat som linkbillede. Link billedet er tildelt et navn, nemlig : id="fpAnimswapImgFP1" og det er så dette billede der skal ændres ved mouseover og mouseout på linket (anchor). Det der skal ændres er billedet source (hvor billedet ligger og hvad det hedder) src og lowsrc, som dynamisk skifter plads alt efter om musen er over linket eller ej.
I princippet er koden fuldkommen identisk med mit eksempel fra: Dato : 25-01-06 23:47 blot med den forskel at jeg ikke har brugt en omsluttende anchor markør, men tilgår HTML DOM objektet 'location.href' (svarer til et links parameter href="") direkte og derfor selv har måtte indsætte 'pegefingeren' som vises ved links (cursor='pointer')
Som jeg skrev tidligere: A piece of cake...
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 27-01-06 11:12 |
|
Hvorfor tror du dét? Der spørges jo til:
Citat
Er der nogen, der gider forklare mig, hvordan jeg lave en menu som den på f.eks. denne hjemmeside |
..og det er hermed gjort
At kaste et link ind her til et flash menusystem kan næppe kaldes at forklare noget som helst
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 27-01-06 11:18 |
|
Faktisk kan spørgeren kopiere min kode Dato : 25-01-06 23:47 direkte af. Indsætte sine egne billeder (*.jpg, *.gif eller *.png) og skrive sine egne linkadresser ( http:// ) ind i koden og....
Voila: En menu mage til den på allflasker 
</MOLOKYLE>
| |
| Kommentar
Fra : bentjuul |
Dato : 27-01-06 11:19 |
|
Jeg tror at spørgeren først skulle læse lidt mere om hjemmesider her http://www.html.dk/tutorials/html/ for det hjælper ikke særligt meget at have en masse programmer hvis man ikke ved ret meget om det grundlæggende.
//bentjuul
| |
| Accepteret svar
Fra : molokyle | 
Modtaget 200 point
Dato : 27-01-06 12:04 |
|
Hvis man øsker en 'let' løsning uden javascript events der manipulerer HTML DOM?
Så er der en fin løsning her : http://www.cssplay.co.uk/menus/menu5teen.html
Her bliver 'knappen' oven i købet nede når et menupunkt er valgt. For at se hvorledes det er lavet skal du højreklikke på siden Dudder og vælge ; Vis kilde
Så kan du se CSS koden og hvorledes den i eksemplet bruges i HTML koden længere nede. Den ser således ud:
CSS:
Kode
<style type="text/css">
#menu {position:relative; margin-top:20px; left:5px; display:block; width:350px;}
#menu a.button, #menu a.button:visited {display:block; width:150px; height:30px; background:url(buttons.gif); background-position:top left; background-color:transparent; text-align:center; color:#000; line-height:28px; text-decoration:none; font-family:arial, sans-serif; font-weight:bold; margin-top:5px;}
#menu a.button:hover {background-position:0 -30px; line-height:31px; overflow:hidden;}
#menu a.button:active {background-position:0 -60px;}
</style> |
HTML:
Kode
<div id="menu">
<a class="button" href="#nogo" title="">Item one</a>
<a class="button" href="#nogo" title="">Item two</a>
<a class="button" href="#nogo" title="">Item three</a>
<a class="button" href="#nogo" title="">Item four</a>
<a class="button" href="#nogo" title="">Item five</a>
</div> |
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 27-01-06 12:09 |
|
Ps. Hvor der i ovenstående HTML kode står : #nogo
..skal du selv indsætte dine link adresser.
Billedfilen 'buttons.gif' henter du på normal vis på siden over menu eksemplet.
Altså : http://www.cssplay.co.uk/menus/buttons.gif
</MOLOKYLE>
| |
|
Du kan sagtens undgå html koder, og behøver ikke vide ret meget om dem, vel- og mærke, hvis du har det rigtige program wysiwyg (what you see, is what you get)
Det link du omtaler er hjemmesiden lavet med programmet Microsoft Frontpage 6
I menulinien vælger du Indsæt - Indsæt Interaktiv knap og følger instruktionerne.
Amanda
| |
| Kommentar
Fra : bentjuul |
Dato : 28-01-06 15:14 |
|
Skal man bruge en wysiwyg så kan denne gratis editor snildt konkurrere med frontpage http://nvu.com/index.html men nu gik spørgsmålet på hvordan en bestemt menu skulle laves og den kan ikke laves med knapper, men skal laves at 2 billeder til hvert menupunkt, som tydeligt er beskrevet i flere tidligere indlæg.
//bentjuul
| |
| Kommentar
Fra : molokyle |
Dato : 28-01-06 17:00 |
|
Korrekt benjuul
 amandaKanDu -> Man gå ud fra at spørgsmålet ønskes besvaret på baggrund af spørgsmålets ordlyd ...og ikkepå baggrund af 'fornemmelser' eller 'antagelser' ?
Ellers bliver det jo det rene gætværk? 
..men Ok. du forklarer jo så udmærket at det kan laves med Frontpage
</MOLOKYLE>
| |
| Kommentar
Fra : molokyle |
Dato : 28-01-06 17:04 |
|
Ps. amandaKanDu -> Hvorledes tror du da at Frontpage laver 'knasppen' ???
Fortæl, fortæl....
Hvis du har en 'alternativ' forklaring ? ..lytter jeg i åndeløs sænding 
 </MOLOKYLE>
| |
| Kommentar
Fra : Dudder |
Dato : 28-01-06 18:49 |
|
Hej alle
Jeg siger tak for alle de gode råd, jeg har nu fået en ide om, hvad der skal til, jeg må prøve mig frem. Min nuværende menu ser sådan ud www.vapsen.dk - jeg synes måske, at den er en smule kedelig.
vh.
Dudder
| |
| Godkendelse af svar
Fra : Dudder |
Dato : 28-01-06 18:50 |
| | |
| Kommentar
Fra : molokyle |
Dato : 29-01-06 08:55 |
|
Du kan sagtens bruge den kode du har nu, men blot udskifte knap-grafikken til noget mere spændende i din menu.htm fil.
I f.eks. menupunktet 'Lidt om os' udskifter du blot; button6D.gif, button6e.gif og button6F.gif
..som repræsentere link (samt onmouseup), onmouseover og onmousedown event'ene
</MOLOKYLE>
| |
 | Du har følgende muligheder | |
|
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.
Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
| |
|
|