www.webdeveloper.com
Results 1 to 5 of 5

Thread: Highlight specific Menu-Item via CSS possible?

  1. #1
    Join Date
    Apr 2012
    Posts
    3

    Highlight specific Menu-Item via CSS possible?

    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.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,137
    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.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Apr 2012
    Posts
    3
    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.

  4. #4
    Join Date
    Mar 2011
    Posts
    1,137
    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.
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Apr 2012
    Posts
    3
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles