Hulp bij LI

    • Hulp bij LI

      Beste,

      Ik heb een scriptje gevonden op het internet om de class van je pagina (active) bij elke actieve pagina te laten hoveren.
      Echter werkt dit scriptje nu op de A class maar ik wil dat hij op de li class gaat werken.
      Hoe kan ik hier nu voor zorgen zie het scriptje hier beneden:

      PHP Source Code

      1. <?php
      2. function active($currect_page){
      3. $url_array = explode('/', $_SERVER['REQUEST_URI']) ;
      4. $url = end($url_array);
      5. if($currect_page == $url){
      6. echo 'active'; //class name in css
      7. }
      8. }
      9. ?>
      12. <div id='cssmenu'>
      14. <ul>
      15. <li><a class="<?php active('shared-hosting.php');?>" href="shared-hosting.php">SHARED HOSTING</a></li>
      16. <li><a class="<?php active('reseller-hosting.php');?>" href="reseller-hosting.php">RESELLER HOSTING</a></li>
      17. <li><a class="<?php active('wordpress-hosting.php');?>" href="wordpress-hosting.php">WORDPRESS HOSTING</a></li>
      18. </ul>
      20. </div>
      Laat alles zien

    • Is dit niet meer een CSS aangelegenheid?

      Als je wilt dat er iets gebeurt met de li op het moment dat je over de a hovered, zou dat dan niet een stijlregel zijn in de vorm van:
      #cssmenu li a:hover { /* hier de CSS */ }

      Proof of concept:

      PHP Source Code

      1. <?php
      2. /*
      3. https://www.ictscripters.com/Thread/24570-Hulp-bij-LI
      4. */
      5. ?>
      6. <!DOCTYPE html>
      7. <html>
      8. <head>
      9. <title>CSS test</title>
      10. <style type="text/css">
      11. * { color: #000000; font-family: sans-serif; font-size: 10pt; }
      12. #menu { height: 25px; line-height: 25px; }
      13. #menu ul { list-style-type: none; margin: 0; padding: 0; }
      14. #menu ul li { display: inline-block; float: left; background-color: #ffcccc; }
      15. #menu ul li a { display: block; text-decoration: none; text-align: center; padding: 0 15px; min-width: 75px; }
      16. #menu ul li a:hover { background-color: #ffaaaa; }
      17. </style>
      18. </head>
      20. <body>
      21. <div id="menu">
      22. <ul>
      23. <li><a href="#">een</a></li>
      24. <li><a href="#">twee</a></li>
      25. <li><a href="#">een hele lange titel asdf asdf</a></li>
      26. </ul>
      27. </div>
      28. </body>
      29. </html>
      Laat alles zien
      Ook zou je kunnen gaan nadenken om een soort van siteboom te maken van alle pagina's, je pagina's SEO-vriendelijke(re) namen geven. Vervolgens heb je dan waarschijnlijk ook een lijst van (zichtbare) pagina's en de actieve pagina zodat je de bovenstaande lijst kunt genereren met een simpele foreach-lus.

      Een check voor het toevoegen van een class voor de actieve pagina doe je dan terloops.

      EDIT: en ja, het zou dus logischer zijn om de actieve li te stylen.

      Post werd 1x aangepast, het laatst door FangorN ().