I want to highlight the selected menu item on my blog just like in MBT blog


#1

I have a navigation menu on my blog which contains links to label pages. The menu items are like gadgets, how to, tech news and so on. When a user clicks on say, ‘gadgets’ and load the page with posts labelled under gadgets, I want the menu item "Gadgets’ to be highlighted with a different styling. Please help me with this.


#2

For that You’ve to add an highlight class or you shall make an highlighted image using some image editor and add css for highlighting with the image.


CSS EX:- li.highlight { background-image: url(“http://Yourimageurlhere.png”) no-repeat scroll 0px 0px transparent; }


As you have a navbar then you have to use li element for menus :wink:


Well I told you to make a image yourself because you better know the style and looks of the navbar of your blog :slight_smile:

And after adding that Css you can use conditional tags <b:if> and choose when to display that highlighted CSS means if user clicks on that page then only it will display or apply that class or it wont.

Hope that you dont find it complicated and if you find it complicated then there are many quality HTML and CSS players who will help you! Goodluck! Thanx :slight_smile:


#3

Hi Nafees, thanks for the quick reply. I can customize the highlighted menu with CSS to match the looks of my navigation bar. But the problem I am facing is with assigning the ‘selected’ class to the menu item. It seems each page must have a defined class in the body to achieve this. I don’t exactly know how to do this.


#4

Hi @jacobkoshy You can create this menu using a simple logic. I will explain in detail what @Nafees meant.

You need to enclose your menu tab i.e. the li tag inside the conditional statements like this:

<b:if cond='data:blog.url == &quot;MENU-LINK&quot;'>
            <li class='highlight'>
              <a href='MENU-LINK'>
               MENU-TITLE
              </a>
            </li>
            <b:else/>
            <li>
              <a href='MENU-LINK'>
             MENU-TITLE
              </a>
            </li>
          </b:if>

In the above code replace

  • Replace MENU-TITLE With your Menu tab name
  • Replace MENU-LINK with the URL of the page you are linking

That simple. Do it for all menu links that you want. Simply keep adding the above code for any tab you want to highlight.

You can customize the Highlight class to anything you want. Keep the class name as shown below

.highlight {
-
-
- }

This the recommended way to highlight menus in blogger, jquery methods are not that effective. Let me know if you need more help :innocent:


#5

Thank you so much @Mohammad bro, successfully implemented it and working perfectly. :smile:


#6

Always a pleasure buddy, feel free to ask more questions :innocent:


#7