dropdown menu met css

Status
Niet open voor verdere reacties.
J

jebl

Gebruiker
Lid geworden
8 dec 2011
Berichten
109
Hallo helpmij'ers,

Wie zou mij willen helpen met het volgende?

Van het onderstaande menu wil ik graag een dropdown menu maken.
Na een uitgebreide zoektocht op het internet kom ik er achter dat er diverse manieren zijn om dit te doen.
Geen van deze manieren bracht voor mij de oplossing omdat ik toch te weinig kennis van CSS heb :eek:
Misschien dat iemand mij stap voor stap wil uitleggen hoe ik dit moet aanpakken?


Alvast bedankt en groet, Jebl


HTML: 
<div class="navi">
                <div class="menuleft">
                	<ul>
                		<li><a href="../index.php">Home</a></li>
               			<li><a href="../over-ons.php">Over ons</a></li>
                		<li><a href="../contact.php">Contact</a></li>
                		<li><a href="../nieuws.php">Nieuws</a></li>
                		<li><a href="../gastenboek.php">Gastenboek</a></li>
                	</ul>
                </div>
                <div class="menuright">
					<ul>
			<li><a href="#">Onze honden</a>
				<ul>
					<li><a href="#">Djima</a></li>
					<li><a href="#">Avar</a></li>
					<li><a href="#">Garry</a></li>
                    <li><a href="#">Evita</a></li>
				</ul>
			</li>
			<li><a href="#">Nesten</a>
				<ul>
					<li><a href="#">A-nest</a>
						<ul>
							<li><a href="#">Argos</a></li>
							<li><a href="#">Aragon</a></li>
							<li><a href="#">Avar</a></li>
                            <li><a href="#">Amora</a></li>
                            <li><a href="#">Ambri</a></li>
						</ul>
					</li>
                    <li><a href="#">B-nest</a>
						<ul>
							<li><a href="#">Badgio</a></li>
							<li><a href="#">Barquas</a></li>
							<li><a href="#">Baldomero</a></li>
						</ul>
					</li>
                    <li><a href="#">C-nest</a>
						<ul>
							<li><a href="#">Cidro</a></li>
							<li><a href="#">Chucho</a></li>
							<li><a href="#">Cachi</a></li>
                            <li><a href="#">Cierra</a></li>
                            <li><a href="#">Celena</a></li>
                            <li><a href="#">Charra</a></li>
                            <li><a href="#">Che</a></li>
                            <li><a href="#">Charro</a></li>
                            <li><a href="#">Chavez</a></li>
                            <li><a href="#">Carlos</a></li>
						</ul>
					</li>
                    <li><a href="#">E-nest</a>
						<ul>
							<li><a href="#">Endor</a></li>
							<li><a href="#">Eros</a></li>
							<li><a href="#">Elbro</a></li>
                            <li><a href="#">Evita</a></li>
                            <li><a href="#">Enchi</a></li>
                            <li><a href="#">Era</a></li>
                            <li><a href="#">Endra</a></li>
                            <li><a href="#">Elvy</a></li>
                            <li><a href="#">Elja</a></li>
						</ul>
					</li>
                    <li><a href="#">F-nest</a>
						<ul>
							<li><a href="#">Ferro</a></li>
							<li><a href="#">Fonz</a></li>
							<li><a href="#">Finch</a></li>
                            <li><a href="#">Fyra</a></li>
                            <li><a href="#">Fita</a></li>
                            <li><a href="#">Fay</a></li>
                            <li><a href="#">Fury</a></li>
                            <li><a href="#">Fatou</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href="#">Puppies</a></li>
			<li><a href="#">Fokplan</a></li>
            <li><a href="#">Links</a></li>
		</ul>
    </div>
</div>
 
Diverse manieren? De enige manier is gebruik maken van het :hover pseudo-element ;)

Genoeg tutorials hierover, want JavaScript heb je echt niet nodig.
 
Dat was niet de vraag, jammer dat er vaak meteen wordt verwezen naar google en tutorials.
Als ik die tutorials e.d. had begrepen was mijn vraag op dit forum overbodig geweest...... toch?
 
Laatst bewerkt:
Voor mij is dit niet zo duidelijk als voor jou denk ik.
In deze tutorials zit zoveel opmaak in de CSS dat ik door de bomen door het bos niet meer zie :(
 
Verder als onderstaand resultaat kom ik niet.
HTML: 
<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Perro de la Casa Negra</title>
	<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="navi">
				 <div class="menuleft">
                	<ul>
                		<li><a href="../index.php">Home</a></li>
               			<li><a href="../over-ons.php">Over ons</a></li>
                		<li><a href="../contact.php">Contact</a></li>
                		<li><a href="../nieuws.php">Nieuws</a></li>
                		<li><a href="../gastenboek.php">Gastenboek</a></li>
                	</ul>
                </div>
                <div class="menuright">
					<ul>
			<li><a href="/onze-honden.php">Onze honden</a>
				<ul>
					<li><a href="/djima.php">Djima</a></li>
					<li><a href="/avar.php">Avar</a></li>
					<li><a href="/garry.php">Garry</a></li>
                    <li><a href="/evita.php">Evita</a></li>
				</ul>
			</li>
			<li><a href="/nesten.php">Nesten</a>
				<ul>
					<li><a href="/a-nest.php">A-nest</a>
						<ul>
							<li><a href="/argos.php">Argos</a></li>
							<li><a href="/aragon.php">Aragon</a></li>
							<li><a href="/avar.php">Avar</a></li>
                            <li><a href="/amora.php">Amora</a></li>
                            <li><a href="/ambri.php">Ambri</a></li>
						</ul>
					</li>
                    <li><a href="/b-nest.php">B-nest</a>
						<ul>
							<li><a href="/badgio.php">Badgio</a></li>
							<li><a href="/barquas.php">Barquas</a></li>
							<li><a href="/baldomero.php">Baldomero</a></li>
						</ul>
					</li>
                    <li><a href="/c-nest.php">C-nest</a>
						<ul>
							<li><a href="#">Cidro</a></li>
							<li><a href="/chucho.php">Chucho</a></li>
							<li><a href="#">Cachi</a></li>
                            <li><a href="/cierra.php">Cierra</a></li>
                            <li><a href="/celena.php">Celena</a></li>
                            <li><a href="/charra.php">Charra</a></li>
                            <li><a href="#">Che</a></li>
                            <li><a href="#">Charro</a></li>
                            <li><a href="#">Chavez</a></li>
                            <li><a href="#">Carlos</a></li>
						</ul>
					</li>
                    <li><a href="/e-nest.php">E-nest</a>
						<ul>
							<li><a href="/endor.php">Endor</a></li>
							<li><a href="/eros.php">Eros</a></li>
							<li><a href="#">Elbro</a></li>
                            <li><a href="/evita.php">Evita</a></li>
                            <li><a href="/enchi.php">Enchi</a></li>
                            <li><a href="#">Era</a></li>
                            <li><a href="#">Endra</a></li>
                            <li><a href="#">Elvy</a></li>
                            <li><a href="#">Elja</a></li>
						</ul>
					</li>
                    <li><a href="#">F-nest</a>
						<ul>
							<li><a href="#">Ferro</a></li>
							<li><a href="#">Fonz</a></li>
							<li><a href="#">Finch</a></li>
                            <li><a href="#">Fyra</a></li>
                            <li><a href="#">Fita</a></li>
                            <li><a href="#">Fay</a></li>
                            <li><a href="#">Fury</a></li>
                            <li><a href="#">Fatou</a></li>
						</ul>
					</li>
				</ul>
			</li>
            <li><a href="/puppies.php">Puppies</a></li>
			<li><a href="/fokplan.php">Fokplan</a></li>
            <li><a href="/links.php">Links</a></li>
		</ul>
    </div>
                
</div>
</body>
</html>

HTML: 
body{background-color:#666}
a:link {
	color: #F30;
	text-decoration: none;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-shadow: 1px 1px #000;
}
a:visited {
	background-color: transparent;
	color: #A1BFDE;
	text-decoration: none;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
}
a:hover {
	background-color: #F30;
	color: #FFFFFF;
	text-decoration: none;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
a:active{
	background-color: transparent;
	color: #F30;
	text-decoration: none;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.navi {
	width: 1024px;
	margin-left: auto;
	margin-right: auto;
	height: 22px;
	border-bottom: 1px solid white;
}
.menuleft {
	width: 50%;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-align: left;
	float: left;
	z-index: 3;
	position: relative;
}
.menuleft ul {
	list-style-type: none;
	padding-left: 0px;
	padding-right: 0px;
	margin: 0;
}
.menuleft ul li {
	margin: 0 9px 0 0;
	display:inline;
}
.menuleft ul li a {
	color: #FFF;
	text-decoration: none;
	font-size: 15px;
}
.menuright {
	width: 50%;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-align: right;
	float: left;
	z-index: 3;
	position: relative;
}  
.menuright ul li a{
	color: #FFF;
}
ul
        {
	list-style: none;
	margin: 0;
        }
ul
li
        {
	position: relative;
	margin: 0;
	padding: 10;
	display: inline;
        }
li:hover
        {
	z-index: 1;
        }
ul ul

        {
	position: absolute;
	display: none;
	text-align: left;
        }
li:hover ul   
        {
	display: block;
	text-align: left;
        }
 
li:hover ul ul
        {
	display: block;
        }
 
Geen van deze manieren bracht voor mij de oplossing omdat ik toch te weinig kennis van CSS heb
Klik om te vergroten...
Wat is je kennis tot nu toe?
Begin anders bij het begin van de tutorial, en bouw later je eigen stijl erin. De kleurtjes kan je zelf toch zo ombouwen.

Ik heb het even in een JSfiddle gezet, voor het gemak.
http://jsfiddle.net/u4rh3m4x/
 
Laatst bewerkt:
De volgende site heb ik met CSS gemaakt, http://www.perrodelacasanegra.nl/

Ik zie de logica van de diverse UL's en LI's niet wat betreft het maken van een dropdown menu, daar zou ik graag wat meer uitleg over krijgen.
Wat jij doet met JSfiddle lijkt mij hetzelfde als life vieuw in dreamweaver.
 
ul is de lijst, en de li is de items in de lijst.
 
Ik kom niet verder dan onderstaande code :(
HTML: 
<!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=utf-8" />
<title>Naamloos document</title>
<link href="perro.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="navi">
				 <div class="menuleft">
                	<ul>
                		<li><a href="../index.php">Home</a></li>
               			<li><a href="../over-ons.php">Over ons</a></li>
                		<li><a href="../contact.php">Contact</a></li>
                		<li><a href="../nieuws.php">Nieuws</a></li>
                		<li><a href="../gastenboek.php">Gastenboek</a></li>
                	</ul>
                </div>
                <div class="menuright">
					<ul>
			<li><a href="/onze-honden.php">Onze honden</a>
				<ul>
					<li><a href="/djima.php">Djima</a></li>
					<li><a href="/avar.php">Avar</a></li>
					<li><a href="/garry.php">Garry</a></li>
                    <li><a href="/evita.php">Evita</a></li>
				</ul>
			</li>
			<li><a href="/nesten.php">Nesten</a>
				<ul>
					<li><a href="/a-nest.php">A-nest</a>
						<ul>
							<li><a href="/argos.php">Argos</a></li>
							<li><a href="/aragon.php">Aragon</a></li>
							<li><a href="/avar.php">Avar</a></li>
                            <li><a href="/amora.php">Amora</a></li>
                            <li><a href="/ambri.php">Ambri</a></li>
						</ul>
					</li>
                    <li><a href="/b-nest.php">B-nest</a>
						<ul>
							<li><a href="/badgio.php">Badgio</a></li>
							<li><a href="/barquas.php">Barquas</a></li>
							<li><a href="/baldomero.php">Baldomero</a></li>
						</ul>
					</li>
                    <li><a href="/c-nest.php">C-nest</a>
						<ul>
							<li><a href="#">Cidro</a></li>
							<li><a href="/chucho.php">Chucho</a></li>
							<li><a href="#">Cachi</a></li>
                            <li><a href="/cierra.php">Cierra</a></li>
                            <li><a href="/celena.php">Celena</a></li>
                            <li><a href="/charra.php">Charra</a></li>
                            <li><a href="#">Che</a></li>
                            <li><a href="#">Charro</a></li>
                            <li><a href="#">Chavez</a></li>
                            <li><a href="#">Carlos</a></li>
						</ul>
					</li>
                    <li><a href="/e-nest.php">E-nest</a>
						<ul>
							<li><a href="/endor.php">Endor</a></li>
							<li><a href="/eros.php">Eros</a></li>
							<li><a href="#">Elbro</a></li>
                            <li><a href="/evita.php">Evita</a></li>
                            <li><a href="/enchi.php">Enchi</a></li>
                            <li><a href="#">Era</a></li>
                            <li><a href="#">Endra</a></li>
                            <li><a href="#">Elvy</a></li>
                            <li><a href="#">Elja</a></li>
						</ul>
					</li>
                    <li><a href="#">F-nest</a>
						<ul>
							<li><a href="#">Ferro</a></li>
							<li><a href="#">Fonz</a></li>
							<li><a href="#">Finch</a></li>
                            <li><a href="#">Fyra</a></li>
                            <li><a href="#">Fita</a></li>
                            <li><a href="#">Fay</a></li>
                            <li><a href="#">Fury</a></li>
                            <li><a href="#">Fatou</a></li>
						</ul>
					</li>
				</ul>
			</li>
            <li><a href="/puppies.php">Puppies</a></li>
			<li><a href="/fokplan.php">Fokplan</a></li>
            <li><a href="/links.php">Links</a></li>
		</ul>
    </div>
                
</div>

</body>
</html>
HTML: 
body {
	background-color: #333;
}
.navi {
	width: 1024px;
	height: 22px;
	margin-left: auto;
	margin-right: auto;
}
.menuleft {
	width: 50%;
	float: left;

}
.menuleft ul{
	list-style-type: none;

}
.menuleft ul li{
	display: inline;
}
.menuleft ul li a{
	text-decoration: none;
	color: #FFF;
}

.menuright {
	width: 50%;
	float: left;
}
.menuright ul {
	list-style-type: none;
}

.menuright ul li{
	display: inline;

}
.menuright ul li a {
	text-decoration: none;
	color: #FFF;
}

.menuright ul ul {
	display: none;
	position: absolute;
	text-align: left;
}
.menuright li:hover ul{
	display: block;
}
.menuright li ul li ul{
	display: none;
	display: none;
	position: absolute;
	left: 100%;
}
.menuright li ul li:hover ul{
	display: block;
	position: relative;
}
 
Ik dacht dat dit een forum was om elkaar te helpen :rolleyes:
Wil je niet helpen of kun je niet helpen?
Jammer!

Wat mij betreft mag deze vraag verwijderd worden.
 
Ik help je toch met de makkelijke weg i.p.v. de moeilijke weg? Jammer dat men dat blijkbaar niet begrijpt.
Enig excuses is wel op zijn plaats, anders laat ik dit topic maar links liggen zo.

Anders kan je ook beide CSS'en naast elkaar leggen met het voorbeeld en wat jij hebt. Als de de kleuren, en de background weg haalt, heb je al een mooi 'framework' over om het makkelijk te kunnen debuggen.
 
Laatst bewerkt:
Ik heb niet naar de gemakkelijke weg gevraagd.
Misschien moet je de vraag nog eens goed lezen waarin ik om uitleg vraag.
 
Zie dan de tweede alinea, dat moet al een opstapje zijn.
 
Ook al ben ik zo'n webontwikkelaar van "heb de klok wel horen luiden maar...":D toch een opmerking vanaf de zijlijn:
Denk er aan je site "mobile friendly" te maken. Beter nu rekening mee houden dan straks je menu klaar te hebben en opnieuw te moeten beginnen. Of maak je een aparte versie voor mobile?
Twee redenen:
1) Steeds meer mensen blijken via hun mobile te surfen
2) Google weet dat en past de ranking positie aan bij het feit of je wel of niet mobile friendly bent. In elk geval wordt dat bij de zoekresultaten vermeld.
http://www.marketingfacts.nl/berichten/waarom-google-mobile-friendly-sites-voorrang-gaat-geven1
https://www.google.com/webmasters/tools/mobile-friendly/?url=http://www.perrodelacasanegra.nl/
 
Zoals ik aangaf ben ik ook geen webprogrammeur. Ik heb de links ook even bekeken. Hoewel ik ook niet alle css begrijp, vind ik de tutorial toch best wel duidelijk. Je moet er wel even rustig voor gaan zitten. Als ik nog geen werkend menu had gehad zou ik letterlijk het voorbeeld implementeren en van daaruit gaan kijken hoe ik e.e.a. moet aanpassen. Gewoon trial and error dus.
Ik zie in jouw code dat je blijkbaar twee menu's wilt. "Menulinks" en "Menurechts". Dat moet je denk ik hier oplossen:
Code: 
nav ul ul ul {
	position: absolute;[U] left[/U]/right?: 100%; top:0;
}
 
Laatst bewerkt:
Een voorbeeld om het makkelijk voor je te maken
Code: 
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Menu</title>
<link rel="stylesheet" href="perro.css">
</head>
<body>
<div class="test-container">

<div class="navi">
<div class="menuleft">
<ul class="menu">
   <li><a href="../index.php">Home</a></li>
   <li><a href="../over-ons.php">Over ons</a></li>
   <li><a href="../contact.php">Contact</a></li>
   <li><a href="../nieuws.php">Nieuws</a></li>
   <li><a href="../gastenboek.php">Gastenboek</a></li>
</ul>
</div>
<div class="menuright">
<ul class="menu">
   <li><a href="/onze-honden.php">Onze honden</a>
      <ul>
         <li><a href="/djima.php">Djima</a></li>
         <li><a href="/avar.php">Avar</a></li>
         <li><a href="/garry.php">Garry</a></li>
         <li><a href="/evita.php">Evita</a></li>
      </ul>
   </li>
   <li><a href="/nesten.php">Nesten</a>
      <ul>
         <li><a href="/a-nest.php">A-nest</a>
            <ul>
               <li><a href="/argos.php">Argos</a></li>
               <li><a href="/aragon.php">Aragon</a></li>
               <li><a href="/avar.php">Avar</a></li>
               <li><a href="/amora.php">Amora</a></li>
               <li><a href="/ambri.php">Ambri</a></li>
            </ul>
         </li>
         <li><a href="/b-nest.php">B-nest</a>
            <ul>
               <li><a href="/badgio.php">Badgio</a></li>
               <li><a href="/barquas.php">Barquas</a></li>
               <li><a href="/baldomero.php">Baldomero</a></li>
            </ul>
         </li>
         <li><a href="/c-nest.php">C-nest</a>
            <ul>
               <li><a href="#">Cidro</a></li>
               <li><a href="/chucho.php">Chucho</a></li>
               <li><a href="#">Cachi</a></li>
               <li><a href="/cierra.php">Cierra</a></li>
               <li><a href="/celena.php">Celena</a></li>
               <li><a href="/charra.php">Charra</a></li>
               <li><a href="#">Che</a></li>
               <li><a href="#">Charro</a></li>
               <li><a href="#">Chavez</a></li>
               <li><a href="#">Carlos</a></li>
            </ul>
         </li>
         <li><a href="/e-nest.php">E-nest</a>
            <ul>
               <li><a href="/endor.php">Endor</a></li>
               <li><a href="/eros.php">Eros</a></li>
               <li><a href="#">Elbro</a></li>
               <li><a href="/evita.php">Evita</a></li>
               <li><a href="/enchi.php">Enchi</a></li>
               <li><a href="#">Era</a></li>
               <li><a href="#">Endra</a></li>
               <li><a href="#">Elvy</a></li>
               <li><a href="#">Elja</a></li>
            </ul>
         </li>
         <li><a href="#">F-nest</a>
            <ul>
               <li><a href="#">Ferro</a></li>
               <li><a href="#">Fonz</a></li>
               <li><a href="#">Finch</a></li>
               <li><a href="#">Fyra</a></li>
               <li><a href="#">Fita</a></li>
               <li><a href="#">Fay</a></li>
               <li><a href="#">Fury</a></li>
               <li><a href="#">Fatou</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href="/puppies.php">Puppies</a></li>
   <li><a href="/fokplan.php">Fokplan</a></li>
   <li><a href="/links.php">Links</a></li>
</ul>
</div>
</div> <!--/.navi-->

</div> <!--/.test-container-->
</body>
</html>
en de stylesheet
Code: 
/*** 3 regels voor test ***/
html,body {min-height: 100%;}
body {margin: 0; background-color: #333;}
.test-container {padding-top: 50px;}

/*** .menu => niet wijzigen ***/
.menu,
.menu ul,
.menu li,
.menu a,
.menu span {
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent;
}
.menu,
.menu ul {
   list-style-type: none;
}
.menu {
   position: relative;
   z-index: 597;
   float: left;
}
.menu li {
   float: left;
   width: auto;
   line-height: 1.43;
   vertical-align: middle;
}
.menu li:hover {
   position: relative;
   z-index: 599;
   cursor: default;
}
.menu a,
.menu a:hover,
.menu a:focus,
.menu a:active {
   display: block;
   cursor: pointer;
   outline: 0;
   text-decoration: none;
}
.menu span {
   display: inline-block;
}
.menu ul {
   visibility: hidden;
   position: absolute;
   top: 100%;
   left: 0;
   z-index: 598;
}
.menu ul li {
   float: none;
}
.menu ul ul {
   top: 0;
   left: 100%;
}
.menu li:hover > ul {
   visibility: visible;
} /*** einde .menu ***/

/*** hieronder structuur ***/
.navi {
   width: 100%;
   max-width: 1024px;
   margin: 0 auto;
}
.menuleft,
.menuright {
   width: 50%;
   float: left;
}

/*** hieronder opmaak ***/
.menuleft,
.menuright {
   background: #999;
}
.menu li,
.menu a {
   font: normal 14px arial, sans-serif;
   text-align: left;
}
.menu li {
   background-color: #999;
}
.menu a {
   padding: 3px 15px;
   color: #fff;
}
.menu ul li { /*submenu*/
   min-width: 90px;
}

/*** hieronder mouse ***/
.menu li:hover,
.menu li:focus {
   background-color: #666;
}
.menu li:hover > a,
.menu li:focus > a {
   color: #bbb;
}

Wil je weten wat iets doet?
html ref en css ref

Suc6. Have fun.
 
als je de nav ul een andere margin top geeft scheelt al veel en ook de ul li a, dus zo aanpassen:

Code: 
nav ul {
    display: inline-table;
    list-style: outside none none;
    margin-top: 1px;
    padding: 0;
    position: relative;
    z-index: 2;
}

en

Code: 
.menuleft ul li a {
    color: #fff;
    font-size: 15px;
    margin-top: 2px;
    text-decoration: none;
}
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan