Highlight Current/Active Menu Using JQuery or Javascript

I recently wanted to convert the very basic menu on my Blogger site, to one that supported drop down menus. This was surprisingly easy to do due to the flexibility of Blogger and its built in customisation tools. Where it got tricky was highlighting the currently active menu item, but thanks to a good friend of mine Olie Mason, it was short work using JQuery. To see how it works, take a look at the menu items in this blog.

The step-by-step instructions provided below detail how to implement this in your Blogger blog, however the code examples provided should work elsewhere. The menu uses either JQuery or JavaScript to highlight the currently active page, otherwise the it is pure HTML and CSS, supporting 3 levels deep.

Download the standalone html version:

JQuery

Using JQuery is a more elegant solution and requires far less code than the JavaScript equivalent. Open the HTML editor located under “Template” -> “Edit HTML”, and find the <head> tag. We will be inserting our script above this line.

 

Because we are using JQuery you will need to reference an online library if you haven’t already. I am using the following:

 

Next add the JQuery script:

 

Here’s what it looks like:

JavaScript

If you prefer JavaScript or do not want to reference the JQuery library, use the following script instead:

 

Here’s what it looks like:

 

CSS

Now we need to add some custom CSS to style the menu. You do this from “Template” -> “Customise” -> “Advanced” -> “Add CSS”. The below snippet should work for you, however you may need to customise to suit your page:

CSS Styles:

 

HTML

Lastly we need to add an HTML module to the navigation area in the template. From “Layout” settings, add a new gadget to the area you want the menu to be displayed. You may need to remove the default one before you can add your new one, just select “Edit” then “Remove” if that’s the case.

Select “Add a Gadget” and select “HTML/JavaScript”:

Leave “Title” empty, and paste the following code snippet in the “Content” box:

HTML Code:

 

Andrew Morpeth
Andrew Morpethhttps://ucgeek.co/author/amorpeth/
Andrew is a Modern Workplace Consultant specialising in Microsoft technologies based in Auckland, New Zealand; Andrew is a Director and Professional Services Manager at Lucidity Cloud Services and a Microsoft MVP.

Related Articles

NZ to get native Microsoft Teams calling

New Zealand (NZ) is set to get native Microsoft Teams calling by July 2021 - this feature allows you to replace your telephony solution with Microsoft Teams. Microsoft Teams calling for NZ further reduces the barrier to using Microsoft Teams as a telephony replacement solution for New Zealand businesses.

Microsoft Teams Calling Options for Telephony Replacement

Microsoft Teams Calling provides telephony replacement capability that could replace your PABX or any other solution you may have. This article takes you through the options and when to use them, and the licencing you will require to activate this feature for your users.
00:13:43

Skype for Business Response Groups Made Easy

Call Flow Manager for Skype for Business and Lync makes creating and managing Response Groups easy! No more bouncing between interfaces to configure a simple call flow. Call Flow Manager brings all the functionality of the Response Group service into a single user interface

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Andrew Morpeth
Andrew Morpethhttps://ucgeek.co/author/amorpeth/
Andrew is a Modern Workplace Consultant specialising in Microsoft technologies based in Auckland, New Zealand; Andrew is a Director and Professional Services Manager at Lucidity Cloud Services and a Microsoft MVP.

Latest Articles

NZ to get native Microsoft Teams calling

New Zealand (NZ) is set to get native Microsoft Teams calling by July 2021 - this feature allows you to replace your telephony solution with Microsoft Teams. Microsoft Teams calling for NZ further reduces the barrier to using Microsoft Teams as a telephony replacement solution for New Zealand businesses.

Microsoft Teams Calling Options for Telephony Replacement

Microsoft Teams Calling provides telephony replacement capability that could replace your PABX or any other solution you may have. This article takes you through the options and when to use them, and the licencing you will require to activate this feature for your users.
00:13:43

Skype for Business Response Groups Made Easy

Call Flow Manager for Skype for Business and Lync makes creating and managing Response Groups easy! No more bouncing between interfaces to configure a simple call flow. Call Flow Manager brings all the functionality of the Response Group service into a single user interface
00:13:30

Office 365 Backup with Synology NAS

There are many reasons that you may want to back up your Office 365 data. The most common reasons I see are data sovereignty...

Microsoft 365 Feature Roundup Dec 2020

Feature Roundup Presentation Microsoft 365 key feature releases and announcements for June to December 2020, in an easy to digest PowerPoint format.