Active Menu Highlight CSS

Question

I want to highlight the current menu you have click  I m using CSS  but it is now working   here is my css code    sub-header ul li hover  background-color   000    sub-header ul li hover a  color   fff     sub-header ul li active  background-color   000     sub-header ul li active a  color   fff      here is my html    lt div id  sub-header  gt       lt ul gt           lt li gt   lt a href  index php  gt Home lt  a gt   lt  li gt           lt li gt   lt a href  contact php  gt Contact Us lt  a gt   lt  li gt           lt li gt   lt a href  about php  gt About Us lt  a gt   lt  li gt       lt  ul gt   lt  div gt    This is what I like when I hover and if the menu is active    Hover is okay  The problem is when I after click the menu the black ground is not display     Jonathan  I have already solve it and it is more simply than what you have gave   this is my answer     function           this will get the full URL at the address bar     var url   window location href           passes on every  a  tag          sub-header a   each function                    checks if its the same on the address bar         if url     this href                    this  closest  li   addClass  active                            then on my css file    active   background-color   000       to override the existing css for  a  tag     sub-header  active a  color   fff

User · Answer

You should refer to the current element and not all elements matching your selector.

$("#mainMenu td").click(function() {
$(this).css('background-color', '#EDEDED');

});

I´d also recommend you to use CSS classes instead of setting the CSS properties this way.

That would be something like;

$("#mainMenu td").click(function() {
$(this).addClass('selected');

});

together with;

#mainMenu td.selected {

background-color: #EDEDED; }

User · Answer

Another variation with a simple 2-line listener       menu button    click function               menu button    removeClass  menu button highlight          this  addClass  menu button highlight                      lt a class  menu button  href   admin  gt Admin lt  a gt       lt br  gt        lt a class  menu button  href   user manager  gt User Manager lt  a gt       lt br  gt        lt a class  menu button  href   invite codes  gt Invite Codes lt  a gt           menu button        padding  0 5px      menu button highlight        background   ffe94c

User · Answer

Let s say we have a menu like this    lt div class  menu  gt     lt a href  link1 html  gt Link 1 lt  a gt     lt a href  link2 html  gt Link 2 lt  a gt     lt a href  link3 html  gt Link 3 lt  a gt     lt a href  link4 html  gt Link 4 lt  a gt   lt  div gt    Let our current url be https   demosite com link1 html  With the following function we can add the active class to which menu s href is in our url   let currentURL   window location href   document querySelectorAll   menu a   forEach p   gt      if currentURL indexOf p getAttribute  href        -1       p classList add  active

User · Answer

First  give all your links a unique id and make a css class called active    lt ul gt       lt li gt  lt a id  link1  href         gt link 1 lt  a gt  lt  li gt       lt li gt  lt a id  link2  href         gt link 2 lt  a gt  lt  li gt   lt  ul gt    CSS    active       font-weight  bold      Jquery version   function setActiveLink setActive       if     a   hasClass  active               a   removeClass  active        if  setActive                setActive  addClass  active         function            a   click function             setActiveLink this id                 Vanilla javascript version   In order to prevent selecting too many links with document querySelectorAll  give the parent element an id called menuLinks  Add an onClick handler on the links    lt ul id  menuLinks  gt       lt li gt  lt a id  link1  href         onClick  setActiveLink this id    gt link 1 lt  a gt  lt  li gt       lt li gt  lt a id  link2  href         onClick  setActiveLink this id    gt link 2 lt  a gt  lt  li gt   lt  ul gt    Code   function setActiveLink setActive       var links   document querySelectorAll   menuLinks a        Array prototype map call links  function e            e className               if  e id    setActive              e className    active

User · Answer

Answer  You need CSS for    current    link here is tut   Description of jQuery menu nav  Sample   One of meny solution   Its working for me

User · Answer

Try this  Do copy and paste       Test html -    lt html gt    lt link rel  stylesheet  type  text css  href  style css  gt    lt a class  fruit  href     gt Home lt  a gt  lt  span gt    lt a class  fruit   href     gt About lt  a gt  lt  span gt    lt a class  fruit   href     gt Contact lt  a gt  lt  span gt   lt  html gt    style css -  a link   color blue     a visited   color purple     a hover   color orange    a focus  color green     a active   color red     a active   color yellow

User · Answer

Maybe it is very very bad way and just for lazy person  but I decided to say it   I used PHP and bootstrap and fontawsome too  for simple I have 2 pages  1 index and 2 create-user  put this code above your code   lt  php  name basename   SERVER  REQUEST URI      name str replace   php      name   switch   name        case  create-user            a   2          break      case  index            a   1          break      default           a 1      gt    and  in menu you add  lt  php if  a  1  echo  active      gt  in class for menu1 and for menu2 you add  lt  php if  a  2  echo  active      gt    lt ul id  menu  class  navbar-nav  flex-column text-right mt-3 p-1  gt                           lt li class  nav-item mb-2  gt                               lt a href  index php  class  nav-link text-white customlihamid  lt  php if  a  1  echo  active      gt   gt  lt i                                         class  fas fa-home fa-lg text-light ml-3  gt  lt  i gt dashbord lt  a gt                           lt  li gt                           lt li class  nav-item mb-2  gt                               lt a href     href  javascript   data-parent   menu  data-toggle  collapse                                 class  accordion-toggle nav-link text-white customlihamid  lt  php if  a  2  echo  active      gt   data-target   tickets  gt                                   lt i class  fas fa-user fa-lg text-light ml-3  gt  lt  i gt manage users                                  lt span class  float-left  gt  lt i class  fas fa-angle-down  gt  lt  i gt  lt  span gt                               lt  a gt                                lt ul class  collapse list-unstyled mt-2 mr-1 pr-2  id  tickets  gt                                   lt li class  nav-item mb-2  gt                                       lt a href  create-user php  class  nav-link text-white customlihamid  gt  lt i class  fas fa-user-plus fa-lg text-light ml-3  gt  lt  i gt add user lt  a gt                                   lt  li gt                                    lt li class  nav-item mb-2  gt                                       lt a href     class  nav-link text-white customlihamid  gt  lt i class  fas fa-user-times fa-lg text-light ml-3  gt  lt  i gt delete user lt  a gt                                   lt  li gt                                lt  ul gt                           lt  li gt                        lt  ul gt    and add in css   customlihamid       transition  all  4s      customlihamid hover       background-color   8a8a8a      border-radius  5px      color   00cc99     nav-item  gt   nav-link active        background-color   00cc99      border-radius  7px      box-shadow  5px 7px 10px  111      transition  all  3s     nav-item  gt   nav-link active hover        background-color   8eccc1      border-radius  7px      box-shadow  5px 7px 20px  111      transform  translateY -1px       and in js add    document  ready function             navbar-nav  nav-link   click function              navbar-nav  nav-link   removeClass  active            this  addClass  active                first check your work without js code to understand js code for what

User · Answer

As the given tag to this question is CSS  I will provide the way I accomplished it    Create a class in the  css file    a activePage  color  green  border-bottom  solid  border-width  3px   Nav-bar will be like                  Home           Contact Us           About Us          NOTE  If you are already setting the style for all Nav-Bar elements using a class  you can cascade the special-case class we created with a white-space after the generic class in the html-tag  Example  Here  I was already importing my style from a class called  navList  I created for all list-items   But the special-case styling-attributes are part of class  activePage    CSS file   a navList text-decoration  none  color  gray   a activePage  color  green  border-bottom  solid  border-width  3px      HTML file    lt div id  sub-header  gt       lt ul gt           lt li gt   lt a href  index php  class   navList activePage   gt Home lt  a gt   lt  li gt           lt li gt   lt a href  contact php  class   navList  gt Contact Us lt  a gt   lt  li gt           lt li gt   lt a href  about php  class   navList  gt About Us lt  a gt   lt  li gt       lt  ul gt   lt  div gt    Look how I ve cascaded one class-name behind other

User · Answer

