Menu voor website.

**Mya Nus** · 30-06-2009, 15:20

Hoe maak je eigenlijk een menu voor een website. Zijn er ergens goede Nederlandse tutoriuls, of kan je het zelf goed uitleggen. Help me aub.

Ps. Ik wil een menu zoals hier: www.shownieuws.tv

**gast17013** · 30-06-2009, 15:29

Een hele simpele:

Code:

.balk { width: 500px; height: 20px; background-color: #000000; }
.balk a:hover { color: red; }
.balk a:link { color: white; }

<div class="balk">
 <a href="index.html">Home</a>
<div>

**Mya Nus** · 30-06-2009, 15:31

Origineel gepost door luuk bijveld

Een hele simpele:

Code:

.balk { width: 500px; height: 20px; background-color: #000000; }
.balk a:hover { color: red; }
.balk a:link { color: white; }

<div class="balk">
 <a href="index.html">Home</a>
<div>

moet ik die tussen ''body'' stoppen?

**gast16374** · 30-06-2009, 15:36

Je maakt met illustrator of iets anders een menu gedeelte zoals je hem wilt laten zien alsje muis er niet op is. Dan een andere versie voor als je muis erop is (mouseover) en nog een versie voor als erop geklikt word.

Dan zet je dit in je head zodat de verschillende plaatjes preloaded worden:

<script language="JavaScript">  </script>

Dit plaats je in waar je het menu wilt.

<a onmouseover="image1.src=menu1b.gif";"
onmouseout="image1.src=menu1a.gif";"><img name="image1" src="menu1a.gif" border="0" alt="" /></a>

Hierbij is menu1a het originele plaatje en menu1b het plaatje wat verschijnt als de muis erover komt.

Zoiets is denk ik de makkelijkste manier?

Edit: ik heb plaatjes genomen als voorbeeld omdat de site waar naar gerefereerd werd ook plaatjes had als menu. Bovenstaande manier is simpeler.

**Dirk B** · 30-06-2009, 15:37

Even een aanpassing van eerder genoemde oplossing om het duidelijk voor je te maken:

Je maakt een file aan en die noem je bijvoorbeeld style.css

dan zet je:
<link href="linknaardecssfile/style.css" rel="stylesheet" type="text/css">
tussen <head> en </head> in je index.html of index.php

In die file staat dan:
.balk { width: 500px; height: 20px; background-color: #000000; }
.balk a:hover { color: red; }
.balk a:link { color: white; }

In je indexfile zet je:
<div class="balk"> <a href="index.html">Home</a> <div>

het is nog mooier om dit met ul en li te doen. VB

<div id='menu'>
<ul>
<li><a href='delink'>De Link Titel</a></li>
<li><a href='delink'>De Link Titel</a></li>
<li><a href='delink'>De Link Titel</a></li>
</ul>
</div>

Lees anders eens dit:
http://www.mijnhomepage.nl/csscursus...noverzicht.php
of zoek op google naar CSS

**gast17013** · 30-06-2009, 15:44

Origineel gepost door Dirk B

Even een aanpassing van eerder genoemde oplossing om het duidelijk voor je te maken:

Je maakt een file aan en die noem je bijvoorbeeld style.css

dan zet je:
<link href="linknaardecssfile/style.css" rel="stylesheet" type="text/css">
tussen <head> en </head> in je index.html of index.php

In die file staat dan:
.balk { width: 500px; height: 20px; background-color: #000000; }
.balk a:hover { color: red; }
.balk a:link { color: white; }

In je indexfile zet je:
<div class="balk"> <a href="index.html">Home</a> <div>

het is nog mooier om dit met ul en li te doen. VB

<div id='menu'>
<ul>
<li><a href='delink'>De Link Titel</a></li>
<li><a href='delink'>De Link Titel</a></li>
<li><a href='delink'>De Link Titel</a></li>
</ul>
</div>

Lees anders eens dit:
http://www.mijnhomepage.nl/csscursus...noverzicht.php
of zoek op google naar CSS

Ik heb ook aangegeven dat hij niet mooi is en ik ga hem ook niet alles voor kauwen..

**Dirk B** · 30-06-2009, 15:50

Origineel gepost door luuk bijveld

Ik heb ook aangegeven dat hij niet mooi is en ik ga hem ook niet alles voor kauwen..

Nee, maar sommige mensen kennen Google nog niet en dan kunnen we ze even een handje helpen..

**Mya Nus** · 30-06-2009, 15:50

Dankjewel mensen :), ik denk dat ik hiermee op kan bouwen.

**Rens L.** · 30-06-2009, 22:29

Origineel gepost door Michael G

Ik heb nog nooit een website gemaakt, maareh klopt het dat als je een menubar tekent met photoshop en dan daar tekst intik en dat je die tekst verandert naar links dat je dan ook gewoon een menu heb.

Ja dit klopt, moet je wel werken met slice en vervolgens bij het omzetten naar html + images instellen dat rollovers moeten zijn e.d.

**Daan V.** · 03-07-2009, 10:32

Klopt, maar dat is wel de slechtste manier die er is. Als je het goed wilt doen dan google je even op css menu. Kost moeite, kost tijd. Maar het resultaat is er ook naar.

Bovendien zijn dit soort tutorials ook heel erg netjes geschreven, met plaatjes en 'dummy' (sorry als ik je hiermee aanval) proof.

Hier kun je denk ik wel wat mee.

Succes!

**Rens L.** · 03-07-2009, 10:51

Ben het eens met daan v. dat het gebruik van photoshop om html te laten genereren niet de mooiste code opleverd. Ander nadeel: als je nieuwe link aan wilt maken moet je dat helemaal weer via photoshop doen, of iig nieuwe afbeelding ofzo voor maken.
Met css heb je dit probleem niet.

Menu voor website.