highlight the navigation menu for the current page

Question

In a page with some navigation links I want the link of the current page are hightlighted just like this   The link  quot HTML Attributes quot  is highlighted bolded  since this link will take one to the current page  I know this can be implemented manually just hightlighted the according link but is there some smart way  highlight the right link dynamically and automatically

User · Accepted Answer

You can set the id of the body of the page to some value that represents the current page. Then for each element in the menu you set a class specific to that menu item. And within your CSS you can set up a rule that will highlight the menu item specifically...

That probably didn't make much sense, so here's an example:

<body id="index">
<div id="menu">
 <ul>
  <li class="index"     ><a href="index.html">Index page</a></li>
  <li class="page1"     ><a href="page1.html">Page 1</a></li>
 </ul>
</div> <!-- menu -->
</body>

In the page1.html, you would set the id of the body to: id="page1".

Finally in your CSS you have something like the following:

#index #menu .index, #page1 #menu .page1 {
  font-weight: bold;
}

You would need to alter the ID for each page, but the CSS remains the same, which is important as the CSS is often cached and can require a forced refresh to update.

It's not dynamic, but it's one method that's simple to do, and you can just include the menu html from a template file using PHP or similar.

User · Answer

lt script id  add-active-to-current-page-nav-link  type  text javascript  gt      function setSelectedPageNav             var pathName   document location pathname          if     nav ul li a      null                var currentLink      nav ul li a href      pathName                      currentLink addClass  active                        setSelectedPageNav     lt  script gt

User · Answer

I usually use a class to achieve this  It s very simple to implement to anything  navigation links  hyperlinks and etc   In your CSS document insert    current  nav li a hover         styles go here       color   e00122     background-color   fffff      This will make the hover state of the list items have red text and a white background  Attach that class of current to any link on the  current  page and it will display the same styles   Im your HTML insert    lt nav gt      lt ul gt         lt li class  current  gt  lt a href     gt Nav Item 1 lt  a gt  lt  li gt         lt li gt  lt a href     gt Nav Item 2 lt  a gt  lt  li gt         lt li gt  lt a href     gt Nav Item 3 lt  a gt  lt  li gt      lt  ul gt   lt  nav gt

User · Answer

JavaScript    lt script type  text javascript  gt        function              var url   window location             ul nav a   filter function                 return this href    url             parent   parent   parent   addClass  active                lt  script gt    CSS    active      color   fff      background-color   080808      HTML    lt ul class  nav navbar-nav  gt                           lt li class  dropdown  gt                               lt a href     class  dropdown-toggle  data-toggle  dropdown  role  button  aria-expanded  true  gt  lt i class  glyphicon glyphicon-user icon-white  gt  lt  i gt  MY ACCOUNT  lt span class  caret  gt  lt  span gt  lt  a gt                               lt ul class  dropdown-menu  role  menu  gt                                   lt li gt                                       lt  php echo anchor  myaccount    HOME    title  HOME       gt                                   lt  li gt                                   lt li gt                                       lt  php echo anchor  myaccount credithistory    CREDIT HISTORY    title  CREDIT HISTORY       gt                                   lt  li gt                             lt  ul gt                        lt  li gt   lt  ul gt

User · Answer

It seems to me that you need current code as this   menu-current css   I am asking the same code that works like a charm    You could try something like this might still be some configuration   a link  a active       color  blue      text-decoration  none     a visited       color  darkblue      text-decoration  none     a hover       color  blue      text-decoration  underline     div menuv       float  left      width  10em      padding  1em      font-size  small      div menuv ul  div menuv li  div menuv  menuv-current li       margin  0      padding  0      list-style  none      margin-bottom  5px      font-weight  normal     div menuv ul ul       padding-left  12px     div menuv a link  div menuv a visited  div menuv a active  div menuv a hover       display  block      text-decoration  none      padding  2px 2px 2px 3px      border-bottom  1px dotted  999999     div menuv a hover  div menuv  menuv-current li a hover       padding  2px 0px 2px 1px      border-left  2px solid green      border-right  2px solid green     div menuv  menuv-current       font-weight  bold     div menuv  menuv-current a hover       padding  2px 2px 2px 3px      border-left  none      border-right  none      border-bottom  1px dotted  999999      color  darkblue

User · Answer