add simply way   lt div id  cssmenu  gt   lt ul gt   lt li class    gt  lt a href  1 html  gt  lt span gt 1 lt  span gt  lt  a gt  lt  li gt   lt li class    gt  lt a href  2 html  gt  lt span gt 2 lt  span gt  lt  a gt  lt  li gt   lt li class    style  float right   gt  lt a href  3 html  gt  lt span gt 3 lt  span gt  lt  a gt  lt  li gt   lt  ul gt   lt  div gt      document   ready function      function         cssmenu a href      location pathname split      location pathname split      length-1          parent   addClass  active

User · Answer

Following  Sampson s answer  I approached it this way - HTML   I have a div with content class in each page  which holds the contents of that page  Header and Footer are separated  I have added a unique class for each page with content  For example  if I am creating a CONTACT US page  I will put the contents of the page inside  lt section class  quot content contact-us quot  gt  lt  section gt   By this  it makes it easier for me to write page specific CSS in a single style css    x000D   x000D   lt body gt       lt header gt           lt div class  nav-menu  gt               lt ul class  parent-nav  gt                   lt li gt  lt a href     gt Home lt  a gt  lt  li gt                   lt li gt  lt a href     gt Contact us lt  a gt  lt  li gt                                   lt  ul gt           lt  div gt       lt  header gt        lt section class  content contact-us  gt          Content for contact us page goes here      lt  section gt        lt footer gt       lt  footer gt    lt  body gt  x000D   x000D   x000D   CSS   I have defined a single active class  which holds the styling for an active menu    x000D   x000D   active       color  red      text-decoration  none    x000D   lt body gt       lt header gt           lt div class  nav-menu  gt               lt ul class  parent-nav  gt                   lt li gt  lt a href     gt Home lt  a gt  lt  li gt                   lt li gt  lt a href     gt Contact us lt  a gt  lt  li gt                                   lt  ul gt           lt  div gt       lt  header gt        lt section class  content contact-us  gt          Content for contact us page goes here      lt  section gt        lt footer gt       lt  footer gt    lt  body gt  x000D   x000D   x000D   JavaScript   Now in JavaScript  I aim to compare the menu link text with the unique class name defined in HTML  I am using jQuery  First I have taken all the menu texts  and performed some string functions to make the texts lowercase and replace spaces with hyphens so it matches the class name  Now  if the content class have the same class as menu text  lowercase and without spaces   add active class to the menu item    x000D   x000D  var  allMenu       nav-menu  gt   parent-nav  gt  li  gt  a    var  currentContent       content     allMenu each function        singleMenuTitle     this  text   replace   s  g   -   toLowerCase      if   currentContent hasClass  singleMenuTitle           this  addClass  active            x000D   active     color  red    text-decoration  none    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt    lt body gt     lt header gt       lt div class  nav-menu  gt         lt ul class  parent-nav  gt           lt li gt  lt a href     gt Home lt  a gt  lt  li gt           lt li gt  lt a href     gt Contact us lt  a gt  lt  li gt                     lt  ul gt       lt  div gt     lt  header gt      lt section class  content contact-us  gt      Content for contact us page goes here    lt  section gt      lt footer gt       lt  footer gt    lt  body gt  x000D   x000D   x000D   Why I Approached This    Sampson s answer worked very well for me  but I noticed that I had to add new code every time I want to add new page  Also in my project  the body tag is in header php file which means I cannot write unique class name for every page

User · Answer

Add a class to the body of each page    lt body class  home  gt    Or if you re on the contact page    lt body class  contact  gt    Then take this into consideration when you re creating your styles    sub-header ul li hover  body home li home  body contact li contact   background-color   000     sub-header ul li hover a  body home li home a  body contact li contact a   color   fff      Lastly  apply class names to your list items    lt ul gt     lt li class  home  gt  lt a href  index php  gt Home lt  a gt  lt  li gt     lt li class  contact  gt  lt a href  contact php  gt Contact Us lt  a gt  lt  li gt     lt li class  about  gt  lt a href  about php  gt About Us lt  a gt  lt  li gt   lt  ul gt    This point  whenever you re on the body home page  your li home a link will have default styling indicating it is the current page

[javascript] Active Menu Highlight CSS

Examples related to javascript

Examples related to html

Examples related to jquery

Examples related to css