In this article I share how custom menu links can be toggled (open and close) by clicking on an element similar to that in http://travelredbook.com/.
Screenshots:
Here's the summary:
- Create a shortcode to output a specific WP menu. We are going to limit the depth to 1 so that only the top level menu items are shown.
- Load Font Awesome for the down pointing arrow on the dropdown "button" at the right.
- Write and load jQuery script which will slide toggle the custom menu when the dropdown button is clicked.
- Add styling so it looks red hot.
Step 1
Create a file named dd-menu-toggle.js in child theme directory/js (create js directory if not existing) having the following:
This is not working for me. The shortcode is showing up underneath the button and the drop down is not working. I copied all the files from Raw and uploaded. Site is http://emasai.com/emasai/
Hi Lynne
I had a similar issue and realised that the JS file was not uploaded. Also do not add ‘Menu’ after your menu name in the widget.
I might be completely wrong though, but check out your JS file as this enables the dropdown functionality.
Regards
Dale, thanks for the response, the JS file is uploaded in the correct folder and I removed the “Menu”, but the shortcode still shows up.
Sridhar would you care to chime in?
Can you send me your WP dashboard and FTP/cPanel logins via http://www.sridharkatakam.com/contact/ so I can take a look inside?
Sent
Fixed by adding this in functions.php: http://pastebin.com/raw.php?i=WZA6G19y
Maybe you should add it into the tutorial..
Done. Updated the tutorial.
Hi Sridhar
Such a graceful menu. Thank you for the tutorial.
Is there a simple way to enable the Menu to retract when clicking elsewhere on the page. Currently I have to click on the actual Menu Button.
Regards