Please Look at the following   Here is what s working   1   top menu buttons are visible and highlight correctly  2   sub menu buttons are not visible until top menu is clicked  Here is what needs work   1   when sub menu is clicked  looking for new page to keep the selected sub menu open  i will highlight the selected sub menu button for further clarification on navigation   Please see code here  http   jsbin com ePawaju 1 edit  or here  http   www ceramictilepro com  6testingonly php    lt head gt   lt script src  http   code jquery com jquery-latest js  gt  lt  script gt   lt  head gt    Do I need to put this script in the head section  Where is the best place    lt div class  left  gt   lt nav class  vmenu  gt       lt ul class  vnavmenu  gt           lt li data-ref  Top1  gt  lt a class  hiLite navBarButton2  href     gt Home lt  a gt           lt  li gt       lt  ul gt       lt ul class  Top1 navBarTextSize  gt           lt li gt  lt a class  hiLite navBarButton2 sub  href  http   www ceramictilepro com  5testingonly php  gt sub1 lt  a gt           lt  li gt           lt li gt  lt a class  hiLite navBarButton2 sub  href  http   www ceramictilepro com  5testingonly php  gt sub2 lt  a gt           lt  li gt           lt li gt  lt a class  hiLite navBarButton2 sub  href  http   www ceramictilepro com  5testingonly php  gt sub3 lt  a gt           lt  li gt           lt li gt  lt a class  hiLite navBarButton2 sub  href  http   www ceramictilepro com  5testingonly php  gt sub4 lt  a gt           lt  li gt       lt  ul gt       lt ul class  vnavmenu  gt           lt li data-ref  Top2  gt  lt a class  hiLite navBarButton2  href     gt Repairs lt  a gt           lt  li gt       lt  ul gt       lt ul class  Top2 navBarTextSize  gt           lt li gt  lt a class  hiLite navBarButton2 sub  href  http   www ceramictilepro com  5testingonly php  gt 1sub1 lt  a gt           lt  li gt           lt li gt  lt a class  hiLite navBarButton2 sub  href  http   www ceramictilepro com  5testingonly php  gt 2sub2 lt  a gt           lt  li gt           lt li gt  lt a class  hiLite navBarButton2 sub  href  http   www ceramictilepro com  5testingonly php  gt 3sub3 lt  a gt           lt  li gt           lt li gt  lt a class  hiLite navBarButton2 sub  href  http   www ceramictilepro com  5testingonly php  gt 4sub4 lt  a gt           lt  li gt       lt  ul gt   lt  nav gt     JQuery is new to me  any help would greatly be appreciated        var submenu       vnavmenu li   click function      var elems       vmenu ul not  vnavmenu    length  var  refClass             this  attr  data-ref     var visible    refClass is   visible         vmenu ul not  vnavmenu    slideUp 100  function           if  elems    1            if   visible   refClass slideDown  fast               elems--       if  visible      breadcrumbs-pc   animate        margin-top    0rem     100   else     breadcrumbs-pc   animate        margin-top    5rem     100

User · Answer

You can use Javascript to parse your DOM  and highlight the link with the same label than the first h1 tags  But I think it is overkill     It would be better to set a var wich contain the title of your page  and use it to add a class at the corresponding link

User · Answer

Css classes are here   lt style type  text css  gt   mymenu       background-color  blue      color  white     newmenu       background-color  red      color  white     lt  style gt    Make your HTML like this  Set url as id     lt div class  my menu  id  index-url  gt  lt a href  index-url  gt Index lt  a gt  lt  div gt     lt div class  my menu  id  contact-url  gt  lt a href  contact-url  gt Contac lt  a gt  lt  div gt    Here write javascript  put this javascript after the HTML code       function menuHighlight            var url   window location href               tabst  addClass  new current              menuHighlight

User · Answer

CSS    topmenu ul li active a   topmenu ul li a hover       text-decoration none      color  fff      background url    images menu a jpg  no-repeat center top      JavaScript    lt script src  JavaScript jquery-1 10 2 js  type  text javascript  gt  lt  script gt     lt script type  text javascript  gt        function                this will get the full URL at the address bar         var url   window location href              passes on every  a  tag             topmenu a   each function                    checks if its the same on the address bar             if  url     this href                       this  closest  li   addClass  active                      for making parent of submenu active                  this  closest  li   parent   parent   addClass  active                                               lt  script gt    Html Code    lt div class  topmenu  gt       lt ul gt           lt li gt  lt a href  Default aspx  gt Home lt  a gt  lt  li gt           lt li gt  lt a href  NewsLetter aspx  gt Newsletter lt  a gt  lt  li gt           lt li gt  lt a href     gt Forms lt  a gt  lt  li gt           lt li gt  lt a href     gt Mail lt  a gt  lt  li gt           lt li gt  lt a href     gt Service lt  a gt  lt  li gt           lt li style  border none   gt  lt a href     gt HSE lt  a gt  lt  li gt           lt li gt  lt a href     gt MainMenu2 lt  a gt              lt ul gt                 lt li gt submenu1 lt  li gt                 lt li gt submenu2 lt  li gt                 lt li gt submenu3 lt  li gt             lt  ul gt          lt  li gt       lt  ul gt   lt  div gt

User · Answer

I would normally handle this on the server-side of things  meaning PHP  ASP NET  etc   The idea is that when the page is loaded  the server-side controls the mechanism  perhaps by setting a CSS value  that is reflected in the resulting HTML the client sees

[html] highlight the navigation menu for the current page

Examples related to html

Examples related to highlight