Close button for JS dropdown menu on tablets/phones?

Oops! , I just noticed I had posted the wrong "order" of the ul list.

Up vote 1 down vote favorite share g+ share fb share tw.

I've been using the following CSS dropdown box on my website, and I've noticed that when you click to activate the dropdown on an ipad/iphone, there is no way to close the dropdown menu other than refreshing the page. Is there a JS code that I can add to the bottom of the dropdown box for tablet/phone users so they can close the box if they don't make a selection? /* css */ #dropdown { } #dropdown ul { } #dropdown li { } .

Dropmain1 { background: #f2f2f2 url(images/gradients/drop1bg. Jpg) repeat-x; width: 98px; border-left: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; margin-top: 10px; -moz-box-shadow: 3px 9px 8px #888; -webkit-box-shadow: 3px 9px 8px #888; box-shadow: 3px 9px 8px #888; } . Dropmain2 { background: #f2f2f2 url(images/gradients/drop1bg.

Jpg) repeat-x; border-left: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; -moz-border-radius-bottomleft: 7px; -moz-border-radius-bottomright: 7px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; padding: 5px; -moz-box-shadow: 3px 5px 8px #888; -webkit-box-shadow: 3px 5px 8px #888; box-shadow: 3px 5px 8px #888; } #drop2 { width: 633px; margin-top: 10px; padding: 9px; } #drop3 { width: 200px; margin-top: 10px; padding: 9px; } #drop4 { width: 200px; margin-top: 10px; padding: 9px; } #drop5 { width: 200px; margin-top: 10px; padding: 9px; } /*this is the css for the horizontal version*/ . Horizontal ul{ border: none; list-style-type: none; padding:0;margin:0; } . Horizontal ul li{ float: left; position: relative; margin:0;padding:0; } a.

Toplevel { display: block; color: #525252; text-decoration: none; overflow: hidden; display:inline-block; padding-left:15px; padding-right: 15px; line-height:18px; background:transparent url(images/misc/menu_open. Gif) center left no-repeat; } . Horizontal li li{ float: none; margin-bottom: -1px; } .

Horizontal li li. Last{ border-bottom: none; } . Horizontal ul li ul{ position: absolute; top: 1.3em; left: -1px; } .

Horizontal ul ul ul{ width: 130px; top: -1px; left: 128px; margin-top: 0; } .horizontal. Left ul ul ul,. Horizontal .

Left ul ul{ top: -1px; left: -128px; } . Horizontal ul li li a{ padding: 12px; } . Horizontal ul li:first-child>a{ } .

Horizontal ul li a. First{ } . Horizontal ul li li a.

First{ } . Horizontal ul li li:first-child>a{ } div. Horizontal ul li.

Pixelfix ul{ left: 0; } div. Horizontal ul li. Pixelfix ul ul{ left: 128px; } /*here we use a little CSS to make a basic/backup dropdown menu in modern browsers *cough* not IE6 or less *cough* if javascript is disabled.

Flickering never happens in these browsers*/ . Mlmenu li ul{ display: none; } . Mlmenu li:hover>ul{ display: block; } /*This section makes the menu not work in non-javascript enabled browsers by not showing the menu by default-This can be worked around by making top level links point to a sitemap*/ .

Accessible li ul{ display: block; } /*Code to show an element has a child*/ .mlmenu. Plus li a:first-child:not(:last-child):after{ content: ' '; } . Plus a span{ padding-left: .5em; } .

Noshow{ visibility: hidden; } /*colors for menu*/ } . Bluewhite li a{ background-color: ; color: #ffffff; } . Bluewhite li a:hover,.

Bluewhite li a. First:hover,. Bluewhite .

Trail a. Hover{ /* HOVER */ } . Bluewhite li:first-child>a:hover{ } .

Bluewhite ul{ border-color: #000033; } #ldrop a:link, #ldrop a:visited { } #ldrop a:hover, #ldrop a:active { } #holdjump1 { padding-left: 8px; padding-bottom: 6px; } #holdjump1 div { } #holdjump1 a:link, #holdjump1 a:visited { padding: 2px 0 2px 3px; margin:0; } #holdjump1 li { padding:0; margin:0; } . Fjl { display: inline-block; border-bottom: 1px dotted #c1c1c1; width:30%; margin: 0 5px 0 5px; padding: 2px; font-size: 12px; font-weight: normal; } . Fjl a:link, .

Fjl a:visited { display: block; } . Fjl a:active, . Fjl a:hover { background: #a1a1a1; text-decoration: none; color: #ffffff; } Menu Link test javascript css menu dropdown link|improve this question asked Jan 12 at 21:05user114638663.

...for JS dropdown menu..." that doesn't seam like a JS dd menu – ajax333221 Jan 12 at 21:25.

Oops! , I just noticed I had posted the wrong "order" of the ul list. I posted $('div#dropdown ul li').

Click when it actually should be $('div#dropdown li ul'). Click or $('div#dropdown li ul li'). Click What I previously posted was for the main links to be opened and closed.

The new method I am posting will open close the sub menu. UL inside of the LI. To add more submenu functioning, just keep adding on to the element.

$('div#dropdown li ul // 1-level drop down $('div#dropdown li ul li ul // 2-level drop down $('div#dropdown li ul li ul li ul // 3 level drop down. Or you could just create classes for each level. Example instead of a 2-level drop being $('div#dropdown li ul li ul you could just do something like this >> Example menu with a 2-level sub menu link1 sublink1-1 sub-sublink1-1 sub-sublink1-2 Jquery That would cause the 2nd level sub menus to slide up or slide down on click, thus "showing" and "hiding".

Hope this helped a little more!

You can try using JQuery. I'm not sure how to do it in full blown javascript but if you download the jquery library, link to it, and then try something like this it might work. Or.

Basically I want a close button which, when clicked, will close . Dropmain1 or . Dropmain2 - but what you posted actually hides my navigation bar completely – user1146386 Jan 13 at 6:02.

You can try using JQuery. I'm not sure how to do it in full blown javascript but if you download the jquery library, link to it, and then try something like this it might work.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.