login  Naam:   Wachtwoord: 
Registreer je!
 Forum

CSS3 Dropdown menu

Offline GroundZero - 23/10/2011 19:59
Avatar van GroundZeroLid Beste,

ik genereer mijn menu met de volgende code:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. function displayMenu()
  2. {
  3. 	// start lijst
  4. 	echo '<ul>';
  5.  
  6. 	// aanroep doen
  7. 	$aanroep = mysql_query('SELECT id, naam, seo_naam, omschrijving FROM shop_categorien
  8. 							ORDER BY naam DESC');
  9.  
  10. 	// verwerken in een lus
  11. 	while($verwerk = mysql_fetch_assoc($aanroep))
  12. 	{
  13. 		echo '<li><p>'.$verwerk['naam'].'</p></li>';
  14.  
  15. 		// subcategorieën in hun eigen lijst binnen deze lijst weergeven
  16. 		$data = mysql_query('SELECT naam, seo_naam, omschrijving FROM shop_subcategorien
  17. 							 WHERE
  18. 							 hoofdcategorie_id = "'.mysql_real_escape_string($verwerk['id']).'"
  19. 							 ORDER BY naam DESC');
  20. 		echo '<ul>';
  21.  
  22. 		while($fetch = mysql_fetch_assoc($data))
  23. 		{
  24. 			echo '<li>'.$fetch['naam'].'</li>';
  25. 		}
  26.  
  27. 		echo '</ul>';
  28. 	}
  29.  
  30. 	// lijst eindigen
  31. 	echo '</ul>';
  32. }


Echter krijg ik het nu niet voor elkaar qua CSS. Zou iemand voor mij een kort voorbeeldje kunnen maken of wat tips geven over hoe ik het nu moet aanpakken? ik wil dus graag dat wanneer ik over het menu ga met mijn muis, dat hij er onder uit klapt en de overige opties laat zien.

Groetjes

8 antwoorden

Gesponsorde links
Offline WouterJ - 23/10/2011 20:27
Avatar van WouterJ HTML gevorderde Zie o.a. deze tutorial: http://sceneone.nl/tips_tricks/drop_down_menu.php

Even googlen op css dropdown menu en je krijg miljoenen resultaten.
Offline Pieter - 25/10/2011 07:42
Avatar van Pieter Gouden medaille

SEO guru		 Begin altijd eerst met de html/css, vervolgens voeg je er dynamiek aan toe met php. Het is immers te lastig debuggen als er iets fout gaat. Wat voor output heb je nu?

Het script van Waldio is een goede start. Je kan ook even zoeken naar een Suckerfish menu indien je dat beter ligt.
Offline GroundZero - 25/10/2011 11:36
Avatar van GroundZero Lid Dankjewel voor je antwoord 
Probleem is dat ik een mega menu dropdown wil. (Heb nu dus een ander idee omdat dit makkelijker is voor wat ik wil bereiken).

Ik wil dus wanneer je op een optie staat met je muis (hover) dat de DIV zichtbaar word. De div kan ik dan vullen met wat ik dan ook maar wil hebben (zelf).

Krijg het echter niet voor elkaar de div te laten verschijnen.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Mega Dropdown</title>
  6.  
  7. <style type="text/css">
  8. #container {
  9. 	width:1024px;
  10. 	height:50px;
  11. 	margin:50px auto;
  12. 	background:#CCC;
  13. 	position:relative;
  14. }
  15.  
  16. #container ul {
  17. 	list-style:none;	
  18. }
  19.  
  20. #container li {
  21. 	display:inline-block;
  22. 	float:left;
  23. 	padding:10px;
  24. }
  25.  
  26. #container #products {
  27. 	width:600px;
  28. 	height:250px;
  29. 	position:relative;
  30. 	top:0px;
  31. 	left:0px;
  32. 	background:#999;
  33. 	display:none;
  34. }
  35.  
  36. #container #products-link:hover #products {
  37. 	display:block;
  38. }
  39. </style>
  40.  
  41. </head>
  42.  
  43. <body>
  44.  
  45. <div id="container">
  46.     <ul>
  47. 		<li><a href="#" title="Home">HOME</a></li>
  48.         <li><a href="#" title="Home">ABOUT</a></li>
  49.         <li>
  50.         	<a href="#" title="Home" id="products-link">PRODUCTS</a>
  51.             <div id="products">
  52.             	<p>optie 1</p>
  53.                 <p>optie 2</p>
  54.                 <p>optie 3</p>
  55.             </div>
  56.         </li>
  57.     </ul>
  58. </div>
  59.  
  60. </body>
  61. </html>
Offline larssy1 - 25/10/2011 13:02 (laatste wijziging 25/10/2011 13:02)
Avatar van larssy1 MySQL beginner Ik zie nergens dit terug komen

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .products {
  2. 	display:none;
  3. }
  4. .products a {
  5. 	display:block;
  6. }
Offline GroundZero - 25/10/2011 13:04
Avatar van GroundZero Lid
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #container #products {
  2. width:600px;
  3. height:250px;
  4. position:relative;
  5. top:0px;
  6. left:0px;
  7. background:#999;
  8. display:none;
  9. }
  10.  
  11. #container #products-link:hover #products {
  12. display:block;
  13. }


toch? 
Offline larssy1 - 25/10/2011 13:33
Avatar van larssy1 MySQL beginner oh, dat ik daar overheen heb gelezen..

hopelijk word je hier wijzer uit.
http://webdesig...pdown-menu
Offline GroundZero - 25/10/2011 13:51
Avatar van GroundZero Lid Thanks! gaan we even naar kijken!
Offline FrankieC - 29/10/2011 20:15 (laatste wijziging 29/10/2011 20:20)
Avatar van FrankieC Lid
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <li>
  2.     <a href="#" title="Home" id="products-link">PRODUCTS</a>
  3.     <div id="products">
  4.         <p>optie 1</p>
  5.         <p>optie 2</p>
  6.         <p>optie 3</p>
  7.     </div>
  8. </li>
  9.  
  10. (...)
  11.  
  12. #container #products-link:hover #products {
  13.     display:block;
  14. }

Daarmee zul je geen hovereffect krijgen, in ieder geval niet in alle browsers. De <a href> en de <div> zijn wel kinderen van <li>, maar <div> is geen kind van <a href> doch een broertje ervan. CSS-hovereffecten krijg je alleen op ouder-kindcombinaties.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.215s