Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › JavaScript › “convert-menu-to-dropdown” jquery method.

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 30, 2012 at 12:29 am #36388
    Preeminent
    Participant

    Hey all,
    I’m tying to figure out this “convert-menu-to-dropdown” method that chris posted a while back.

    Here’s the link to the article

    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?
    Thanks!

    Here’s my code:
    January 30, 2012 at 7:59 am #95696
    Tcooper
    Member

    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

     
  • Home

    • 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.

    January 30, 2012 at 10:54 am #95702
    Preeminent
    Participant

    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.

    January 30, 2012 at 11:29 am #95704
    Tcooper
    Member

    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.

    February 2, 2012 at 7:28 am #95995
    Eskymo
    Member

    I’ve just implemented the non-javascript method described in the tutorial and it works, but when I click on the menu on my iPod touch the page zooms in at the same time the drop down select thing appears, so when I select a page and click done, I then have to pinch-zoom the page back to the right size – does anyone know why this would be happening?

    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?

    February 3, 2012 at 12:56 am #96075
    Preeminent
    Participant

    You’ll need to add your meta name = “viewport” settings in the head of your index. It’s more than likely not in there yet? Google that and you should get what you are looking for. Also, as far as getting working links go, I ended up going with a fantastic javascript function for my mobile select list:
    http://lab.artlung.com/dropdown/

    February 3, 2012 at 5:28 am #96085
    Eskymo
    Member

    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?

    February 6, 2012 at 12:09 pm #96265
    Eskymo
    Member

    I managed to find this snippet of code on http://www.w3schools.com here:

    http://www.w3schools.com/js/tryit.asp?filename=tryjs_selectmenu

    Implemented it and it works just fine – just had to add action=”” to the form tag to get the page to validate.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.