I’m tying to figure out this “convert-menu-to-dropdown” method that chris posted a while back.
When I try and implement this on the site I’m working on, I am getting TWO dropdowns appearing. One just says, ” Go To…” in it and nothing else. The other one works perfect. Can anyone help me figure out why I’m getting two? What am I missing?
Here’s my code:
You have two selects because that’s how you’ve written it. You have on in your actual HTML then you are adding another to the dom via JS.
The second (added via JS) select has no other options because you are adding them in the JS by looking for ‘nav a’ of which there are none.
Is your menu generated dynamically? If so just populate both at the same time, hide the select via CSS and then show it and hide the ul using media queries at the relevant widths.
If you have a static menu and you are doing it like this to save having to maintain both menus then you first need to make the original ul>li items contain links
If you do it this way you shouldn’t have the select in your HTML – I’m sure Chris meant to mention this in the article.
Thank you! I missed that I didn’t place links in there yet. So, I only need one drop down, and the regular ul is there for the larger versions of the site.
So Chris was showing two ways of doing it then? One way for dynamic, one for not? I won’t be doing it dynamically.
That article isn’t particularly clear, I would guess he intended to go back and swap things around or something but got distracted.
Basically, the preferred method would be to generate the menu and select at the same time on the back-end and use CSS + media queries to show/hide the relevant element (elephant). If you aren’t able to do this for one reason or another, you can use the JS option to basically create a copy of the ul navigation. With the script you are using you should not have a select in your actual HTML, it will be added by the JS.
Also I’ve just replaced the ‘#’ I had in place with actual links (google for now – just to test) and the links don’t work either – my code is as follows:
When I click on the menu thepage zooms in and the drop down thing appears, I select a link from the list and click done and nothing happens. What am I doing wrong?
I have this in my head tag already:
So what am I doing wrong?
I think the links aren’t working as I’ve not got any form tags – the tutorial doesn’t mention this and so if you could offer any advice on what to add that’d be great. When I look a t the source code for the Five Simple Steps website that CSS Tricks refers to – they don’t have any form tags around their nav – so not sure how they are getting it to work. Any ideas?
I managed to find this snippet of code on http://www.w3schools.com here:
Implemented it and it works just fine – just had to add action=”” to the form tag to get the page to validate.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".