Red-Spiral
New Member
I created a menu item with jQuery and CSS. When I go to a menu item I want to go for another submenu item as shown in the image below. How can I do that?Here is my HTML code:<link rel="stylesheet" href="http://stackoverflow.com/questions/11539962/css/style_j.css" type="text/css" media="screen"/><div class="content"><ul id="sdt_menu" class="sdt_menu"> <li> <a href="http://stackoverflow.com/questions/11539962/#"> <img src="http://stackoverflow.com/questions/11539962/SlideDownBoxMenu2/images/2.jpg" alt=""/> <span class="sdt_active"></span> <span class="sdt_wrap"> <span class="sdt_link">Home</span> <span class="sdt_descr">Home</span> </span> </a> </li> <li> <a href="http://stackoverflow.com/questions/11539962/#"> <img src="http://stackoverflow.com/questions/11539962/SlideDownBoxMenu2/images/1.jpg" alt=""/> <span class="sdt_active"></span> <span class="sdt_wrap"> <span class="sdt_link">File Managements</span> <span class="sdt_descr">File Managements</span> </span> </a> <div class="sdt_box"> <a href="http://stackoverflow.com/questions/11539962/#"><img src="http://stackoverflow.com/questions/11539962/SlideDownBoxMenu2/images/1.jpg" alt=""/> <span class="sdt_active"></span> <span class="sdt_wrap"> <span class="sdt_link">Retention</span> <span class="sdt_descr">Retention</span> </span> </a> <a href="http://stackoverflow.com/questions/11539962/#">Illustrations</a> <a href="http://stackoverflow.com/questions/11539962/#">Photography</a> <div class="sdt_box"> <a href="http://stackoverflow.com/questions/11539962/#">Retentionss </a> <a href="http://stackoverflow.com/questions/11539962/#">Illustrations</a> <a href="http://stackoverflow.com/questions/11539962/#">Photography</a> </div> </div> </li> <li> <a href="http://stackoverflow.com/questions/11539962/#"> <img src="http://stackoverflow.com/questions/11539962/SlideDownBoxMenu2/images/1.jpg" alt=""/> <span class="sdt_active"></span> <span class="sdt_wrap"> <span class="sdt_link">Portfolio</span> <span class="sdt_descr">My work</span> </span> </a> <div class="sdt_box"> <a href="http://stackoverflow.com/questions/11539962/#">Websites</a> <a href="http://stackoverflow.com/questions/11539962/#">Illustrations</a> <a href="http://stackoverflow.com/questions/11539962/#">Photography</a> </div> </li> <li> <a href="http://stackoverflow.com/questions/11539962/#"> <img src="http://stackoverflow.com/questions/11539962/SlideDownBoxMenu2/images/1.jpg" alt=""/> <span class="sdt_active"></span> <span class="sdt_wrap"> <span class="sdt_link">Portfolio</span> <span class="sdt_descr">My work</span> </span> </a> <div class="sdt_box"> <a href="http://stackoverflow.com/questions/11539962/#">Websites</a> <a href="http://stackoverflow.com/questions/11539962/#">Illustrations</a> <a href="http://stackoverflow.com/questions/11539962/#">Photography</a> </div> </li> <li> <a href="http://stackoverflow.com/questions/11539962/#"> <img src="http://stackoverflow.com/questions/11539962/SlideDownBoxMenu2/images/1.jpg" alt=""/> <span class="sdt_active"></span> <span class="sdt_wrap"> <span class="sdt_link">Portfolio</span> <span class="sdt_descr">My work</span> </span> </a> <div class="sdt_box"> <a href="http://stackoverflow.com/questions/11539962/#">Websites</a> <a href="http://stackoverflow.com/questions/11539962/#">Illustrations</a> <a href="http://stackoverflow.com/questions/11539962/#">Photography</a> </div> </li> <li> <a href="http://stackoverflow.com/questions/11539962/#"> <img src="http://stackoverflow.com/questions/11539962/SlideDownBoxMenu2/images/1.jpg" alt=""/> <span class="sdt_active"></span> <span class="sdt_wrap"> <span class="sdt_link">Portfolio</span> <span class="sdt_descr">My work</span> </span> </a> <div class="sdt_box"> <a href="http://stackoverflow.com/questions/11539962/#">Websites</a> <a href="http://stackoverflow.com/questions/11539962/#">Illustrations</a> <a href="http://stackoverflow.com/questions/11539962/#">Photography</a> </div> </li> <li> <a href="http://stackoverflow.com/questions/11539962/#"> <img src="http://stackoverflow.com/questions/11539962/SlideDownBoxMenu2/images/6.jpg" alt=""/> <span class="sdt_active"></span> <span class="sdt_wrap"> <span class="sdt_link">Projects</span> <span class="sdt_descr">I like to code</span> </span> </a> <div class="sdt_box"> <a href="http://stackoverflow.com/questions/11539962/#">Job Board Website</a> <a href="http://stackoverflow.com/questions/11539962/#">Shopping Cart</a> <a href="http://stackoverflow.com/questions/11539962/#">Interactive Maps</a> </div> </li> </ul></div><div> <span class="reference"></span></div>Here is my CSS code:ul.sdt_menu{ margin: 0; padding: 0; list-style: none; font-family: "Myriad Pro", "Trebuchet MS", sans-serif; font-size: 14px; width: 1020px;}ul.sdt_menu a{ text-decoration: none; outline: none;}ul.sdt_menu li{ float: left; width: 138px; height: 40px; position: relative; cursor: pointer;}ul.sdt_menu li > a{ position: absolute; top: 0px; left: 0px; width: 138px; height: 57px; z-index: 12; -moz-box-shadow: 0px 0px 2px #000 inset; -webkit-box-shadow: 0px 0px 2px #000 inset; box-shadow:0px 0px 2px #000 inset;}ul.sdt_menu li a img{ border: none; position: absolute; width: 0px; height: 0px; bottom: 0px; left: 57px; z-index: 100; -moz-box-shadow: 0px 0px 4px #000; -webkit-box-shadow: 0px 0px 4px #000; box-shadow: 0px 0px 4px #000;}ul.sdt_menu li span.sdt_wrap{ position: absolute; top: 20px; left: 0px; width: 138px; height: 57px; z-index: 15;}ul.sdt_menu li span.sdt_active{ position: absolute; background: #111; top: 57px; width: 138px; height: 0px; left: 0px; z-index: 14; -moz-box-shadow: 0px 0px 4px #000 inset; -webkit-box-shadow: 0px 0px 4px #000 inset; box-shadow:0px 0px 4px #000 inset;}ul.sdt_menu li span span.sdt_link,ul.sdt_menu li span span.sdt_descr,ul.sdt_menu li div.sdt_box a{ margin-left: 10px; text-transform: uppercase; text-shadow: 1px 1px 1px #000; margin-top: -10px;}ul.sdt_menu li span span.sdt_link{ color: #fff; font-size: 14px; float: left; clear: both;}ul.sdt_menu li span span.sdt_descr{ color: #0B75AF; float: left; clear: both; width: 155px; /*For dumbass IE7*/ font-size: 10px; letter-spacing: 0px; margin-top: 0px; margin-left: -8px;}ul.sdt_menu li div.sdt_box{ display: block; position: absolute; width: 138px; overflow: hidden; height: 138px; top: 57px; left: 0px; display: none; background: #000;}ul.sdt_menu li div.sdt_box a{ float: left; clear: both; line-height: 30px; color: #0B75AF;}ul.sdt_menu li div.sdt_box a:first-child{ margin-top: 15px;}ul.sdt_menu li div.sdt_box a:hover{ color: #fff;}Here is my Javascript code with jQuery<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':'138px', 'height':'57px', 'left':'0px' },400,'easeOutBack') .andSelf() .find('.sdt_wrap') .stop(true) .animate({'top':'140px'},500,'easeOutBack') .andSelf() .find('.sdt_active') .stop(true) .animate({'height':'138px'},300,function(){ var $sub_menu = $elem.find('.sdt_box'); if($sub_menu.length){ var left = '138px'; if($elem.parent().children().length == $elem.index()+1) left = '-138px'; $sub_menu.show().animate({'left':left},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':'25px'},500); }); });</script>