login  Naam:   Wachtwoord: 
Registreer je!
 Forum

menu met css

Offline webmaker - 27/07/2006 16:18
Avatar van webmakerPHP interesse Ik wil een menu als je erover gaat dat je een volle aanstipping krijgt vb:
http://www.guldenanker.be/
deze website menu rechts weet iemand hoe je dat kan.

10 antwoorden

Gesponsorde links
Offline marten - 27/07/2006 16:19
Avatar van marten Beheerder met rollover buttons 
Zoek maar eens op google
Offline webmaker - 27/07/2006 16:21
Avatar van webmaker PHP interesse Hoe maak je dat?:s
Offline marten - 27/07/2006 16:22
Avatar van marten Beheerder Google --> zoeken op ---> rollover knop maken
Offline Nrzonline - 27/07/2006 16:24 (laatste wijziging 27/07/2006 16:32)
Avatar van Nrzonline PHP ver gevorderde Dat is vrij simpel, je maakt 2 buttons...
één is standaard, en één als roll-over.
tussen je <head></head>:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/JavaScript">
  2. <!--
  3. function MM_swapImgRestore() { //v3.0
  4.   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  5. }
  6.  
  7. function MM_preloadImages() { //v3.0
  8.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  9.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  10.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  11. }
  12.  
  13. function MM_findObj(n, d) { //v4.01
  14.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  15.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  16.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  17.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  18.   if(!x && d.getElementById) x=d.getElementById(n); return x;
  19. }
  20.  
  21. function MM_swapImage() { //v3.0
  22.   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  23.    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  24. }
  25. //-->
  26. </script>


Nu vervang je <body> door:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <body onload="MM_preloadImages('images/button_rollover.gif')">


En nu tussen je <body onload="......"> en </body>
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="#link" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Rollover Image','','images/button_rollover.gif',1)"><img src="images/button_normaal.gif" alt="Alternatief" name="Rollover Image" border="0" id="Rollover Image" /></a>


*edit*
In coding programma's zoals Dreamweaver zit dit voorgebouwd,
en kan je het via het programma zelf deze elementen heel
gemakkelijk inbouwen. Trial van Dreamweaver kan je downloaden
op adobe.com
Offline Grayen - 27/07/2006 16:33 (laatste wijziging 27/07/2006 16:57)
Avatar van Grayen PHP ver gevorderde of zoals je vroeg met css:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. ul {
  2. margin: 0;
  3. padding: 0;
  4. list-style: none;
  5. }
  6. li {
  7. margin-right: 5px; /* ruimte tussen de afbeeldingen */ 
  8. display: inline;
  9. }
  10. li a{
  11. padding-right: 150px; /* breedte van de afbeelding */
  12. background: url(images/menu/menu.jpg) no-repeat; /* afbeelding normaal */
  13. }
  14. li a:hover{
  15. background: url(images/menu/menu2.jpg) no-repeat; /* afbeelding bij mouse over */
  16. }


de html:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <ul>
  2. <li><a href="#">&nbsp;</a></li>
  3. <li><a href="#">&nbsp;</a></li>
  4. <li><a href="#">&nbsp;</a></li>
  5. <li><a href="#">&nbsp;</a></li>
  6. </ul>


edit: het woordje rechts niet gezien ik had het voor het linker menu gemaakt
Offline webmaker - 27/07/2006 16:48 (laatste wijziging 27/07/2006 16:51)
Avatar van webmaker PHP interesse bedankt, maar zoals op http://www.guldenanker.be/
gebruiken ze geen afbeeldingen, hoe kun je dat zonder afbeeldingen.:cool:
Offline Nrzonline - 27/07/2006 17:00 (laatste wijziging 27/07/2006 17:00)
Avatar van Nrzonline PHP ver gevorderde ipv images gebruiken zij een achtergrond, soort gelijk maar dan
net iets anders =) Hoe dat met achtergronden ging weet ik niet
echt aangezien ik dat nog nooit heb gedaan. Maarja, ook daar is
vast wel een tutorial over te vinden...
Offline Pieter - 27/07/2006 17:08
Avatar van Pieter Gouden medaille

SEO guru		 De beste manier is om zelf de broncode van die site gewoon eens te bekijken...
Offline Grayen - 27/07/2006 18:55 (laatste wijziging 27/07/2006 19:03)
Avatar van Grayen PHP ver gevorderde ik heb zelf een script in elkaar lopen zetten met css en het werkt goed 

de css:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. body {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. ul {
  6. margin: 0;
  7. padding: 0;
  8. list-style: none;
  9. clear: both;
  10. }
  11. li {
  12. margin-right: 0px; /* ruimte tussen de afbeeldingen */
  13. display: inline;
  14. }
  15. li a{
  16. float: left;
  17. display: block;
  18. height: 40px; /* hoogte afbeeldingen */
  19. width: 151px; /* breedte afbeeldingen */
  20. text-decoration: none;
  21. }
  22. #image1 a{
  23. background: url(images/menu/menu.jpg) no-repeat; /* afbeelding normaal */
  24. }
  25. #image1 a:hover{
  26. background: url(images/menu/menu2.jpg) no-repeat; /* afbeelding bij mouse over */
  27. }
  28. #image2 a{
  29. background: url(images/menu/menu3.jpg) no-repeat; /* afbeelding normaal */
  30. }
  31. #image2 a:hover{
  32. background: url(images/menu/menu4.jpg) no-repeat; /* afbeelding bij mouse over */
  33. }


de html:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <ul>
  2. <li id="image1"><a href="#">&nbsp;</a></li>
  3. <li id="image2"><a href="#">&nbsp;</a></li>
  4. </ul>


die van mijn andere post was flut, maar deze daarintegen in precies zoals op die site maar dan op een andere manier 

edit: kleine verbetering
Offline Maarten - 27/07/2006 19:05
Avatar van Maarten Erelid Je kan de achtergrondkleur van een elemnt veranderen met document.getElementById('elementID').style.bgColor = 'kleur'

Nu moet je toch al in staat zijn om zo'n menu in elkaar te flansen 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.232s