Drop down menu horizontaal

Status
Niet open voor verdere reacties.
C

chantallos

Gebruiker
Lid geworden
23 jun 2010
Berichten
18
Hallo,
Ik heb al verschillende codes geprobeert om een menu te maken die openklapt, maar geen eentje werkt.
Of ze openen niet in mijn frames, of ze gaan niet over mijn frames heen.
Ik kan ook een website maken zonder frames, als die drop down menu tenminste op dezelfde pagina opent en niet een nieuwe pagina opent.
Wie kan mij helpen met een horizontale dropdown menu die alles op dezelfde pagina (begin pagina) opent?
Gr. chantal
 
zo ja dan is dit de code:

HTML

<div id="topmenu"><ul>

<li><a href="index.php">Home</a></li>
<li><a href="index.php?id=hoi">hoi</a>
<ul>
<li><a href="index.php?id=hoi_1">Hoi 1</a></li>
<li><a href="index.php?id=hoi_2">Hoi 2</a></li>
</ul>
</li>
<li><a href="index.php?id=bla">bla</a></li>
</ul>
</li>
</ul>
</div>

STYLE

#topmenu{
width:900px;
height:40px;
text-align:center;
}

#topmenu li{
float:left;
text-align:center;
}

#topmenu ul{
list-style-type:none;
margin-top:5px;
margin-left:5px;
padding: 0;
text-align:center;
}

#topmenu ul li a {
display: block;
padding: 6px 2px 6px 4px;
text-decoration: none;
color:white;
width: 110px;
text-align:center;
}

#topmenu li ul{
background-color:blue;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:116px;
z-index:200;
/*top:1em;
/*left:0;*/
border-bottom-color:#FFFFFF;
border-bottom-style:outset;
border-bottom-width:thin;
border-left-color:#FFFFFF;
border-left-style:outset;
border-left-width:thin;
border-right-color:#FFFFFF;
border-right-style:outset;
border-right-width:thin;
}

#topmenu li:hover ul{
display:block;
}


#topmenu ul li a:hover {
background-color:Red;
width:110px;
}
 
misschien is het handig om er een achtergrond kleur op te zetten.

background-color:Green;

in #topmenu
 
Laatst bewerkt:
er zijn een paar dingen die ik niet snap.

1 waarom gebruik je frames?

2 waarom heb je sommige stukjes test wit gemaakt op de home pagina? ze zijn onzichtbaar.

3 waarom gebruik je hyves voor je foto's en video's? niet erg pro.

als je wil kan ik wel iets voor je maken wat werkt zoals je het wil.

o ja de links openen in een frame kan door tussen de <a > target="frame_name" neer te zetten.
 
Ik hoef niet per sé frames te gebruiken, als de menu's maar in dezelfde pagina openen. Maar dat krijg ik dus niet voor elkaar.

Ik had jouw code gekopieerd. Daarin was de tekst wit, maar dat moet ik nog veranderen. Ik wilo eerst zeker weten of het werkt voordat ik weer alles voor niets doe.

Voor deze site ga ik geen hyves gebruiken.

Hoe link ik mijn menu dan in die pagina zoals jouw voorbeeld?
Dus je klikt op onze honden en hij opent zonder een nieuw pagina te openen de Onze honden pagina?
Gr. chantal
 
Het lukt nog steeds niet. Hij opent de links in een nieuwe pagina. Ik heb de html code hieronder. Wat doe ik nou verkeerd?
Gr. chantal

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<HTML>

<style type="text/css">
<!--
body {
background-color: #CC9933;
}
-->
</style><div id="topmenu"><ul>


<li><a href="index.htm" target="_self"_self">Home</a></li>
<li><a href="onze honden.htm" target="_self">Onze honden</a>
<ul>
<li><a href="queeny.htm" target="_self">Queeny</a></li>
<li><a href="diva.htm" target="_self">Diva</a></li>
<li><a href="nolan.htm" target="_self">Nolan</a></li>
</ul>
</li>
<li><a href="index.htm" target="_self">bla</a></li>
</ul>
</li>
</ul>
</div>

<STYLE>

#topmenu{
width:900px;
height:40px;
text-align:center;
}

#topmenu li{
float:left;
text-align:center;
}

#topmenu ul{
list-style-type:none;
margin-top:5px;
margin-left:5px;
padding: 0;
text-align:center;
}

#topmenu ul li a {
display: block;
padding: 6px 2px 6px 4px;
text-decoration: none;
color:black;
width: 110px;
text-align:center;
}

#topmenu li ul{
background-color:blue;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:116px;
z-index:200;
/*top:1em;
/*left:0;*/
border-bottom-color:#FFFFFF;
border-bottom-styleutset;
border-bottom-width:thin;
border-left-color:#FFFFFF;
border-left-styleutset;
border-left-width:thin;
border-right-color:#FFFFFF;
border-right-styleutset;
border-right-width:thin;
}

#topmenu li:hover ul{
display:block;
}


#topmenu ul li a:hover {
background-color:Red;
width:110px;



</head>

<body>
</body>
</html>
 
