SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    Lancaster,UK
    Posts
    32
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How to highlight appropriate menu list item of current page? In drop-down too.

    Hi there,
    I have been trying to figure this one out for over an hour but couldn't. My code works when you highlight a top menu item such as 'Viesnage' but there is also a drop-down menu. When a page from drop-down menu is opened which is a sub-category, I want to highlight an appropriate category. So let's say when I press on 'Hostels', I want 'Viesnage' to be highlighted.

    I have a menu which looks like this:
    HTML Code:
    		<ul class="mainNav">			
    			<li class="tab"><a href="http://kurvarom.local/vietos/viesnage" class="tabAnchor">Viesnage</a></a>
    				<div class="dropdown">
    					<div class="col">
    						<ul>
    							<li><a href="http://kurvarom.local/vietos/viesnage/viesbuciai">Viesbuciai</a></li>
    							<li><a href="http://kurvarom.local/vietos/viesnage/hosteliai">Hosteliai</a></li>
    						</ul>	
    					</div>
    				</div>
    			</li>
    		</ul>
    I use such jQuery to highlight list items:
    Code:
    	var str=location.href.toLowerCase();
    
    $(".mainNav li a").each(function() {
    	if (str.indexOf(this.href.toLowerCase()) > -1) {
    		$("li a.current").removeClass("current");
    		$(this).addClass("current");
    		$(this).parents("a.tabAnchor").addClass("current"); // I EXPECTED THIS TO WORK BUT IT DOES NOT
    	}
    });

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Could you post a link to a page where I can see your menu in action?

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    Lancaster,UK
    Posts
    32
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you for helping me out The website is www.beta.kurvarom.lt

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    The page's mark-up is invalid.
    With particular reference to the menu, you have things like:

    Code:
    <li class="tab"><a href="http://www.beta.kurvarom.lt/vietos/kultura" class="tabAnchor">Kultūra</a></a>
    Notice the double </a>.
    You need to fix this first (definitely the menu, preferably the page).

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    Lancaster,UK
    Posts
    32
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The mark-up is not mine and I did not pay too much attention to it and didn't even notice double </a>, thank you. I will first fix the mark-up, I will then post to this thread again.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •