PDA

Volledige versie bekijken : website


karma
26 May 2006, 11:01
hallo, ik wil graag m'n site upgraden en wil de knoppen bovenaan, en veranderen in mouseover buttons, css zodanig als je met een muis over een knop gaat een lijste uitklapt, met links, Ik denk dat dit met css moet, maar ken enkel een beetje html. graag wat meer info iemand die me wil helpen? georges

gebroken link


website url toegevoegd
Joga
26 May 2006, 14:30
ik weet het niet zeker maar is dit niet met javascript ?
Spoorzoeker
26 May 2006, 19:11
Dit doe je het beste met dhtml
zodiac
26 May 2006, 20:29
- Je kan het doen met javascript in combinatie met css, met css alleen is het goed mogelijk, maar het vergt veel werk.
- Een paar tips voor die hoop afbeeldingen: afbeeldingenmet tekst sla je best op in .gif, afbeeldingen: foto's ed sla je dan wel op in .jpg, .bmp, .png
- je hebt niet echt css in je site gebruikt, wat dynamiek verhindert..

ik ken een site waarop een css-menu staat, met een beetje aanpassing, maak je een passend enu ff zoeken :)
zodiac
26 May 2006, 20:56
kheb eens iets in elkaar gestoken:

<html>
<head>

<style type="text/css">
p {font-family:arial; font-size:12px}
A:link, A:visited {color:orange}
A:hover {color:white}

#navigatie {margin: 0px; padding: 0px; height: 22px; z-index: 50}
#navigatie li {width: 200px; height: 22px; position: absolute; display: block; z-index: 50; list-style: none}
#navigatie a {width: 200px; height: 22px; display: block; z-index: 50; color:black}
#navigatie a:hover {width: 200px; height: 22px; display: block; z-index: 50; color:red; background-color:blue; border:0px}

#n1 {left:0}
#n2 {left:200px}
#n3 {left:400px}
#n4 {left:600px}
#n5 {left:800px}
#n1,#n2,#n3,#n4,#n5{}

#n1 a {}
#n2 a {background-position: -200px 0}
#n3 a {background-position: -400px 0}
#n4 a {background-position: -600px 0}
#n5 a {background-position: -800px 0}
#n1 a,#n2 a,#n3 a,#n4 a,#n5 a{background-color:green; padding:3 0 3 15}

#n1 a:hover {background-position: 0 -22px}
#n2 a:hover {background-position: -200px -22px}
#n3 a:hover {background-position: -400px -22px}
#n4 a:hover {background-position: -600px -22px}
#n5 a:hover {background-position: -800px -22px}
#n1 a:hover,#n2 a:hover,#n3 a:hover,#n4 a:hover,#n5 a:hover{background-color:yellow}

#navigatie li ul {visibility: hidden; position: absolute; left: -1px; margin: 0 0 0 5px; padding: 0px; width:200px; border:0px}
#navigatie #n1 ul,#navigatie #n2 ul,#navigatie #n3 ul,#navigatie #n4 ul,#navigatie #n5 ul {background-color:white}
#navigatie li ul li, #navigatie li ul li a {width:200px; position: relative; z-index: 56}
#navigatie li ul li a {padding:3 0 3 15; border:0px}
#navigatie li:hover>ul {visibility: visible}

</style>

<script language="javascript" type="text/javascript">
function cssJsMenu(elemId) {
if (document.getElementById(elemId)) {
var navroot = document.getElementById(elemId);
var lis=navroot.getElementsByTagName("LI");
for (i=0; i<lis.length; i++) {
for (j=0; j<lis[i].getElementsByTagName("UL").length; j++) {
lis[i].onmouseover = function() {
this.getElementsByTagName("UL")[j].style.visibility = 'visible';}
lis[i].onmouseout = function() {
this.getElementsByTagName("UL")[j].style.visibility = 'hidden';}}}}}
</script>

</head>
<body leftmargin="0px" topmargin="10px" style="background-color:#F0F0F0">

<ul id="navigatie">
<li id="n1">
<a href="#">Home</a>
<ul>
<li><a href="#">1.1</a></li>
<li><a href="#">1.2</a></li>
<li><a href="#">1.3</a></li>
<li><a href="#">1.4</a></li>
<li><a href="#">1.5</a></li>
</ul>
</li>
<li id="n2">
<a href="#">Menu 2</a>
<ul>
<li><a href="#">2.1</a></li>
<li><a href="#">2.2</a></li>
<li><a href="#">2.3</a></li>
<li><a href="#">2.4</a></li>
<li><a href="#">2.5</a></li>
</ul>
</li>
<li id="n3">
<a href="#">Menu 3</a>
<ul>
<li><a href="#">3.1</a></li>
<li><a href="#">3.2</a></li>
<li><a href="#">3.3</a></li>
<li><a href="#">3.4</a></li>
<li><a href="#">3.5</a></li>
</ul>
</li>
<li id="n4">
<a href="#">Menu 4</a>
<ul>
<li><a href="#">4.1</a></li>
<li><a href="#">4.2</a></li>
<li><a href="#">4.3</a></li>
<li><a href="#">4.4</a></li>
<li><a href="#">4.5</a></li>
</ul>
</li>
<li id="n5">
<a href="#">Menu 5</a>
<ul>
<li><a href="#">5.1</a></li>
<li><a href="#">5.2</a></li>
<li><a href="#">5.3</a></li>
<li><a href="#">5.4</a></li>
<li><a href="#">5.5</a></li>
</ul>
</li>
</ul>

<script language="javascript" type="text/javascript">cssJsMenu('navigatie');</script>
</body></html>
Er komt dus wel javascript voor
karma
29 May 2006, 08:22
nu nog uit proberen op m'n site. dat kan wel ff duren, lang geleden dat ik nog eens iets gedaan heb met html. maar ik heb dit getest en het is net wat ik zocht, heel erg bedankt Zodiac