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. ?>
      10. <div id='cssmenu'>
      11. <ul>
      12. <li><a class="<?php active('shared-hosting.php');?>" href="shared-hosting.php">SHARED HOSTING</a></li>
      13. <li><a class="<?php active('reseller-hosting.php');?>" href="reseller-hosting.php">RESELLER HOSTING</a></li>
      14. <li><a class="<?php active('wordpress-hosting.php');?>" href="wordpress-hosting.php">WORDPRESS HOSTING</a></li>
      15. </ul>
      16. </div>
      Display All
    • 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>
      19. <body>
      20. <div id="menu">
      21. <ul>
      22. <li><a href="#">een</a></li>
      23. <li><a href="#">twee</a></li>
      24. <li><a href="#">een hele lange titel asdf asdf</a></li>
      25. </ul>
      26. </div>
      27. </body>
      28. </html>
      Display All
      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.

      The post was edited 1 time, last by FangorN ().