I have a menu very similar to Prada's (www.prada.com). When the user clicks on the word 'MENU' I want the image to change from the lines to a cross. The cross stays until the menu is closed again. Any idea how to do this? I'm not sure if the lines are an image or...?
Here is my current code. I have the sliding feature working, I just need to work out the image / lines next to the word 'MENU'.
<div class="skip-links">
<a class="skip-link skip-nav" href="#header-nav">
<span class="icon"></span>
<span class="label">
MENU
</span>
jquery:
jQuery(document).ready(function() {
jQuery('.skip-links').hide().before('<a href="#" id="toggle-skip-links" class="button">Open/Close</a>');
jQuery('a#toggle-skip-links').click(function() {
jQuery('.skip-links').slideToggle(200);
return false;
});
});
UPDATE:
I am using the following codepen:
http://codepen.io/anon/pen/PqGryp
Only it doesn't seem to be working on my end. The javascript isn't being triggered. Any ideas? I have placed the javascript into 'app.js'