Highlight specific Menu-Item via CSS possible?

**Coltane** · 04-05-2012 06:44 AM

Hi,

I want to highlight a single menu-item in my sidebar when there's a campaign.
The menu is generated dynamically and this cannot be solved on this level, so I am wondering, if I can select and highlight via CSS by name of the menu-entry ('Membership').

Any ideas?

I cannot change the menu generation-code, else I would assign an ID and highlight this via CSS.

Can I include a CSS path to find any menu-entry with the name 'Memership' and highlight it? Is this possible?

I also want to highlight the current selected menu item in the menu dynamically, too.

HTML Code:

#navi #menue .current-menu-item > a,
#navi #menue .current-menu-ancestor > a,
#navi #menue .current_page_item > a,
#navi  #menue .current_page_ancestor > a,
#Rahmen #Navigation .current-menu-item > a,
#Rahmen #Navigation .current-menu-ancestor > a,
#Rahmen #Navigation .current_page_item > a,
#Rahmen #Navigation .current_page_ancestor > a {
  font-weight: bold;
  color: yellow;
}

HTML Code:

<div id="navi">
  <ul id="menue">
   <li class="document"><a class="" href="/index.php?tpl=page&id=18&lng=en">Home</a></li>
   <li class="folder"><a class="" href="/index.php?tpl=page&id=19&lng=en">Medicine ↘</a>    <ul style="display:none;">   <li class="document"><a class="" href="/index.php?tpl=page&id=21&lng=en">Medical Uses</a></li>
   <li class="document"><a class="" href="/index.php?tpl=page&id=35&lng=en">Side effects</a></li>
   <li class="document"><a class="" href="/index.php?tpl=studylist&id=36&lng=en">Studies and Case Reports</a></li>
    </ul>
  </li>   <li class="folder"><a class="" href="/index.php?tpl=page&id=37&lng=en">Science ↘</a>    <ul style="display:none;">   <li class="document"><a class="" href="/index.php?tpl=deflist&id=38&lng=en">Definitions</a></li>
   <li class="document"><a class="" href="/index.php?tpl=page&id=39&lng=en">List of Clinical Studies</a></li>
   <li><a class=""  href="/studies/study.php">Database of Clinical Studies</a></li>
   <li class="document"><a class="" href="/index.php?tpl=page&id=244&lng=en">Review on Clinical Studies 2005-2009</a></li>
    </ul>
  </li>   <li class="folder"><a class="" href="/index.php?tpl=page&id=41&lng=en">Laws and Politics ↘</a>    <ul style="display:none;">   <li class="document"><a class="" href="/index.php?tpl=page&id=236&lng=en">Overview English</a></li>
   <li class="document"><a class="" href="/index.php?tpl=page&id=245&lng=en">Canada</a></li>
   <li class="document"><a class="" href="/index.php?tpl=page&id=42&lng=en">Finland</a></li>
   <li class="document"><a class="" href="/index.php?tpl=page&id=43&lng=en">France</a></li>
   <li class="document"><a class="" href="/index.php?tpl=page&id=44&lng=en">Germany / Deutschland</a></li>
   <li class="document"><a class="" href="/index.php?tpl=page&id=45&lng=en">Israel</a></li>
   <li class="document"><a class="" href="/index.php?tpl=page&id=46&lng=en">New Zealand</a></li>
   <li class="document"><a class="" href="/index.php?tpl=page&id=47&lng=en">Spain / España</a></li>
   <li class="document"><a class="" href="/index.php?tpl=page&id=48&lng=en">Sweden</a></li>
   <li class="document"><a class="" href="/index.php?tpl=page&id=235&lng=en">The Netherlands / Nederland</a></li>
   <li class="document"><a class="" href="/index.php?tpl=page&id=234&lng=en">UK</a></li>
   <li class="document"><a class="" href="/index.php?tpl=page&id=49&lng=en">United States of America</a></li>
   <li class="document"><a class="" href="/index.php?tpl=page&id=246&lng=en">Übersicht deutsch</a></li>
    </ul>
  </li>   <li class="folder"><a class="" href="/index.php?tpl=page&id=50&lng=en">Archive ↘</a>    <ul style="display:none;">   <li><a class=""  href="/english/bulletin/bulletin.php">Bulletin</a></li>
    </ul>
  </li>   <li class="document"><a class="" href="/index.php?tpl=faqlist&id=53&lng=en">FAQ</a></li>
   <li class="document"><a class="" href="/index.php?tpl=ukpage&id=252&lng=en">UK</a></li>
   <li class="document"><a class="" href="/index.php?tpl=page&id=69&lng=en">Links</a></li>
   <li class="folder"><a class="" href="/index.php?tpl=page&id=72&lng=en">About us ↘</a>    <ul style="display:none;">   <li class="document"><a class="" href="/index.php?tpl=page&id=73&lng=en">Introduction</a></li>
   <li class="document"><a class="" href="/index.php?tpl=page&id=74&lng=en">Board of Directors</a></li>
   <li class="document"><a class="" href="/index.php?tpl=page&id=75&lng=en">Statutes</a></li>
    </ul>
  </li>   <li class="document"><a class="a" href="/index.php?tpl=page&id=76&lng=en">Membership</a></li>
   <li class="document"><a class="" href="/index.php?tpl=page&id=77&lng=en">Imprint</a></li>
  </ul>
</div>

