/ Forside/ Teknologi / Udvikling / HTML / Spørgsmål
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Inkludere en menu i HTML
Fra : Nickoe
Vist : 1452 gange
100 point
Dato : 22-05-07 19:25

Hej

Jeg har søgt lit på nettet med at kunne inkludere kode, med en selvstændig fil fx menu.inc. Men er kommet frem til, at det kun er muligt i asp og shtml. Det har jeg ikke så meget kendskab til.

Er der ikke en funktion, hvor det er muligt i HTML at inkludere menuen, sådan at man kun skal rette den én gang, for at lave en ændring i menuen?

Nybegynder

/Nickoe

 
 
Kommentar
Fra : molokyle


Dato : 23-05-07 08:52

Joda, du har mulighed for at implementere din menu som et externt Javascript, stylet med et externt Sylesheet.

(X-)HTML koden til din menu skriver du ind (inkludere) med Javascript funktionen:

document.write("...");

Her er et MEGET simpelt eksemplet med 3 link:

[XHTML] (Gemmes i rodbiblioteket / som default.html)
Kode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="da" xml:lang="da">
<head>
<title>Default</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="./css/menu.css" />
</head>
<body>
<div>
test<script type="text/javascript" src="./js/menu.js"></script>test
</div>
</body>
</html>


[Javascript] (Gemmes i et underbibliotek js som menu.js)
Kode
document.write("<div class='menu'>");
document.write("MENU");
document.write("<br />");
document.write("<br />");
document.write("<a href='MIT_LINK_1.html'>Link 1</a>");
document.write("<br />");
document.write("<br />");
document.write("<a href='MIT_LINK_2.html'>Link 2</a>");
document.write("<br />");
document.write("<br />");
document.write("<a href='MIT_LINK_3.html'>Link 3</a>");
document.write("</div>");


[CSS] (Gemmes i et underbibliotek css som menu.css)
Kode
body {background:#000;color:#fff;}

div.menu
{
display:block;
width:120px;
background:red;
color:#fff;
margin:16px;
padding:16px;
}

div.menu a:link {color:#000;text-decoration:none;}
div.menu a:hover{color:yellow;text-decoration:underline;}


</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 23-05-07 08:58

Ps. De eneste typer filer du kan inkludere i (X-)HTML er Javascript (*.js) og tekst (*.txt) filer !

..ellers må du ganske korrekt ty til includes med ASP, PHP eller Perl
..og så en 'speciel' teknik kaldet AJAX, som bruger XMLHttpRequest.

http://www.w3schools.com/ajax/default.asp

</MOLOKYLE>

Kommentar
Fra : Nickoe


Dato : 23-05-07 17:39

Er det muligt at få menustrukturen til at ligne denne, http://web.gvdnet.dk/GVD001822/test/menu.html . Sådan jeg kan bruge den først foreslåede teknik, til at inkludere menuen, med dennne menu; http://www.cssplay.co.uk/menus/flyoutt.html .


Kommentar
Fra : Nickoe


Dato : 23-05-07 17:40

Den menu.html som jeg beskrev før, er sådan set også fra http://www.cssplay.co.uk/menus/flyoutt.html


Kommentar
Fra : molokyle


Dato : 23-05-07 23:12

Yes yes...

Lav dit layout som hér: http://www.kandu.dk/Tip15957.aspx

..og implementér det som angivet: http://www.kandu.dk/spg104769.aspx#1170162

1.) En (X-)HTML fil, hvor du bruger Javascript include: <script...></script>
2.) En Javascript fil, hvor du indskriver/inkluderer din (X-)HTML kode (..den 'uordnede' liste med dine link til menuen) med funktionen: document.write("..");
3.) Dit externe stylesheet (..til layout af ovenstående 'uordnede' liste)...inkluderet i ad. 1.)

Det er et stort arbejde at lave en sådan 'include' menu ..og du har vel ikke tænkt dig, at jeg skulle skrive 'det hele' for dig?

..oder?

KLAR.. PARAT.... MARKÉR, KOPIÉR, SÆT IND !!!

</MOLOKYLE>



Kommentar
Fra : Nickoe


Dato : 25-05-07 18:05

JA, nu har jeg så prøvet at lave det, men kan ikke få det til at virke.

http://web.gvdnet.dk/GVD001822/test/index2.html

Hvad gør jeg forkert i min menu.js?

http://web.gvdnet.dk/GVD001822/test/js/menu.js

Kommentar
Fra : Nickoe


Dato : 25-05-07 18:13

Probelmet er som du nok kan se, at der ikke bliver vist noget. Men hvis jeg sætter dette ind i menu.js, så virker det:

Kode
document.write("<ul>")
document.write("<li><a href='http://www.html.dk'>Menupunkt 1</a></li>")
document.write("<li><a href='http://www.html.dk'>Menupunkt 2</a></li>")
document.write("<li><a href='http://www.html.dk'>Menupunkt 3</a></li>")
document.write("</ul>")



