create current menu css dynamically

Problem: Highlighting the current page menu button (Or link) with different CSS style.

Static Solution: Assigning each page its own menu with an extra “.current” class for the current page menu button to display the highlighting effect on it.

Static Solution Problem: If your site has more than 10 pages then it becomes very difficult to update your site as each menu page contains its own menu. So you will have to update all of them individually. You will be encountered with more problems if you wish to include your menu inside a template.

Dynamic Solution: First detect the current page URL for your website and then place a “.current” class dynamically to the menu bar link (or button) which point to the same detected URL.

I am not going to take a class on this as I know you would only want to see how it works and it will be great if you can have a fully functional example of this, rather than a tedious coding tutorial.

So here I am giving you all the files related to this example. To download it, click on the download link below.

Download: Dynamic CSS Menu

Check for yourself and enjoy!

Latest posts by Soumyajit Dutta

  • Share/Bookmark