Highlight specific Menu-Item possible?

Transformer · 03-14-2012, 06:13 PM

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?

Transformer · 04-04-2012, 09:03 AM

has no one any idea?

sunfighter · 04-05-2012, 12:06 AM

Is it the same menu-item highlighted when there's a campaign?

How do you tell people that there is a campaign? When you do that, change the CSS for the menu-item if it is always the same.

Does that help?

Transformer · 04-05-2012, 10:14 AM

Hi sunfighter,

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.

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;
}

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>
</div>

It does not work.

sunfighter · 04-05-2012, 02:15 PM

I am going to give you a jquery solution to this and leave the rest up to you.
I assume the second code block you gave me above is from view-source and therefore correct. I also assume that the menu is not rendered the same way all the time, so I just can't count down to the <li> that says Membership. But I think I can assume that the target for this anchor is unique and that clicking Membership will take you to the same screen every time.

If true, I can use the href attribute to find and change Membership using jquery.
When you write the code to declare a campaign you have to also write this.

Code:

<script src="./lib/jquery-1.7.2.min.js" type="text/javascript"></script>  /* this is where mine is - your maybe someplace else */
<script type="text/javascript">
$(document).ready(function() {
	$('[href="/index.php?tpl=page&id=76&lng=en"]').css("color", "red");
});
</script>

To test it put it in the head of you page, the word Membership in your side-bar menu should be red.

You work out the highlight effect you want.

Transformer · 04-05-2012, 05:09 PM

Hi sunfighter,

all your assumtions wre correct. Thank you.

Very elegant, I have not thought of this aproach, thanks!
And even better, the menu-items in each language all have the same ID-number, so

Code:

[href="/index.php?tpl=page&id=76"]

should mark all URLs with this prefix. I learned about jQuery-selectors, but have not found anything to match all URLs prefixed with the membership-URL.

Transformer · 04-06-2012, 10:19 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;
}

sunfighter · 04-06-2012, 04:43 PM

Quote:

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

Code:

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

If it's where you say it's at this will get it.

Code:

$('div#Rahmen ul#Navigation [href^="#"]').css({'color': 'yellow', 'font-weight': 'bold'});

If more then one link has href="#" it wont.

I can not help with the #navi #menue stuff.

Transformer · 04-08-2012, 03:02 PM

Thank you, yes, the '#' is used for several URLs throughout the site, so many links turned up bold.

I got a tip on another forum. For now, I can change the display of the Newsletter/'Rundbrief' quickly via Javascript. The website later needs better HTML/CSS-generation in the first place, so the IDs and classes can be addressed with CSS alone. But for now or if anybody has a similar task:

Code:

function highlightRundbrief () {
 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

}

then called from within jQuery document.ready().

Code:

$(document).ready( function() {
  highlightRundbrief();
});  // end document.ready()

Transformer · 04-08-2012, 03:16 PM

Thank you for the support!

For reference: I also posted here and interlink the threads:
http://www.webdeveloper.com/forum/sh...d.php?t=258978