JJC Web Developers JJC Web Developers - 25 days ago 7
CSS Question

Changing Menu Image

I need to change the background-image for a menu button once it is clicked but CSS :active property doesn't work for it, only for while it is being clicked, I need for it to stay as the image until they click it again.

HTML

<nav class="clearfix">
<div class="menu">
<ul style="list-style-type:none;">
<li>
<a href="home.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="slide.html">Before/After</a>
</li>
<li>
<a href="fac.html">Facilities</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
<li>
<a href="staff.html">Staff</a>
</li>
</ul>
</div>
<div class="site-wrapper">
<div class="header">
<a><div class="menu-trigger" title="Menu"></div></a>
</div>
</div>
<script src="testing.js" type="text/javascript">
</script>
</nav>


CSS

.menu-trigger {
background-image:url("http://download.seaicons.com/icons/custom-icon-design/flatastic-2/512/usb-icon.png");
background-position:center;
background-size:100% 100%;
background-repeat: no-repeat;
width:50px;
height:50px;
left: -150%;
transform:rotate(-135deg);
position:relative;
}

.menu-trigger:hover{
cursor: pointer;
}


JS

$('a .menu-trigger').on('click', function() {
$('.menu').toggleClass('open', 300, 'easeOutQuad');
});

rob rob
Answer

Why not set the background image for each in a class, then just toggle?

.pre_click { 
     background-image:url(".../image_1.png");
 }
.post_click { 
     background-image:url(".../image_2.png");
 }

Then toggle

 $('.menu').on('click', function() { 
    $('.menu').toggleClass('pre_click post_click')
}) 

Make sure you set the default class that you want applied to the 'menu' item so it will properly toggle.