je hebt de hele code door elkaar gehaald.

2x een html tag

style niet gesloten

body in de head

ik zal hem nog 1 keer in de goede volgorde zetten

ps bij mij opent hij hem wel gewoon in hetzelfde venster.


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

body {
background-color: #CC9933;
}

#topmenu{
width:900px;
height:40px;
text-align:center;
}

#topmenu li{
float:left;
text-align:center;
}

#topmenu ul{
list-style-type:none;
margin-top:5px;
margin-left:5px;
padding: 0;
text-align:center;
}

#topmenu ul li a {
display: block;
padding: 6px 2px 6px 4px;
text-decoration: none;
color:black;
width: 110px;
text-align:center;
}

#topmenu li ul{
background-color:blue;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:116px;
z-index:200;
/*top:1em;
/*left:0;*/
border-bottom-color:#FFFFFF;
border-bottom:styleutset;
border-bottom-width:thin;
border-left-color:#FFFFFF;
border-left:styleutset;
border-left-width:thin;
border-right-color:#FFFFFF;
border-right:styleutset;
border-right-width:thin;
}

#topmenu li:hover ul{
display:block;
}

#topmenu ul li a:hover {
background-color:Red;
width:110px;
}

</style>
</head>
<body>
<div id="topmenu"><ul>
<li><a href="index.htm" target="_self"_self">Home</a></li>
<li><a href="onze honden.htm" target="_self">Onze honden</a>
<ul>
<li><a href="queeny.htm" target="_self">Queeny</a></li>
<li><a href="diva.htm" target="_self">Diva</a></li>
<li><a href="nolan.htm" target="_self">Nolan</a></li>
</ul>
</li>
<li><a href="index.htm" target="_self">bla</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
 
Laatst bewerkt:
Nogmaals hij opent hem niet in een nieuw venster.

Maar gewoon in dezelfde zoals het hoort.

maar wat wil je nu??

dat hij hem in een frame opent?
 
ja, ik denk het wel. Het is de bedoeling dat hij hem in het midden opent en het menu boven blijft staan.
Misschien ben ik niet duidelijk geweest. Misschien nu wel???
Groetjes chantal
 
dit is de code

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

body {
background-color: #CC9933;
}

#topmenu{
width:900px;
height:40px;
text-align:center;
}

#topmenu li{
float:left;
text-align:center;
}

#topmenu ul{
list-style-type:none;
margin-top:5px;
margin-left:5px;
padding: 0;
text-align:center;
}

#topmenu ul li a {
display: block;
padding: 6px 2px 6px 4px;
text-decoration: none;
color:black;
width: 110px;
text-align:center;
}

#topmenu li ul{
background-color:blue;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:116px;
z-index:200;
/*top:1em;
/*left:0;*/
border-bottom-color:#FFFFFF;
border-bottom:styleutset;
border-bottom-width:thin;
border-left-color:#FFFFFF;
border-left:styleutset;
border-left-width:thin;
border-right-color:#FFFFFF;
border-right:styleutset;
border-right-width:thin;
}

#topmenu li:hover ul{
display:block;
}

#topmenu ul li a:hover {
background-color:Red;
width:110px;
}

</style>
</head>
<body>
<div id="topmenu"><ul>
<li><a href="pagina/home.html" target="iframe">Home</a></li>
<li><a href="pagina/onze honden.html" target="iframe">Onze honden</a>
<ul>
<li><a href="pagina/queeny.html" target="iframe">Queeny</a></li>
<li><a href="pagina/diva.html" target="iframe">Diva</a></li>
<li><a href="pagina/nolan.html" target="iframe">Nolan</a></li>
</ul>
</li>
<li><a href="pagina/home.html" target="iframe">bla</a></li>
</ul>
</li>
</ul>
</div>
<iframe height="500" width="100%" frameborder="0" name="iframe" src="pagina/home.html"></iframe>
</body>
</html>


het is beter om de pagina's die in het frame moeten komen in de map pagina te zetten

ps

ik heb van de pagina's html gemaakt ipv htm

en /pagina/home.html is de beginpagina

ik maak wel een php code voor je dat is veel beter
 
ik heb een php site voor je gemaakt.

hier te downloaden

het menu aanpassen kan in het bestand top.php

css staat in /css/stylesheet.css

index.php en pagina.php hoef je niet aan te passen

als je een nieuwe pagina wil maken doe je dat in de map /pagina bijv: Hallo dus hoofdletter en geen extentie

en en link er naar doe je zo pagina.php?page=pagina/Hallo

ik denk dat het zo wel duidelijk is.
 
bedankt voor het php (ik heb nog nooit met php gewerkt).
Maar hij opent het nog steeds niet in het midden, maar op een nieuwe pagina. Snap er niets van. Ik dacht dat ik verstand had van websites maken, omdat ik er een voor mijn ouders heb gemaakt, maar dit keer krijg ik het niet voor elkaar. Jammer zeg.
Weet jij wat ik verkeerd doe?
gr. chantal
 
ja ik ben target="iframe" vergeten te veranderen in target="_self"

probeer dat maar even.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan