Drop down menu naar links

Status
Niet open voor verdere reacties.
J

jessy051095

Gebruiker
Lid geworden
3 mei 2013
Berichten
13
Hallo,

Ik wil op mijn site een drop down menu plaatsen, maar dan een die onder elkaar staat, maar dan naar links uitvouwt.
hoe kan ik dit het beste doen?

ik heb uiteindelijk een menu gekregen, alleen stond het 'uitgevouwen blokje' niet recht naast het 'hoofd blokje'.

sorry voor mijn wazige uitleg, maar in de bijlage een printscreen van wat ik bedoel.

printscreen.png

ik hoop dat jullie mij kunnen helpen

gr.

Jessy
 
Hoi Jessy,
Welkom op het forum!
Het probleem is duidelijk; maar wat er aan gedaan kan worden, is afhankelijk van wat er al is aan html- en css-code.
Met alleen een foto van de patiënt kan de dokter niet weten welke pilletje er nodig is: de dokter wil de patiënt zelf zien. ;)

  • Heb je een link naar een (test)pagina?
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hoi Jessy,
Ja, dat zal wel lukken.
Ik dacht hieraan voor de css van het menu:
Code: 
#menu {
	width: 300px;
	}
#menu ul {
	float: right;
	width: 175px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid #CC0099;
	border-left: 1px solid #C8C8C8;
	text-shadow: 1px 1px black;
	}
#menu li {
	margin: 0;
	padding: 0;
	position: relative;
	float: left;  /* voor IE */
	}
#menu li a {
	width: 145px; /* voor IE */
	padding: 15px;
	display: block;
	border-top: 1px solid #CC0099;
	background: #000000;
	color: #FFFFFF;
	white-space: nowrap;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 14px;
	text-decoration: none;
	}
#menu li:hover a {
	background: #CC0099;
	}
#menu ul ul {
	width: 125px;
	position: absolute;
	top: 0;
	right: -9999px; /* submenu's buiten beeld getrokken */
	border-bottom: 1px solid #A00079;
	}
#menu ul ul a {
	width: 98px; /* voor IE */
	font-size: 12px;
	padding: 13px;
	border-top: 1px solid #A00079;
	border-right: 1px solid #C8C8C8;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}
#menu li:hover ul {
	right: 175px; /* submenu bij hover hoofdmenu op goede plaats getrokken */
	}
#menu li:hover li a:hover {
	background: #E943E7;
	}
Toelichting:
  • Het hoofdmenu is 175px breed, het submenu is 125px breed.
  • Begonnen is de totale breedte van 300px te claimen in de <div id="menu">, zodat de submenu's niet buiten boord kunnen komen.
  • Binnen het #menu wordt het hoofdmenu naar rechts gedrapeerd met {float: right;}.
  • De hoofdmenu-<li>'s krijgen een relatieve positie.
  • De submenu's krijgen een absolute positie t.o.v. de hoofdmenu-items, met dezelfde top-hoogte:
    #menu ul ul {position: absolute; top: 0;}
  • De submenu's blijven onzichtbaar met {right: -9999px;}, dat is beter dan met {display: none;}.
  • Bij een hover op het hoofdmenu komt het betreffende submenu op zijn plaats, met de rechterkant naast de breedte van het hoofdmenu:
    #menu li:hover ul {right: 175px;}
  • Omdat de <a>'s alleen een border-top hebben, krijgen de onderste items van menu en submenu's geen bordertje. Dat kan goed gemaakt worden door de <ul> waar ze in zitten een border-bottom te geven van dezelfde kleur.
  • De borders van de submenu-items zijn iets donkerder gemaakt, zodat duidelijk is waar de hover van het volgende item begint (scheidingsrandje).
  • Voor betere leesbaarheid is de hoverkleur van de submenu's iets donkerder gemaakt.
  • Voor betere leesbaarheid is er ook "text-shadow" bijgekomen, zodat de witte letters wat meer contrast krijgen (doet het niet in Internet Explorer 8, maar wel in IE9, Firefox, Chrome en andere moderne browsers).
Test: beauty-nw.htm

Met vriendelijke groet,
CSShunter
__________
O ja, om de Meest Vreselijke Ongelukken in Internet Explorer te vermijden ;), moet er een geldig "Doctype" aan het begin van elke pagina-code staan, bv.:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>... enz.
Zie hier (in de voetnoot) waarom!
 
Laatst bewerkt:
Hoi CSShunter,

het probleem is opgelost.
alleen is er nu een nieuw probleem opgedoken.
omdat je het submenu helemaal naar rechts plaats, krijg je dus die scrolbalk onderaan de pagina. nu kan ik dit wel verhelpen met scrolling="no".
is er misschien nog een andere manier om dit te verhelpen?
en zoals je op de afbeelding ziet, staat het menu voor de helft op de pagina. hoe krijg ik hem meer naar links?

screenshot.jpg

gr

Jessy
 
Hoi Jessy,
Tja, dat is vast wel te verhelpen: zowel de scrollbar als het teveel naar rechts staan.
Maar, alweer, zonder de complete html- en css-code van de pagina is niet te zien wat er moet veranderen.
Want uit het screenshot kan je het niet aflezen. :rolleyes:

Het makkelijkst is, om even een testpagina online te zetten: dan is meteen alles bij de hand en hoeft de pagina niet gereconstrueerd te worden.

Met vriendelijke groet,
CSShunter
 
Mijn css en html is nog precies t zelfde als eerst. Heb nu alleen de css aangepast naar dat wat jij gestuurd hebt.
Daarom heb ik ook alleen maar een screenshot gemaakt.
Ik hoop dat het zo lukt, anders moet je het even laten weten en dan stuur ik je alsnog de css en html code.

Gr.
Jessy
 
hier de html bestanden van de hoofdpagina en van het menu.

hoofdpagina:

<html>

<frameset rows="*,36px" noresize border="no">
<frameset cols="1150,*">
<frameset rows="210,*">
<frame src="plaatjes/kopwitlogo1.png" noresize>

<frame src="paginas/tekst.html" ></frameset>
<frameset rows="280,*">
<frame src="paginas/logo.html" noresize background="black">
<frame src="paginas/menu.html" noresize>
</frameset>
</frameset>
<frame src="paginas/adres.html" noresize>

</frameset><noframes></noframes>

</html>



html menu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="opmaakmetmenu.css" rel="stylesheet" type="text/css" />
<title>
</title>
<body bgcolor="#000000">
<div id="menu">
<ul>
<li><a href="paginas/hair.html" title="Hair" target="link">Hair</a>
<ul>
<li><a href="#">Hair</a></li>
<li><a href="#">Prijslijst</a></li>

</ul></li>
<li><a href="paginas/beauty.html" title="Beauty">Beauty</a>
<ul>
<li><a href="#">Hair</a></li>
<li><a href="#">Prijslijst</a></li>

</ul></li>
<li><a href="paginas/wellness.html" title="Wellness">Wellness</a>
<ul>
<li><a href="#">Hair</a></li>
<li><a href="#">Prijslijst</a></li>

</ul></li>
<li><a href="paginas/ipl.html" title="Huidverbetering">Huidverbetering</a></li>
<li><a href="paginas/contact.html" title="Contact">Contact</a></li>
</ul>
</div>
</body>
</html>


css menu:

body {
background: #000000;
font-family: Gill Sans MT;
background-repeat: no-repeat;
background-position: top center;
color:#FFFFFF;
background-repeat: no-repeat;
}


a {
text-decorator: none;
color: #FFFFFF;
}

table {
border-collapse: collapse;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
background-repeat:no-repeat;
}

TD {
border-color: #000000;
border-width: 1px;
background-repeat: no-repeat;
background-position: top center;}

hr {color:#000000;}

marquee {font-family:Gill Sans MT;
color:black;
font-size:36px;}

h2 {color:#900000;}

#menu {
width: 300px;
}
#menu ul {
float: right;
width: 175px;
margin: 0;
padding: 0;
list-style: none;
border-bottom: 1px solid #CC0099;
border-left: 1px solid #C8C8C8;
text-shadow: 1px 1px black;
}
#menu li {
margin: 0;
padding: 0;
position: relative;
float: left; /* voor IE */
}
#menu li a {
width: 145px; /* voor IE */
padding: 15px;
display: block;
border-top: 1px solid #CC0099;
background: #000000;
color: #FFFFFF;
white-space: nowrap;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 14px;
text-decoration: none;
}
#menu li:hover a {
background: #CC0099;
}
#menu ul ul {
width: 125px;
position: absolute;
top: 0;
right: -9999px; /* submenu's buiten beeld getrokken */
border-bottom: 1px solid #A00079;
}
#menu ul ul a {
width: 98px; /* voor IE */
font-size: 12px;
padding: 13px;
border-top: 1px solid #A00079;
border-right: 1px solid #C8C8C8;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu li:hover ul {
right: 175px; /* submenu bij hover hoofdmenu op goede plaats getrokken */
}
#menu li:hover li a:hover {
background: #E943E7;
}


ik hoop dat je hiermee voldoende weet.

groetjes

Jessy
 
mocht je nog materiaal nodig hebben, dan hoor ik dat natuurlijk graag!

gr

Jessy
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan