menu

Status
Niet open voor verdere reacties.
D

denka

Nieuwe gebruiker
Lid geworden
28 jan 2010
Berichten
1
Ik zou graag mijn menu willen uitbreiden met submenu's, zoals bijv. Over ons -> Wie zijn wij -> en dat er dan nog eens tabel opzij opent met meerdere opties.

Zie: http://members.ziggo.nl/marakayas/index/indexx.html

Hoe moet ik de broncode dan aanpassen?

Heb al van alles geprobeerd met kant en klare scripts enzo maar krijg die niet goed werkend in NVU. Ben niet zo heel handig zoals je begrijpt.
 
Laatst bewerkt:
Hallo Denka :thumb:

Het is niet mooi oogend je menu maar heb er eentje voor je
je moet maar enkel je paginas en je titels van je submenus aantepassen

HTML: 
<!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=utf-8" />
    <title>Generated by Pure CSS Menu.com : Free CSS Drop Down Menu Generator</title>
    <meta name="description" content="Online CSS Menu Maker. Create No-Javascript, 100% CSS Dropdown Menu in seconds! Horizontal css menu & Vertical css menu." />
</head>
<body bgcolor="#ffffff">
 
 
 
<!-- Start PureCSSMenu.com STYLE -->
<style> 
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 3px 3px 0px;
	background-color:#414141;
	background-repeat:repeat;
	border-color:#CECECE;
	border-width:4px;
	border-style:ridge;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
	display:block;
	zoom:1;
	position:absolute;
	z-index: 1000;
	left: 100;
	top: 200;
}
* HTML ul.pureCssMenu {position:absolute}
ul.pureCssMenu ul{
	width:85.05px;
}
ul.pureCssMenu li{
	display:block;
	margin:3px 0px 0px 3px;
	font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	background-color:#414141;
	border-width:1px;
	border-color:#FFAE0D;
	border-style:solid;
	text-align:left;
	text-decoration:none;
	padding:4px;
	_padding-left:0;
	font:normal 11px Verdana;
	color: #FFAE0D;
	text-decoration:none;
	cursor:pointer;
}
ul.pureCssMenu span{
	overflow:hidden;
}
ul.pureCssMenu li {
	float:left;
}
ul.pureCssMenu ul li {
	float:none;
}
ul.pureCssMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.pureCssMenu li.sep{
	text-align:left;
	padding:0px;
	line-height:0;
	height:100%;
}
ul.pureCssMenu li.sep span{
	float:none;	padding-right:0;
	width:3;
	height:100%;
	display:inline-block;
	background-color:#CECECE;	background-image:none;}
ul.pureCssMenu ul li.sep span{
	width:100%;
	height:3;
}
ul.pureCssMenu li:hover{
	position:relative;
}
ul.pureCssMenu li:hover>a{
	background-color:#5E5E5E;
	border-color:#FF9D2E;
	border-style:solid;
	font:normal 11px Verdana;
	color: #FF7214;
	text-decoration:none;
}
ul.pureCssMenu li a:hover{
	position:relative;
	background-color:#5E5E5E;
	border-color:#FF9D2E;
	border-style:solid;
	font:normal 11px Verdana;
	color: #FF7214;
	text-decoration:none;
}
ul.pureCssMenu li.dis a {
	color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:24px;
height:24px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def  {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{
	display:block;
	background-image:url(./images/arrow_sub5.gif);
	background-position:right center;
	background-repeat: no-repeat;
   padding-right:14px;}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arrow_sub2.gif)}
ul.pureCssMenu ul li:hover > a span{	background-image:url(./images/arrow_sub5.gif);}
ul.pureCssMenu table a:hover span{background-image:url(./images/arrow_sub5.gif)}
</style>
<!-- End PureCSSMenu.com STYLE -->
 
 
 
<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum">
	<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Over Ons</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #14</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #15</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Whippets</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #16</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #17</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #18</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #19</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Teven</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #20</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #21</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #22</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #23</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #24</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Reuen</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #25</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #26</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #27</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #28</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Memories</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #29</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #30</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Nesten</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #31</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #32</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Foto's</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #33</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #34</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #35</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #36</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Rennen</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #37</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #38</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #39</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #40</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Kampioen</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #41</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #42</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #43</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #44</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #45</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #46</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Kampioen</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #47</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #48</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #49</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #50</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #51</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #52</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Nieuws</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #53</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #54</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Links</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #55</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #56</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Contact</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #57</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #58</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Item #59</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>
<!-- End PureCSSMenu.com MENU -->
 
 
 
<!-- (c) 2009, PureCSSMenu.com -->
 
 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

Groetjes michelscot :cool:
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan