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
  • January 21, 2015 at 6:10 am #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.

    January 21, 2015 at 6:15 am #193806
    Paulie_D
    Member

    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

    January 21, 2015 at 6:49 am #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.

    January 21, 2015 at 7:22 am #193809
    Paulie_D
    Member

    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.

    January 21, 2015 at 7:40 am #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.

    January 21, 2015 at 7:44 am #193815
    Paulie_D
    Member

    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.

    January 21, 2015 at 11:27 am #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.

    January 21, 2015 at 12:13 pm #193850
    Paulie_D
    Member

    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.

    January 21, 2015 at 12:18 pm #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.

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