Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Page class based on current menu item

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #193805
    ckubs
    Participant

    I have a problem, sort of. I want to achieve something like this:

    Let’s say I have a menu like this:
    <ul class="menu">
    <li class="first"> item 1</li>
    <li class="second"> item 2</li>
    <li class="third"> item 3</li>
    </ul>

    Is it possible to have an css class added to the whole page based on the css class of the active menu Item? When the item with CSS class #second is clicked for example, the whole page to get #whatever class?

    Thank you for any help.

    #193806
    Paulie_D
    Moderator

    It’s not clear what you are trying to do.

    If you click on li.second you want the body to get the .second class…is that right?

    Doable…but why?

    http://codepen.io/Paulie-D/pen/mymzxy

    #193807
    ckubs
    Participant

    Thank you. I’m building a template for a small cms with various sections that have specific css classes attached to their menu intems only.

    #193809
    Paulie_D
    Moderator

    OK, but I’m not sure what the clicking of a list item will do for you.

    Regardless, I’ve used Jquery abovebut it does remove all classes from the body so the script is very powerful and easy to be overused. You may need to adapt the script.

    #193814
    ckubs
    Participant

    Well, I want to achieve this situation: when testimonials menu tab is clicked so, I’m in the testimonials page the links colour( for example) of that page to be red, not dark blue as default … ans so on. And this CMS doesn’t have the flexibillity of something like WordPress to have individual page classes.

    #193815
    Paulie_D
    Moderator

    Hmm, OK but you’re gonna get the ‘flash’ of styling switch, It would be ‘preferable’, I feel, to have the styling applied as the page is loaded.

    Anyway, it’s up to you.

    #193844
    justdan
    Participant

    If the color switch is too flashy you could always give the body.first/second/third a transition property of “transition: all .3s linear 0s;” and it’ll at least make it a little smoother and easier on the eyes.

    #193850
    Paulie_D
    Moderator

    You have to be careful with a transition of “all” otherwise you can get some odd effects.

    I would only transition the properties that I want to affect.

    #193855
    justdan
    Participant

    @Paulie_D Very good point. I forgot you did mention that script you provided was was powerful and needed some possible tuning.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.