Actieve menu items door middel van jQuery

20-02-2014

Soms heeft een automatisch gegenereerd menu geen aparte css class voor het actieve menu item. Het topmenu in eerdere versies van Prestashop heeft daar bijvoorbeeld last van.
Dit is vrij simpel op te lossen door gebruik te maken van een paar regels jquery:

<script type="text/javascript">
  jQuery(document).ready(function($){
  // Verkrijg de huidige url
  var url = window.location.href;
  // Zoek de menuitem waarvan de url gelijk is aan de huidige url
  // en geef de parent een actieve class
  $('#nav li a[href="'+url+'"]').parent().addClass('current_page_item');
  });
</script>

Dit trucje werkt overigens alleen als de menu items absolute urls hebben.

Specialisme

HTML5, CSS3, PHP, MySQL, JavaScript & Jquery, React, Responsive Design, SEO (zoekmachine optimalisatie), Social Media Marketing, webrichtlijnen

CMS / E-commerce

WordPress, TYPO3, Joomla, ProcessWire, Prestashop, WooCommerce, OpenCart, Virtuemart, osCommerce

Frameworks

Laravel, CakePHP, Extbase & Fluid (TYPO3), Twitter Bootstrap, Foundation Framework

Contact

Paulusland 9
1679GV Midwoud
(gemeente Medemblik)

E-mail: info@bartsalle.nl
Tel. : 06-43126237
KvK: 34252794

© 2022 Bart Sallé