<div id="Rahmen">
		<ul id="Navigation">
   <li><a class="" href="/index.php?tpl=page&id=1&lng=en">Newsletter</a>    <ul>   <li><a class=""  href="/english/bulletin/bulletin.php">Bulletin</a></li>
   <li><a class=""  href="/english/subscribe.htm" target="_blank">Subscribe &#x21a6;</a></li>
    </ul>
   <li><a class="" href="/index.php?tpl=page&id=7&lng=en">About the Journal</a></li>
   <li><a class="" href="/index.php?tpl=page&id=8&lng=en">For Authors</a></li>
   <li><a class="" href="/index.php?tpl=journallist&id=9&lng=en">Journals</a></li>
    </ul>
  </li>   <li><a class="" href="/index.php?tpl=page&id=10&lng=en">Conference</a>    <ul>   <li><a class=""  href="http://www.conference.com/" target="_blank">2011 &#x21a6;</a></li>
   <li><a class="" href="/index.php?tpl=archivlist&id=12&lng=en">Former</a></li>
    		</ul><li><a href="#">Language</a>
    			<ul>
    				<li><a href="/index.php?lng=en">English</a></li>
    				<li><a href="/index.php?lng=de">Deutsch</a></li>
    				<li><a href="/index.php?lng=fr">Fran&ccedil;ais</a></li>
    				<li><a href="/index.php?lng=nl">Nederlands</a></li>
    				<li><a href="/index.php?lng=es">Espa&ntilde;ol</a></li>
    				<li><a href="/index.php?lng=po">Portugu&ecirc;s</a></li>

    			</ul>
    		</li>	
  </ul>

It does not work.

**rtrethewey** · 04-05-2012 11:27 AM

If you can generate the CSS file dynamically, you might be able to use an attribute selector to highlight the current page with something like:

Code:

a[href$="tpl=page&id=246&lng=en"] { font-weight:bold; color:yellow; !important; }

and dynamically insert the value for the 'href' based on the current page.

**Coltane** · 04-06-2012 04:20 AM

found it, the

Code:

 "href^="

is used for common prefix-matching.

For others:

Code:

$(document).ready( function() {
  $('[href^="/index.php?tpl=page&id=76&"]').css({'color': 'yellow', 'font-weight': 'bold'}); /* All 'Membership'-links. */
  $('[href^="/index.php?tpl=page&id=1&"]').css({'color': 'yellow', 'font-weight': 'bold'}); /* All 'Newsletter'-links. */

  $('a[Rundbrief]').css("color", "yellow"); /* German special case. */
//  '<a class="" href="#">Rundbrief</a>'

});  // end document.ready()

Now I have two questions left:

How can I select this link by it's displayed linkname?

Code:

<div id="Rahmen">
  <ul id="Navigation">
    <li><a class=""  href="#">Rundbrief</a>

This does not work:

Code:

  $('a[Rundbrief]').css("color", "yellow"); /* German special case. */

and the issue to display the currently opened menu-item via CSS only (or also via jQuery)

Code:

#navi #menue .current-menu-item > a,
#navi #menue .current-menu-ancestor > a,
#navi #menue .current_page_item > a,
#navi  #menue .current_page_ancestor > a,
#Rahmen #Navigation .current-menu-item > a,
#Rahmen #Navigation .current-menu-ancestor > a,
#Rahmen #Navigation .current_page_item > a,
#Rahmen #Navigation .current_page_ancestor > a {
  font-weight: bold;
  color: yellow;
}

This does not work yet.

**rtrethewey** · 04-06-2012 01:03 PM

Your code:

Code:

$(document).ready( function() {
  $('[href^="/index.php?tpl=page&id=76&"]').css({'color': 'yellow', 'font-weight': 'bold'}); /* All 'Membership'-links. */
  $('[href^="/index.php?tpl=page&id=1&"]').css({'color': 'yellow', 'font-weight': 'bold'}); /* All 'Newsletter'-links. */

  $('a[Rundbrief]').css("color", "yellow"); /* German special case. */
//  '<a class="" href="#">Rundbrief</a>'

});  // end document.ready()

is doing in jQuery is doing the same thing I suggested in pure CSS. That is, you could just use:

Code:

a[href^="/index.php?tpl=page&id=76&"] { font-weight:bold; color:yellow; !important; }
a[href^="/index.php?tpl=page&id=1&"] { font-weight:bold; color:yellow; !important; }

and not rely on JavaScript at all.

Changing the style of a link based on its content would require JavaScript. The only way I know to do it would be something like:

Code:

 links = document.getElementsByTagName('a');
  for (i=0; i<links.length; i++) {
   if (links[i].innerHTML == 'Rundbrief') {
     links[i].style.color = 'yellow';
     links[i].style.fontWeight = 'bold';
     break;
   } // endif
  } // end for i

jQuery probably has a more compact method of doing this, but it should give you a start.

**Coltane** · 04-08-2012 09:14 AM

is doing in jQuery is doing the same thing I suggested in pure CSS.

great idea, I thought it was jQuery Sizzle-synthax, but CSS-selectors are even better. Strange thing, I cannot make them work. The CSS-code does nothing on my site.

The Rundbrief-problem I solved with your Javascript function, as there are several more '#'-links, so all would turn up bold and yellow.
Later a redesign of the HTML and the CSS is planned.

Thank you for the support!

For reference: I also posted here and interlink the threads:
http://www.codingforums.com/showthread.php?t=254101

Thread: Highlight specific Menu-Item via CSS possible?

Thread Tools

Display

Highlight specific Menu-Item via CSS possible?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions