0

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'

|improve this question
0

Some simple examples over at codepen mate

Hopefully helps achieve what you are wanting

|improve this answer
  • Thanks! I actually had found these in the meantime, but these are better! hanks for your help! – itsk2015 May 23 '15 at 23:25
  • Please see updated question. Any ideas? – itsk2015 May 23 '15 at 23:47
  • Do you have a link to your page? You may need to use the exact HTML from the codepen as well as the CSS as there maybe a conflict in the your code. – BENN1TH May 23 '15 at 23:56
  • I'm working remotely so don't have the 'live' link. Am using the exact HTML and CSS, it seems to be that it's not picking up the JS though. Last time I had problems with .js someone had me add in the 'JQuery' bits, could that be the problem? – itsk2015 May 23 '15 at 23:59
  • I think maybe that dont add the javascript code to the jQuery run script but add it separately in its own script tag <script></script> as its not jQuery dependent function.. – BENN1TH May 24 '15 at 0:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.