CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JJC Web Developers
JJC Web Developers

Reputation: 25

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');
});

Upvotes: 1

Views: 1173

Answers (2)

Ayatullah Rahmani
Ayatullah Rahmani

Reputation: 932

change button background image on click using jquery- check Snippet

$(document).ready(function() {

  $(".menu-trigger").click(function() {
        
     $(".menu-trigger").toggleClass("open")

  })

})
.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:0%;
    transform:rotate(-135deg);
    position:relative;
    cursor:pointer
}

.open{
  background-image:url("http://download.seaicons.com/icons/custom-icon-design/flatastic-2/512/help-desk-icon.png");
  
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="site-wrapper">
      <div class="header">
          <a><div class="menu-trigger" title="Menu"></div></a>
      </div>
   </div>

Upvotes: 1

rob
rob

Reputation: 2146

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.

Upvotes: 0

Related Questions