Uitklapmenu

FrankC · 25 okt 2010, 10:03

Ik ben op zoek naar een html code om een uitklapmenu op mijn site te maken. (www.ttaalter.be)
Heb geen ervaring met html maar heb de laatste weken al wat ervaring opgedaan hoe zoiet in elkaar steekt. Heb dank zij een tip hier een lichtkrant met afbeeldingen kunnen maken met html. Weet hoe dat werkt en heb niet alles klakkeloos gekopiëerd.
Hoe die uitklapmenu er ongeveer zou moeten uitzien kan je bekijken op www.3athlon.be.
Ik werk wel met webcreator bij One.com. Kan daar mijn site bewerken met een text-editor (html) en ook in wysiswg.
Wie heeft een tip of kent een goedkoop programma waar ik dat kan met maken?

Alvast bedankt!

coderunner · 25 okt 2010, 13:09

Beste FrankC,

Kijk eens op volgende pagina's waar bij elke afbeelding (als je op de afbeelding klikt) het voorbeeld van de gebruikte code wordt getoond.
- CSS Library Horizontal CSS Menus
- Horizontal CSS Menus
- Creating Horizontal Menus
- Horizontally Centered Drop-Down Menus
- of zoek in je favoriete browser naar "horizontal menu"

Lees ook dit topic eens door.

Noot: Je zal toch wat basiskennis moeten hebben van html en CSS wil je zo'n menu kunnen maken/aanpassen naar eigen smaak.

mvg,
Coderunner

FrankC · 26 okt 2010, 09:34

Alvast bedankt voor de tips. Wat ik niet begrijp is het verschil tussen html en css. Ik heb het topic bekeken en geprobeerd om die code te plakken in mijn pagina (proefpagina). Maar ik krijg daar enkele een verticale lijst en totaal geen knoppen, zolas ik al met vele scripts heb meegemaakt. Waar moet ik de html code plakken en waar de css?

<html>
<head>
<title></title>
</head>

<body>

Dit staat op een lege pagina in mijn texteditor als ik het open.

Alvast bedankt.

Hopelijk lukt het me deze week om nog een treffelijk menu te plaatsen. Ik begrijp wel waar je de links moet plaatsen, de rest zal ik met vallen en opstaan moeten leren.
FrankC[/list]

coderunner · 26 okt 2010, 16:21

Beste FrankC,

Ik ga dit heel simpel proberen uit te leggen want eigenlijk is dit alles een vrij uitgebreid geheel. Ik doe men best.

Vroeger maakte men gebruik van alleen html codes en werd de layout (lettertype, letterkleur, lettergrootte, ...) meegegeven in de html code zelf.
Voorbeeld:

Code: Selecteer alles

<html>

<title>Voorbeeld</title>

<head>

</head>

<body>

<p><font face="Arial" size="3" color="black">Dit is de zwarte tekst met grootte 12pt</font></p>
<p><font face="Arial" size="3" color="black">Dit is de zwarte tekst met grootte 12pt</font></p>

</body>

</html>

Op de duur wordt de html code "overwoekerd" door deze extra layout codes en moet je bij een aanpassing elke layout code apart gaan veranderen.

Men heeft dan het css (stylesheet - stijlopmaak) ingevoerd.
Deze wordt geplaatst tussen de tags <head> en </head> en wordt geplaatst tussen <style type="text/css"> en </style>

Code: Selecteer alles

<html>

<title>Voorbeeld</title>

<head>

<style type="text/css">
p {
font-family: arial;
font-size: 12pt;
color: black;
}
</style>

</head>

<body>

<p>Dit is de zwarte tekst met grootte 12pt</p>
<p>Dit is de zwarte tekst met grootte 12pt</p>

</body>

</html>

Dit geeft hetzelfde resultaat maar de html code is minder uitgebreid en blijft overzichtelijker. Wanneer je nu aanpassingen moet aanbrengen moet je dit maar 1 keer doen in de style opmaak.

Ik herhaal dit is vrij simpel uitgelegd en alles behalve volledig !!!

Om op je vragen te antwoorden:
1- Dus wanneer je op bovenstaande links ziet staan gebruikte css, dan plaatst je deze tussen <head> en </head>
Vergeet de css code dan ook niet te plaatsen tussen <style type="text/css"> en </style>
2- De html code plaats je tussen <body> en </body> op de plaats waar je het menu wil hebben

