PDA

View Full Version : Responsive Side Toggle Menu reversal



green
12-02-2015, 12:51 PM
1) Script Title: Responsive Side Toggle Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/sidetogglemenu.htm

3) Describe problem: Rather than the side menu being open on page load, to have it open. This was answered elsewhere on this forum and the solution was:

to the head code:


<script>
jQuery(function(){
menu1 = new sidetogglemenu({
id: 'togglemenu1',
})
})
</script>

Add: menu1.toggle();
so we have:


<script>
jQuery(function(){
menu1 = new sidetogglemenu({
id: 'togglemenu1',
})
menu1.toggle();
})
</script>

This looks fine on desktops BUT I'd like the small-sized screen version NOT to load the side menu open (the user is just presented with the menu covering the whole screen). So, can it be worked that over 480px the menu is OPEN and under 480px, the menu is CLOSED? Thank you in advance for your help.

ddadmin
12-03-2015, 01:25 AM
You could just conditionally call the toggle() method, something like:


<script>
jQuery(function(){
menu1 = new sidetogglemenu({
id: 'togglemenu1',
})

if (screen.width > 480)
menu1.toggle();
})
</script>

or whenever the browser is 480px or less (even on desktop browsers):


<script>
jQuery(function(){
menu1 = new sidetogglemenu({
id: 'togglemenu1',
})

if (window.innerWidth > 480)
menu1.toggle();
})
</script>

green
12-03-2015, 07:33 PM
That works great! Thank you so much.