reicictarve
New Member
I created a menu item with jqury and CSS.When I go to a one menu item I want to go for anothe sub menu Item as i shown in below image.How can I do that..?here is my html code<link rel="stylesheet" href="http://stackoverflow.com/questions/11533903/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/11533903/#"> <img src="http://stackoverflow.com/questions/11533903/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/11533903/#"> <img src="http://stackoverflow.com/questions/11533903/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/11533903/#"><img src="http://stackoverflow.com/questions/11533903/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/11533903/#">Illustrations</a> <a href="http://stackoverflow.com/questions/11533903/#">Photography</a> <div class="sdt_box"> <a href="http://stackoverflow.com/questions/11533903/#">Retentionss </a> <a href="http://stackoverflow.com/questions/11533903/#">Illustrations</a> <a href="http://stackoverflow.com/questions/11533903/#">Photography</a> </div> </div> </li> <li> <a href="http://stackoverflow.com/questions/11533903/#"> <img src="http://stackoverflow.com/questions/11533903/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/11533903/#">Websites</a> <a href="http://stackoverflow.com/questions/11533903/#">Illustrations</a> <a href="http://stackoverflow.com/questions/11533903/#">Photography</a> </div> </li> <li> <a href="http://stackoverflow.com/questions/11533903/#"> <img src="http://stackoverflow.com/questions/11533903/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/11533903/#">Websites</a> <a href="http://stackoverflow.com/questions/11533903/#">Illustrations</a> <a href="http://stackoverflow.com/questions/11533903/#">Photography</a> </div> </li> <li> <a href="http://stackoverflow.com/questions/11533903/#"> <img src="http://stackoverflow.com/questions/11533903/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/11533903/#">Websites</a> <a href="http://stackoverflow.com/questions/11533903/#">Illustrations</a> <a href="http://stackoverflow.com/questions/11533903/#">Photography</a> </div> </li> <li> <a href="http://stackoverflow.com/questions/11533903/#"> <img src="http://stackoverflow.com/questions/11533903/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/11533903/#">Websites</a> <a href="http://stackoverflow.com/questions/11533903/#">Illustrations</a> <a href="http://stackoverflow.com/questions/11533903/#">Photography</a> </div> </li> <li> <a href="http://stackoverflow.com/questions/11533903/#"> <img src="http://stackoverflow.com/questions/11533903/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/11533903/#">Job Board Website</a> <a href="http://stackoverflow.com/questions/11533903/#">Shopping Cart</a> <a href="http://stackoverflow.com/questions/11533903/#">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
ointer;}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 jqury <!-- The JavaScript --> <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>
ointer;}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 jqury <!-- The JavaScript --> <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>