Code: Selecteer alles

<html>

<title>Voorbeeld</title>

<head>

<style type="text/css">
... Hier komt dan de style code (css)
</style>

</head>

<body>

... Hier komt de html code van je menu

</body>
</html>

Lees ook eens CSS Cursus

Opgelet: Sommige menu's gebruiken ook een extern javascript (*.js) en/of een extern stylesheet (*.css)!! Deze staan in een apart bestand en worden gelinkt vanuit de html pagina. Men plaatst deze ook weer tussen <head> en </head>.
Voorbeeld:

Code: Selecteer alles

<html>

<title>Voorbeeld</title>

<head>

<link rel="stylesheet" type="text/css" href="css_bestandsnaam.css" />
<script type="text/javascript" src="js_bestandsnaam.js"></script>

</head>

<body>

</body>

</html>

mvg,
Coderunner

FrankC · 28 okt 2010, 09:55

Alvast heel hartelijk bedankt en ik neem alles eerst nog eens goed door.
Hopelijk bak ik er iets van.
Eens het gelukt (ook als het niet lukt) laat ik iets weten.
Nogmaals bedankt, heb al verschillende site's geraadpleegd met deze vraag maar je bent de eerste die een antwoord geeft en dan nog een duidelijk antwoord.
Thanks
FrankC

FrankC · 28 okt 2010, 11:52

Heb enkele uurtjes bezig geweest maar helaas. Het lukt niet, ofwel krijg ik een gewoon menu (vertikaal) ofwel vouwt het niet open. Heb wel al een idee hoe het in elkaar steekt en op wat men moet letten.
Morgen geef ik het nog een nieuwe poging. Nu ben ik het eventjes beu!
http://www.cssmenumaker.com/ Via deze site kwam ik nochtans tot een mooi menu maar uitvouwen lukte niet goed.
FrankC

coderunner · 28 okt 2010, 12:23

Beste Frank,

FrankC schreef:... ofwel vouwt het niet open ...

Ik veronderstel dat je geen of een verkeerde DOCTYP gebruikt.

Plaats helemaal bovenaan je code i.p.v.

Code: Selecteer alles

<html>

volgend DOCTYP

Code: Selecteer alles

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Geef anders je volledige code eens door (hier op het forum of in een privé bericht), dan kijk ik na waar de fout zit.

mvg,
Coderunner

FrankC · 28 okt 2010, 13:33

Hieronder de volledige code die ik op mijn testpagina heb geplaatst. Wat ik zie is een pagina met een menu vertikaal onder elkaar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>CSS DropDown Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=8" />

<link rel="stylesheet" type="text/css" media="screen,projection" href=/Paginas/menu/style.css/>

</head>

<body>



<div class="mainmenu">

<ul>
<li class="li_nc"><a href="http://www.ttaalter.be/index.html" >Home</a></li>
<li class="li_nc"><a href="http://www.ttaalter.be/blog/index.html" >Laatste Nieuws</a></li>
<li class="li_hc"><a href="http://www.ttaalter.be/Paginas/Uitslagen.html" target="_self" >Uitslagen</a><ul class="ul_ch">
<li class="li_nc"><a href="http://www.ttaalter.be/Paginas/tri-uitslagen.html" target="_self" >Triatlon</a></li>
<li class="li_nc"><a href="http://www.ttaalter.be/Paginas/dua-uitslagen.html" target="_self" >Duathlon</a></li>
<li class="li_nc"><a href="http://www.ttaalter.be/Paginas/wintdua-uitslagen.html" target="_self" >Winterwedstrijden</a></li>
</ul></li>
<li class="li_nc"><a href="http://www.ttaalter.be/Paginas/leden.html" >Leden</a></li>
<li class="li_nc"><a href="http://www.ttaalter.be/fotoalbum/index.html#home" >Foto's</a></li>
<li class="li_nc"><a href="http://www.ttaalter.be/Paginas/sponsors.html" >Sponsors</a></li>
<li class="li_hc"><a href="http://www.ttaalter.be/Paginas/TTA%20page.html" >TTA-page</a><ul class="ul_ch">
<li class="li_nc"><a href="http://www.ttaalter.be/Paginas/Kalender.html" >Kalender</a></li>
<li class="li_nc"><a href="http://www.ttaalter.be/Paginas/Wie,%20w ... nneer.html" >Wie, Wat, Waar?</a></li>
<li class="li_nc"><a href="http://www.ttaalter.be/Paginas/Trainingstips.html" >Trainingstips</a></li>
<li class="li_nc"><a href="http://www.ttaalter.be/Paginas/Leesvoer.html" >Leesvoer</a></li>
</ul></li>
<li class="li_nc"><a href="http://www.ttaalter.be/Paginas/Links.html" >Links</a></li>
<li class="li_hc"><a href="http://www.ttaalter.be/Paginas/Contact.html" >Contact</a><ul class="ul_ch">
<li class="li_nc"><a href="http://www.ttaalter.be/Paginas/Lid%20wo ... 20TTA.html" >Lid worden bij TTA</a></li>
<li class="li_nc"><a href="http://www.ttaalter.be/Paginas/Gastenboek.html" >Gastenboek</a></li>
</ul></li>
</ul>

</div>



<p> </p>
<p></p>

</body>
</html>

Terug bedankt voor de moeite die je neemt.
FrankC

coderunner · 28 okt 2010, 13:45

Beste Frank,

En waar is je opmaak (*.css bestand) ?
Volgens je code staat die

Code: Selecteer alles

<link rel="stylesheet" type="text/css" media="screen,projection" href=/Paginas/menu/style.css/>

maar wat er in style.css staat heb je niet meegegeven.
Open het style.css bestand en kopieer de code en plaats deze hier ook op het forum.
Dan pas kunnen we verder.

mvg,
Coderunner

FrankC · 28 okt 2010, 13:57

Ik heb gewoon enkele bestanden in mijn map opgeslagen onder andere "style.css".
Volgens de uitleg op CSS Menu generator moest ik die link invullen.
Hieronder de uitleg die ik las:

<link rel="stylesheet" type="text/css" media="screen,projection" href="style.css" />

(Note that if you decide to rename style.css you must change the href attribute value to reflect the new name. Don't forget to upload the css file to your server. Also -- if you place the css file in different folder than the html file, change the href value to reflect the change.)

FrankC

coderunner · 28 okt 2010, 14:08

Beste Frank,

Okay maar je had het style.css bestand ook moeten downloaden/kopieren toen je het menu aangemaakt hebt. Nu heb je alleen de html code staan maar geen opmaak voor het menu. Het is dus daarom dat je de items van je menu gewoon onderelkaar ziet staan, je mist de opmaak (style.css)

Staat het style.css bestand ook op je pc ? en indien ja wat staat er in het style.css bestand ?

mvg,
Coderunner

coderunner · 28 okt 2010, 14:37

Beste Frank,

Ik weet natuurlijk niet welke kleuren je gebruikt in je menu maar ik heb hier een voorbeeld uitgewerkt met jouw menu items.
Zo krijg je al een idee.

Code: Selecteer alles

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<title>CSS DropDown Menu</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<meta http-equiv="X-UA-Compatible" content="IE=8" /> 


<style type="text/css">
/* Main menu settings */ 
#mainmenu { 
   clear:both; 
   float:left; 
   margin:0; 
   padding:0; 
   width:100%; 
   font-family:Verdana, Geneva, sans-serif; /* Menu font */ 
   font-size:11pt; /* Menu text size */ 
   z-index:1000; /* This makes the dropdown menus appear above the page content below */ 
   position:relative; 
} 

/* Top menu items */ 
#mainmenu ul { 
   margin:0; 
   padding:0; 
   list-style:none; 
   float:right; 
   position:relative; 
   right:50%; 
} 
#mainmenu ul li { 
   margin:0 0 0 1px; 
   padding:0; 
   float:left; 
   position:relative; 
   left:50%; 
   top:1px; 
} 
#mainmenu ul li a { 
   display:block; 
   margin:0; 
   padding:.6em 1em .4em; 
   font-size:1em; 
   line-height:1em; 
   background:#460000; 
   text-decoration:none; 
   color:#FF0000; /*rood*/
   font-weight:bold; 
   border-bottom:1px solid #460000; 
} 
#mainmenu ul li.active a { 
   color:#fff; 
   background:#460000; 
} 
#mainmenu ul li a:hover { 
   background:#460000; /* Top menu items background colour */ 
   color:#fff; 
   border-bottom:1px solid #ffffff; 
} 
#mainmenu ul li:hover a, 
#mainmenu ul li.hover a { /* This line is required for IE 6 and below */ 
   background:#460000; /* Top menu items background colour */ 
   color:#fff; 
   border-bottom:1px solid #ffffff; 
} 

/* Submenu items */ 
#mainmenu ul ul { 
   display:none; /* Sub menus are hiden by default */ 
   position:absolute; 
   top:2em; 
   left:0; 
   right:auto; /*resets the right:50% on the parent ul */ 
   width:10em; /* width of the drop-down menus */ 
} 
#mainmenu ul ul li { 
   left:auto;  /*resets the left:50% on the parent li */ 
   margin:0; /* Reset the 1px margin from the top menu */ 
   clear:left; 
   width:100%; 
} 
#mainmenu ul ul li a, 
#mainmenu ul li.active li a, 
#mainmenu ul li:hover ul li a, 
#mainmenu ul li.hover ul li a { /* This line is required for IE 6 and below */ 
   font-size:.8em; 
   font-weight:normal; /* resets the bold set for the top level menu items */ 
   background:#460000; 
   color:#fff; 
   line-height:1.4em; /* overwrite line-height value from top menu */ 
   border-bottom:1px solid #ddd; /* sub menu item horizontal lines */ 
} 
#mainmenu ul ul li a:hover, 
#mainmenu ul li.active ul li a:hover, 
#mainmenu ul li:hover ul li a:hover, 
#mainmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */ 
   background:#460000; /* Sub menu items background colour */ 
   color:#fff; 
} 

/* Flip the last submenu so it stays within the page */ 
#mainmenu ul ul.last { 
   left:auto; /* reset left:0; value */ 
   right:0; /* Set right value instead */ 
} 

/* Make the sub menus appear on hover */ 
#mainmenu ul li:hover ul, 
#mainmenu ul li.hover ul { /* This line is required for IE 6 and below */ 
   display:block; /* Show the sub menus */ 
}
</style>

</head> 

<body> 

<!-- PULL DOWN MENU - BEGIN --> 

<div id="mainmenu"> 

<ul> 

<li><a href="http://www.ttaalter.be/index.html" >Home</a></li> 
<li><a href="http://www.ttaalter.be/blog/index.html" >Laatste Nieuws</a></li> 
<li><a href="http://www.ttaalter.be/Paginas/Uitslagen.html" target="_self" >Uitslagen</a>
	<ul> 
	<li><a href="http://www.ttaalter.be/Paginas/tri-uitslagen.html" target="_self" >Triatlon</a></li> 
	<li><a href="http://www.ttaalter.be/Paginas/dua-uitslagen.html" target="_self" >Duathlon</a></li> 
	<li><a href="http://www.ttaalter.be/Paginas/wintdua-uitslagen.html" target="_self" >Winterwedstrijden</a></li> 
	</ul>
</li> 
<li><a href="http://www.ttaalter.be/Paginas/leden.html" >Leden</a></li> 
<li><a href="http://www.ttaalter.be/fotoalbum/index.html#home" >Foto's</a></li> 
<li><a href="http://www.ttaalter.be/Paginas/sponsors.html" >Sponsors</a></li> 
<li><a href="http://www.ttaalter.be/Paginas/TTA%20page.html" >TTA-page</a>
	<ul> 
	<li><a href="http://www.ttaalter.be/Paginas/Kalender.html" >Kalender</a></li> 
	<li><a href="http://www.ttaalter.be/Paginas/Wie,%20wat,%20wanneer.html" >Wie, Wat, Waar?</a></li> 
	<li><a href="http://www.ttaalter.be/Paginas/Trainingstips.html" >Trainingstips</a></li> 
	<li><a href="http://www.ttaalter.be/Paginas/Leesvoer.html" >Leesvoer</a></li> 
	</ul>
</li> 
<li><a href="http://www.ttaalter.be/Paginas/Links.html" >Links</a></li> 
<li><a href="http://www.ttaalter.be/Paginas/Contact.html" >Contact</a>
	<ul class="last"> 
	<li><a href="http://www.ttaalter.be/Paginas/Lid%20worden%20bij%20TTA.html" >Lid worden bij TTA</a></li> 
	<li><a href="http://www.ttaalter.be/Paginas/Gastenboek.html" >Gastenboek</a></li> 
	</ul>
