een submenu in een horizontaal menu

Rich007 · 13 apr 2011, 13:17

Ik heb een horizontaal menu gemaakt. Een div met daaraan gekoppeld de css met display: inline, zo komt het menu horizontaal te staan. Nu zou ik graag een submenu maken, dus zo dat als je met de muis over een item gaat, er een menu opengaat. Weet iemand de oplossing? Kan dit gewoon in css of moet dat met javascript?

Bedankt bij voorbaat!
Groeten

coderunner · 13 apr 2011, 14:16

Beste Rich007,

Dat kan perfect in css. Er staan vele voorbeelden met de gebruikte codes van een horizontale menu met submenus beschreven op het internet.
Zoek eens naar bv. "css Horizontal menu with submenu"

Je hebt keuze en voorbeelden genoeg.

Heb je hulp nodig met één van de gevonden menu's, dan laat je het maar weten met het probleem en de link naar het gekozen menu.

mvg,
Coderunner

Rich007 · 13 apr 2011, 18:25

Beste coderunner,
Bedankt voor uw reactie!
Heb de site www.katinkahesselink.net bekeken, onderdeel horizontale menu's
Heb bijhorende css ook gecopieerd.

In design (visual studio express 2008) in de html krijg ik enkel tezien: webdesign en webontwerp en in een kader. dat is al ok.
Nu vind ik maar niet hoe je in de html het nodige moet invoeren voor een submenu te krijgen bij webdesign en webontwerp. Het is de bedoeling dat als je er met de muis overgaat de menu's opengaan.
http://www.katinkahesselink.net/webvisie/cssmenu2.html

Bedankt voor uw reactie

coderunner · 13 apr 2011, 19:22

Beste Rich007,

Je hebt een verkeerde pagina geraadpleegd. Volgens mij is dat niet wat je zoekt. Het resultaat van jouw voorbeeld zie je >> hier << (niet echt een menu met submenu's).

Kijk eens op >>> deze website <<< waar je een menu kan maken met sub en subsubmenu's.

mvg,
Coderunner

Rich007 · 13 apr 2011, 21:38

Hartelijk bedankt voor de reactie Coderunner. Ik laat iets weten als het gelukt is!
nogmaals bedankt voor de prompte reactie!

Rich007 · 14 apr 2011, 21:26

Beste coderunner,

Ik heb de html en de css gecopieerd. (in visula studio 2008) Wanneer ik de code run met firefox zag ik de lijst staan maar dan verticaal uitgelijnd met de submenu's. Na opslaan van de css komt de horizontale menu mooi tevoorschijn. Wat echter bizar is is dat de link naar mijn contactformulier werkt, maar de submenu's niet tevoorschijn komen wanneer ik op de items klik. De code van de javascript staat in de .css. Moet de javascript in de html gezet worden? Heb ik iets over het hoofd gezien of doe ik iets verkeerd?
Met dank voor uw raad.

coderunner · 15 apr 2011, 14:26

Beste Rich007,

Het menu+submenu bestaat uit 3 delen nl.
1- een stylesheet : deze plaats je tussen de <head> en </head> tags of in een apart .css bestand dat je dan ook weer oproept tussen de <head> en </head> tags
2- een javascript : deze plaats je tussen de <head> en </head> tags
3- de tags voor de items van het menu+submenu: deze plaats je tussen de <body> en </body> tags op de plaats waar je het menu wil tonen.

Het javascript mag dus zeker niet in het .css bestand staan!

mvg,
Coderunner

Rich007 · 15 apr 2011, 20:47

Beste coderunner,

Het resultaat van het horizontaal menu is gewoon verbluffend!!!
Heb de javascript gezet waar u het gezegd hebt en alles kwam tevoorschijn.
Het is wel uitkijken bij het schrijven van de html, als je meer of minder submenu's wenst!

Vriendelijk bedankt voor de hulp. Na Pasen werk ik verder aan mijn project, nu een week ertussenuit.

coderunner · 15 apr 2011, 22:17

Beste Rich007,

Goed te horen dat het je gelukt is. Bedankt om dit te melden.

Profiteer alvast van je weekje rust en tot de volgende.

mvg,
Coderunner

Rich007 · 02 mei 2011, 18:34

Beste Coderunner,

Ik wou nog eens een vraag stellen ivm de website. Indien je meerdere pagina's maakt met daarop bv een tabel, dien je dan een ander .css bestand te maken of mag die opmaak van verschillende pagina's in slechts 1 bestand staan dat dan betrekking heeft op gans de site? Graag zou ik ook een HOME knop hebben wanneer de surfer niet op de hoofdpagina is. Is hier ook een oplossing voor?
Met dank voor uw antwoord.
RICHOO7

coderunner · 02 mei 2011, 19:14

Beste Rich007,

1- i.v.m. je eerste vraag: css
Je hoeft niet voor elke pagina een ander/apart .css bestand aan te maken.
Je moet wel op elke pagina een link naar het css bestand maken.

2- i.v.m. je tweede vraag: home knop
a- Een tekst-hyperlink maken naar je index.html pagina

Code: Selecteer alles

<a href="index.html">HOME</a>

b- Een knopafbeelding-hyperlink maken naar je index.html pagina

Code: Selecteer alles

<a href="index.html"><img src="home.gif" width="50" height="50" alt="home knop"></a>

(de afbeelding home.gif is een zelf te bepalen afbeelding voor de home knop)

c- Een knop maken naar je index.html pagina

Code: Selecteer alles

<form>
<input type="button" value="Home" OnClick="window.location.href='index.html'"> 
</form>

d- Het horizontale menu die je hebt aangemaakt (zie je begin vraag) op elke pagina plaatsen en voorzien van een extra HOME knop.

mvg,
Coderunner

Rich007 · 02 mei 2011, 20:51

Coderunner,

Bedankt voor uw duidelijk antwoord.
Wanneer u een link maakt, dan staat dan enkel bv "deze website" zoals u in uw vorige antwoorden gedaan heeft en als je er dan op klikt komt de surfer direct op die site. kunt u eens uitleggen hoe u dat doet?

Met vriendelijke groeten
RICH007

coderunner · 02 mei 2011, 21:41

Beste Rich007,

Je bedoelt hier op het forum zelf, juist ?
Opgelet, dit gebeurt niet op dezelfde manier als een hyperlink op je eigen website.

Dit forum maakt gebruik van BBCodes (= Bulletin Board Code en wordt gebruikt om opmaak toe te voegen aan berichten door populaire forums) Lees hier meer over: >> BBCodes <<
Ook hier wordt een begin- en een eindtag gebruikt
bv.- voor bold (vette tekst)

Code: Selecteer alles

[b]dit is vette tekst[/b] en dit is gewone tekst

- voor italic (schuine tekst)

Code: Selecteer alles

[i]dit is schuine tekst[/i] en dit is gewone tekst

m.a.w.
de begintag = [ b ] en eindtag = [ /b ] (zonder spaties)
de begintag = [ i ] en eindtag = [ /i ] (zonder spaties)
enz ...

De toegelaten BBCodes op dit forum zijn: (zie schermafdruk)
- B (bold - vetgedrukte tekst)
- i (italic - schuine tekst)
- u (underline - onderlijnde tekst)
- Quote (een citaat, iemand citeren)
- Code (om een code te laten zien)
- List en List= (om een lijst aan te maken)
- Img (Image - om een foto, afbeelding te tonen)
- URL (om een link toe te voegen)
verder ook
- Letter kleur
- Letter grootte

De BBCode moet wel aanstaan (zie schermafdruk)

Om een link of url aan een bericht op het forum te plaatsen gebruik je de BBCode

Code: Selecteer alles

[url=http://www.hier_de_link.com]KLIK HIER[/url]

mvg,
Coderunner

coderunner · 03 mei 2011, 13:31

Aanvulling:

2- i.v.m. je tweede vraag: home knop
e-1. Wanneer je webhostserver PHP ondersteunt, dan kan je een pagina met alleen het horizontaal menu maken en deze bewaren als "menu.php" (let op de extensie .php). Vergeet de extra HOME-knop niet aan het horizontale menu toe te voegen.

e-2. Vervolgens plaats je op elke pagina, waar het menu moet verschijnen, helemaal bovenaan de code

Code: Selecteer alles

<?php
include("menu.php");
?>

e-3. Bewaar nu elke .html pagina waarop je bovenstaande code hebt toegevoegd als .php pagina.

e-4. Vergeet in je menu de hyperlinks dan ook niet te wijzigen naar .php extensie.

Het menu wordt nu op elke pagina getoond en wanneer je iets wil wijzigen (een topic verwijderen/toevoegen) in het menu, dan hoeft je dat maar 1 keer te doen!

mvg,
Coderunner

Rich007 · 03 mei 2011, 21:49

Bedankt Coderunner
Stel ik stuur naar iemand een email en ik wil een link zoals u gemaakt hebt met >>BBCodes<< , daar zit een link achter en ik ben nieuwgierig hoe die gemaakt wordt.

Toch verbazingwekkend hoe u zo helder iets kan uitleggen, echt afdoend
"
bv ik stuur naar iemand een mail en ik zet bv" klik hier".
Die" klik hier " is hetgeen de ontvanger te zien krijgt. Hetgeen er achter zit is bv de link naar seniorennet maar die www enz.. dat ziet de ontvanger niet staan.
Met dank voor uw antwoord