Full screen mobile menu

**andywalmsley** · 01-29-2015, 02:50 PM

Hi Beverley,
The code is here: http://www.newforestexplorersguide.c...roduction.html.
(It's in the Head section. I've tried it in the Body section but that makes no difference.
It's only activated via the animated drawer on screens up to 600px wide).
The following are now the last five lines of fullscreenmenu.js:
jQuery(function(){ // on DOM load
toplevelmenu = new fullscreenmenu({ // initialize menu
source: '#my-menu'
})
})
If I completely remove the line that references ajax, the menu does not open at all.
I've not made any other changes.
Andrew

**Beverleyh** · 01-29-2015, 03:09 PM

Firstly, I don't see any code relating to the fullscreenmenu in the page you linked to - no link to the jQuery library and no fullscreenmenu JS or CSS files.

Secondly, there is no navigation markup with the "fullscreenmenu" class or "my-menu" id

Thirdly, there is no mobile/device-width meta tag which would display your page in a mobile view on my iPhone (how I'm currently viewing) so I don't see any front-end indication of a mobile menu or icon.

Please provide a link to a reduced test page - in other words, a page that only contains your implementation of the menu (no other markup or distractions) to make it easier to see where you're going wrong.

To clarify any confusion with the Ajax line in the initialisation code; it isn't needed when the menu markup is inlined in the page markup with a unique id. The id is used to initialise the menu instead.

**andywalmsley** · 01-29-2015, 03:16 PM

Beverley,
I'm sorry - wrong URL.
It should be:
http://www.sgclean.co.uk/common-righ...roduction.html
Can you manage with this?
Andrew

**andywalmsley** · 01-29-2015, 03:48 PM

Hi Beverley,
I've put together a page just containing the menu.
It's here: http://www.sgclean.co.uk/mobile-menus/menu-test.html
Andrew

**Beverleyh** · 01-29-2015, 04:01 PM

Looks like you've sorted it. It seems to be working fine now.

**andywalmsley** · 01-29-2015, 04:48 PM

Hi Beverley.
If only!
The menu is showing ok but nothing happens when the links are tapped.
And if I remove the ajax link, which if possible I want to, nothing happens at all.
Andrew

**Beverleyh** · 01-29-2015, 06:30 PM

I really am confused with why you're formatting the web page structure like you are. Why are you putting the navigation HTML markup in the <head> section of your web page? You already asked if it should go in the <body> and I answered you here http://www.dynamicdrive.com/forums/s...768#post310768. Something must have got lost across the wire - can you help me understand how you interpreted the demo instructions that way? Or why you would stray from the structure of a basic web page - here's a refresher to explain what goes where http://www.sitepoint.com/web-foundat...of-a-web-page/

Also, can you just clarify what you mean by the "Ajax link". You aren't using the Ajax initialisation method (the line that references, or "links to", the external menu markup) so what are you referring to?

**andywalmsley** · 01-29-2015, 07:51 PM

Hi Beverley.
Sorry about that. I missed your response re. whether head or body. The navigation is in the body section now, with the same result as before. Re. ajax: I'm referring to this line which I understand has to go in the head section - <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Andrew

**Beverleyh** · 01-29-2015, 08:12 PM

That's the jQuery library and is required for this menu - going back to your first post, this is the JavaScript file that I suggested downloading and serving from your own domain then combining with the other menu scripts for asyncing.

When the fullscreenmenu demo page talks about Ajax, it's referring to the way it can reference the external file that contains the menu markup.

You are not using the Ajax method now and are instead using the id initialisation method, with the menu markup placed in the <body>. That part is correct.

The thing that looks off now is your lack of valid doctype. Hopefully once one is inserted, your script will work properly http://www.sitepoint.com/web-foundations/doctypes/

**andywalmsley** · 01-29-2015, 09:02 PM

Hi Beverley,
I've tried a range of doc types and it makes no difference.
What I have established, though, is that if I copy in the 7 <li>s from the DD example, it works fine, but as soon as I enter an 8th - a repeat copy of a DD <li> - it stops working.
I've done the same with my <li>s with the same result - it stops working when there is an 8th entry.
(It does not work at all with my <li>s when the menu items span more than one line when displayed on a phone).
It seems, therefore, as though there's a problem with more than 7 entries and with entries that span more than one line.
A working example is loaded now.
However, given that it seems as though I'll have to leave the <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> line in, moving my menu inline will not benefit as far as PageSpeed Insight tests are concerned, so I think I'll just go back to holding the menu in a separate file.
(Doing what you suggest with the JS library does not seem to work for me - it's probably a bit beyond my level of expertise, so for now I'll revert back to a separate menu file).
Thanks for your help.
Andrew