</li> 

</ul> 


</div> 

<!-- END OF PULL DOWN MENU --> 

<p>&nbsp;</p> 

</body> 
</html>

mvg,
Coderunner

FrankC · 30 okt 2010, 18:38

Ik weet echt niet hoe je te bedanken. Een prachtige menu en de kleuren passen toevallig ook. Heb wel veel moeite gehad om een manier te vinden om het op een manier in mijn site te krijgen. Heb er enkele problemen mee gehad maar na veel zoeken is het me toch gelukt. Doe het nu met een volledige vernieuwing van de site en zo sla ik de oude pagina's op als backup. Kan altijd eens van pas komen.

Heb nu nog één probleempje maar weet niet of het door het menu komt. Bij het intypen van tekst krijg ik uiteindelijk een vierkantje te zien telkens als ik é, ° of ë in tik. Had dat vroeger niet. Nu ook als ik de oude pagina (backup) zulke leestekens intyp staan ze er hoe het moet.

Raar, maar ik heb echt veel rare zaken tegengekomen om de menu er op te krijgen.

Toch tevreden met het resultaat, ben nog een tijdje zoet om alles goed te krijgen.

Eén vraagje nog: als ik gewoon de code kopieer in een volledig lege pagina dan kan ik het in de wysiwyg-editor niet laten zakken om er boven iets te plaatsen.
Als ik eerst de twee afbeeldingen plaats en dan de code eronder wil plakken dan lukt het niet, het menu klapt niet open als ik het bekijk via IE en als ik het met de wysiwyg-editor bekijk staat hij er volledig opengeklapt op.
Dat had ik ook als ik hem gewoon in een pagina wilde invoegen. Daarom die omslachtige (maar geef er niet om) manier.
Wou een menu en heb er nu een prachtige.
Bedankt erg veel bedankt.

Heb ondertussen al wat opgestoken van HTML, maar een cursus is iets waar ik me deze winter ga op toeleggen. Tips voor cursussen (website, boeken, scholing) zijn welkom.

Mvg
Frank

coderunner · 30 okt 2010, 19:19

Beste Frank,

1- Ja ik had je site bekeken en aan de hand van jouw gebruikte kleuren, de kleuren in het menu verwerkt.

2-a Ik weet niet hoe de online WebCreator van one.com werkt en welke extra's deze wysiwyg editor aan je pagina's toevoegt bij het opslaan ervan.
Het kan zijn dat je in de settings (als deze er al zouden zijn) van WebCreator het opslaan moet instellen op encoding charset utf-8.

2-b Indien het probleem met accenten, speciale tekens, ... hierdoor niet opgelost raakt dan moet je de ascii codes gebruiken voor deze speciale tekens. Deze kan je hier terugvinden.
bv é wordt

Code: Selecteer alles

& #233;  (ZONDER spatie tussen & en # !!!)
of
&eacute;

enz ... (zie tabel)

3- Als je iets boven het menu wil plaatsen dan plaats je de code boven

Code: Selecteer alles

... Hier komt de code ...

<!-- PULL DOWN MENU - BEGIN --> 

<div id="mainmenu"> 
...

mvg,
Coderunner

FrankC · 03 nov 2010, 20:25

Heb nog enkele vraagjes.
Nadat ik het menu op de site geplaatst heb zijn er enkele zaken die anders zijn dan voorheen. Zo kan ik een tekst die een link aangeeft niet altijd in de juiste kleur krijgen.
Met de lichtkrant is er ook iets raars aan de hand.
Op mijn laptop en op mijn desktop loopt ze niet door. Ze verschijnt en eens er alles opstaat verdwijnt ze en schuift ze opnieuw in beeld. In Firefox lukt het dan wel.
Maar op mijn pc op het werk loopt de lichtkrant wel zoals het moet maar vouwt het menu niet open.
Ik ben nog volop bezig met alle pagina's aan te passen en ga dan een navraag doen bij de leden hoe het op hun pc verschijnt.
Kan het iets te maken hebben met het zinnetje: " This line is required for IE 6 and below " in de code?

Maar niettemin ben ik zeer tevreden met het menu en heb er al positieve commentaar op gekregen. Ik vermeld het er toch telkens bij dat ik proffessionele hulp gekregen heb.

Groeten
FrankC