Kommentar
Fra : molokyle


Dato : 25-05-07 21:49

Du har ikke taget højde for i hvilke biblioteker dine filer ligger!

Du henviser fra: http://web.gvdnet.dk/GVD001822/test/js/menu.js

til:

../menu/index.html

men der er ingen:

http://web.gvdnet.dk/GVD001822/menu/index.html

Du henviser fra:

http://web.gvdnet.dk/GVD001822/test/index2.html

til:

./js/menu.js

men der er ingen:

http://web.gvdnet.dk/GVD001822/temp/js/menu.js

</MOLOKYLE>



Accepteret svar
Fra : molokyle

Modtaget 100 point
Dato : 25-05-07 22:00

Hmmm... vrøvler vist lidt, men jeg 'tror' der er et problem i den retning

..og mangler der ikke et mellemrum (whitespace) eller 2 hér:
Kode
document.write("<!--[iflteIE6]>")


Altså:
Kode
document.write("<!--[if lte IE6]>")


Betyder: Mindre eller lig IE 6

Ligeledes i ALLE dine anchor markører:
Kode
<aclass="


..burde være:
Kode
<a class="


..og:
Kode
<ahref="


..være:
Kode
<a href="


..osv.

Ryd liiiige lidt op!

Markører uden mellemrum er der vist ingen browsere som forstår ..uanset version eller fabrikat

</MOLOKYLE>

Kommentar
Fra : Nickoe


Dato : 26-05-07 09:10

Hmmm, der mangler mellemrum. Og dette har jeg nu rettet. Men det virker stadig ikke. De links der står i menuen er stadig direkte fra cssplay, detforklarer:
Citat
Du henviser fra: http://web.gvdnet.dk/GVD001822/test/js/menu.js

til:

../menu/index.html

Men det burde jo ikke have nogen indlydelse på om menuen bliver vist eller ej. Har jeg ret? Men jegha nu også ændret alle " til ' som står i selve menustrukturen mellem document.write("...")

/Nick

Kommentar
Fra : Nickoe


Dato : 26-05-07 09:13

Men det med udskiftning af " til ' ved jeg ikke om jeg skal gøre, men det har jeg gjort, fordi det står sådan på html.dk.

/Nick

Kommentar
Fra : molokyle


Dato : 26-05-07 09:35

Korrekt at 'indlejrede' anførselsteg skal være enkelte, hvis de står mellem dobbelte

..eller også må man bruge escape sekvenserne: \" eller \'

http://www.unix.org.ua/orelly/web/jscript/ch02_05.html

Jeg skal ærligt indrømme jeg ikke kan overskue Stu's menu med dens tabeller og hensyntagen til ældre versioner af IE

Det korte og det lange er:
Citat
Er der ikke en funktion, hvor det er muligt i HTML at inkludere menuen, sådan at man kun skal rette den én gang, for at lave en ændring i menuen?


JO, ...som du selv bemærker:
Citat
Men hvis jeg sætter dette ind i menu.js, så virker det..


Hvilket beviser min påstand:
Citat
Joda, du har mulighed for at implementere din menu som et externt Javascript, stylet med et externt Sylesheet.


Jeg tror du selv må bokse lidt videre herfra. Begynd med en simpel menu og arbejd dig så forsøgsvis hen mod de mere avancerede løsninger. På den måde lærer du også hele tiden undervejs i processen. At kode hjemmesider er et stort tålmodighedsarbejde.


</MOLOKYLE>

Kommentar
Fra : Nickoe


Dato : 26-05-07 10:14

Jeg kan nu med glæde meddele, at det nu virker, jeg havde bare glemt, at udskifte " med ' i linje 17. DEn så bare sådan ud før;
Kode
document.write("<a class="sub" href='../menu/hover_click.html' title='Hover/clickwithnoactive/focusborders'>HOVER/CLICK&gt;")

og nu ser den sådan ud:
Kode
document.write("<a class='sub' href='../menu/hover_click.html' title='Hover/clickwithnoactive/focusborders'>HOVER/CLICK&gt;")


/Nick

Kommentar
Fra : molokyle


Dato : 26-05-07 15:43

Tillykke !

( Dénne lille 'raptus' havde jeg overset )

..men:

Happy coding...

</MOLOKYLE>

Kommentar
Fra : Nickoe


Dato : 27-05-07 00:36

JA, den hvade jeg sørme også overset, her til sidst. Men mange tak for hjælpe.

/Nick

Godkendelse af svar
Fra : Nickoe


Dato : 27-05-07 00:37

Ja, den hvade jeg også overset, her til sidst. Men mange tak for hjælpen.

/Nick


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.
Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408914
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste