CODEWITHSUNDEEP
jqueryhtmlmenu
user1393984
user1393984

Reputation: 1329

Keeping link in an inactive state while menu is open

So, I have a menu that pushes out from the left when the 'KH' logo is clicked. When the 'KH' is hovered over, it goes to a lighter grey colour.

Once the 'KH' is clicked and the user moves their mouse it goes back to the active state of black.

Is there a way to keep the 'KH' at this lighter grey colour the whole time the menu is open, and only go back to black once the user closes the menu?

HTML:

<div class="logo"><button class="one toggle-menu menu-left push-body">KH</button></div>

CSS:

button.one {
border : 0px;
background: #f4f4f4;
font-family: "bebas-neue", sans-serif;
font-size: 3em;
color: #272727;
font-weight: 400;
padding-bottom: 15px;
letter-spacing: 1px;
text-decoration: none;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
cursor: pointer;
}

button.one:active { color: #ccc; }

button.one:hover { color: #ccc; cursor: pointer; }

Website: http://kaye.at/babyboom.php

Upvotes: 0

Views: 258

Answers (3)

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

There is a way, you would need to edit the /js/classie.js file. I have a working fiddle here

Specifically: 

//...
var jPushMenu = {
            close: function (o) {
                $('.jPushMenuBtn,body,.cbp-spmenu').removeClass('disabled active cbp-spmenu-open cbp-spmenu-push-toleft cbp-spmenu-push-toright');
                                // Add the below line
                                $('button.one').css('color', '#272727');
            }
        }

Then also remove the :hover attribute from your css file and amend this script

jQuery(document).ready(function () {
    $('button.one').on('mouseover', function () {
        $(this).css('color', '#CCC');
    });
    $('button.one').on('mouseout', function () {
        if ($('.cbp-spmenu-open').length == 0) {
            $(this).css('color', '#272727');
        }
    });
    $('.toggle-menu').jPushMenu();
});

Upvotes: 0

Sgoldy
Sgoldy

Reputation: 796

One idea is to have 

button.one:active { color: #ccc; }

changed to something like

button.one:active, .button_active { color: #ccc; }

and add this anywhere in your script (After the dom is ready):

$(".logo button").click(function () { $(this).toggleClass("active_button"); })

Upvotes: 1

Mark Erasmus
Mark Erasmus

Reputation: 2385

Have you tried creating a hover-specific style when clicked, and then apply this style when clicked, and removing it when necessary? For example:

button.one.hover,
button.one:hover {
    color: #ccc;
    cursor: pointer;
}

DEMO

Upvotes: 0

Related Questions