www.webdeveloper.com
Results 1 to 3 of 3

Thread: Need help converting Jscript menu from hover to click

Hybrid View

  1. #1
    Join Date
    May 2013
    Location
    Georgia, USA
    Posts
    3

    Question Need help converting Jscript menu from hover to click

    Hi everyone. I hope I can find some help with this or at least a direction to look in.

    I have wanted to use this really great jQuery menu I found available in my personal site and it works great. I just found a problem with I realized we can no longer rely on media queries in CSS to reformat the site to load a click activated menu (touch activated) when the browser detects a smaller screen size--the tablets out now are bigger than many laptops!

    Here is where the menu came from: http://tympanus.net/codrops/2010/07/...down-box-menu/

    I just want to know if there is a best route to take in trying to get this menu to be cross media functional, as in, having touch detection ability and beable load a click menu alternatively.

    Should I just figure out how to convert the menu to click activated?
    Or, is it easy to install a touch detection PHP code or javascript that would help, and if so, any recommendations?


    I know HTML, CSS and enough PHP/mySQL to do some damage but I am still learning Javascript and jQuery. If you'd like to just give a half-detailed reply that's fine. I just need enough to know what direction I should read up on.

    For reference I will post the coding in the next post below.

  2. #2
    Join Date
    May 2013
    Location
    Georgia, USA
    Posts
    3
    Sorry guys that link was bad here is the proper link to the menu code:

    http://tympanus.net/codrops/2010/07/...down-box-menu/


    I'm not just asking this for a single menu. I'd like to know what the current modern practices are dealing with this. The touch screen world and resolutions are developing so rapidly I'd like to get some pointers.

    Here is the code from my actual website if anyone wants to see the HTML and JS:

    Jquery:

    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>

    and here is the menu I was trying to use it in:
    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>
    Anyone have any helpful points? I've really had trouble getting anyone to reply to my questions on other forums. Thanks.

  3. #3
    Join Date
    May 2013
    Location
    Georgia, USA
    Posts
    3
    Really? I've been to several forums now looking for help on this. I would have guessed it was a fairly simple thing to explain for someone with expert knowledge unlike myself.

    Maybe what I'm trying to do is impossible I'll have to assume.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles