Hi guys. I am very new to javascript and actually know next to nothing other than what I can infer things mean looking at it with a pretty good understanding of PHP and HTML/CSS so forgive my asking something I think has an easy answer. I've looked online for how to go about what I'm trying to do with no luck.

The problem is this JS menu I grabbed from a website: http://tympanus.net/codrops/2010/07/...down-box-menu/

I really would like to use it but I am trying to create my website to be completely compatible with touch devices. My first idea was to find a framework or php code that might detect if the device is set to touch or mouse and upon detecting which, change the class values of the elements in the menu to pretty much reference a second javascript that worked on a click event rather than a hover event. This was quite hard to come by.

So my fall back, if there is no such way to detect touch and change values, is to just have one menu that works with everything. So I wanted to convert this JS menu to activate the drop down animations on click instead of hover.
This is the code. It uses jquery and also another JS file but this is the active code on the page itself:

Code:
 
     <script type="text/javascript">
            $(function() {
/**
* for each menu element, on mouseenter, 
* we enlarge the image, and show both sdt_active span and 
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right*/

                $('#sdt_menu > li').bind('mouseenter',function(){
					var $elem = $(this);
					$elem.find('img')
						 .stop(true)
						 .animate({
							'width':'140px',
							'height':'140px',
							'left':'0px'
						 },400,'easeOutBack')
						 .andSelf()
						 .find('.sdt_wrap')
					     .stop(true)
						 .animate({'top':'140px'},500,'easeOutBack')
						 .andSelf()
						 .find('.sdt_active')
					     .stop(true)
						 .animate({'height':'140px','top':'70px'},300,function(){
						var $sub_menu = $elem.find('.sdt_box');
						if($sub_menu.length){
							var left = '140px';
							if($elem.parent().children().length == $elem.index()+1)
								left = '-140px';
							$sub_menu.show().animate({'left':left, 'top':'70px'},200);
						}	
					});
				}).bind('mouseleave',function(){
					var $elem = $(this);
					var $sub_menu = $elem.find('.sdt_box');
					if($sub_menu.length)
						$sub_menu.hide().css('left','0px');
					
					$elem.find('.sdt_active')
						 .stop(true)
						 .animate({'height':'0px'},300)
						 .andSelf().find('img')
						 .stop(true)
						 .animate({
							'width':'0px',
							'height':'0px',
							'left':'85px'},400)
						 .andSelf()
						 .find('.sdt_wrap')
						 .stop(true)
						 .animate({'top':'15px'},500);
				});
            });
        </script>

So basically I tried (I'n very noob fashion I'm sure) to change the function .bind to .click simply. Did not work. Also I tried messing around with the "mouseover" and "mouseleave" events and replaced them with onclick and click and other things.

From what I can see a problem may be that the hover animation functions practically run simultaneously. One condition, "mouseleave" only being possible if of course the "mouseenter" event happened, however if we are converting this to 'click' then obviously we cant run both animations at the same time given a single click--nothing happens as I've seen.

So I'm guessing we have to separate the animation functions?

Here is the actual HTML menu for reference:
Code:
<div id="menu">
       <ul id="sdt_menu" class="sdt_menu">
	<li>
	<a href="#">
	<img src="images/1.jpg" alt=""/>
	<span class="sdt_active"></span>
	<span class="sdt_wrap">
           <span class="sdt_link">Websites</span>
	<span class="sdt_descr">Website Portfolio</span>
	</span>
	</a>
                                        
	</li>
	<li>
	<a href="#">
	<img src="images/2.jpg" alt=""/>
	<span class="sdt_active"></span>
	<span class="sdt_wrap">
	<span class="sdt_link">Designs</span>
	<span class="sdt_descr">Other Graphic Art</span>
	</span>
	</a>
	<div class="sdt_box">
	<a href="#">Illustrations</a>
           <a href="#">Commission</a>
	</div>
	</li>
	<li>
	<a href="#">
	<img src="images/3.jpg" alt=""/>
	<span class="sdt_active"></span>
	<span class="sdt_wrap">
	<span class="sdt_link">Skills</span>
	<span class="sdt_descr">What I do</span>
	</span>
	</a>
	</li>
	<li>
	<a href="#">
	<img src="images/4.jpg" alt=""/>
	<span class="sdt_active"></span>
	<span class="sdt_wrap">
	<span class="sdt_link">About</span>
	<span class="sdt_descr">My Bio</span>
	</span>
	</a>
	</li>
	<li>
	<a href="ajax/content4-broken.html">
	<img src="images/5.jpg" alt=""/>
	<span class="sdt_active"></span>
	<span class="sdt_wrap">
	<span class="sdt_link">Contact</span>
	<span class="sdt_descr">Inquire for work</span>
	</span>
	</a>
	</li>
                                    
				
	</ul>
            
                </div>
It would be nice also to have a part of the JS code to include an automatic timer to roll the menu back after a few seconds after it's dropped down if no click happens to do so too....but I know I need to read up on Js more in the mean time to really get fancy. Right now, I would appreciate any help in understanding these problems if they can be helped.