Databases
StackOverflow2013
Postsdbo
POI want to add a sub element to my menu items in jQuery and css
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POI want to add a sub element to my menu items in jQuery and css
    primarykey
    data
    text
    <p>I created a menu item with jQuery and CSS. When I go to a one menu item I want to go for another sub menu item as shown in below image. How can I do that?</p> <p><img src="https://i.stack.imgur.com/i8noO.png" alt="enter image description here"></p> <p>Here is my html markup</p> <pre><code>&lt;link rel="stylesheet" href="css/style_j.css" type="text/css" media="screen"/&gt; &lt;div class="content"&gt; &lt;ul id="sdt_menu" class="sdt_menu"&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="SlideDownBoxMenu2/images/2.jpg" alt=""/&gt; &lt;span class="sdt_active"&gt;&lt;/span&gt; &lt;span class="sdt_wrap"&gt; &lt;span class="sdt_link"&gt;Home&lt;/span&gt; &lt;span class="sdt_descr"&gt;Home&lt;/span&gt; &lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="SlideDownBoxMenu2/images/1.jpg" alt=""/&gt; &lt;span class="sdt_active"&gt;&lt;/span&gt; &lt;span class="sdt_wrap"&gt; &lt;span class="sdt_link"&gt;File Managements&lt;/span&gt; &lt;span class="sdt_descr"&gt;File Managements&lt;/span&gt; &lt;/span&gt; &lt;/a&gt; &lt;div class="sdt_box"&gt; &lt;a href="#"&gt;&lt;img src="SlideDownBoxMenu2/images/1.jpg" alt=""/&gt; &lt;span class="sdt_active"&gt;&lt;/span&gt; &lt;span class="sdt_wrap"&gt; &lt;span class="sdt_link"&gt;Retention&lt;/span&gt; &lt;span class="sdt_descr"&gt;Retention&lt;/span&gt; &lt;/span&gt; &lt;/a&gt; &lt;a href="#"&gt;Illustrations&lt;/a&gt; &lt;a href="#"&gt;Photography&lt;/a&gt; &lt;div class="sdt_box"&gt; &lt;a href="#"&gt;Retentionss &lt;/a&gt; &lt;a href="#"&gt;Illustrations&lt;/a&gt; &lt;a href="#"&gt;Photography&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="SlideDownBoxMenu2/images/1.jpg" alt=""/&gt; &lt;span class="sdt_active"&gt;&lt;/span&gt; &lt;span class="sdt_wrap"&gt; &lt;span class="sdt_link"&gt;Portfolio&lt;/span&gt; &lt;span class="sdt_descr"&gt;My work&lt;/span&gt; &lt;/span&gt; &lt;/a&gt; &lt;div class="sdt_box"&gt; &lt;a href="#"&gt;Websites&lt;/a&gt; &lt;a href="#"&gt;Illustrations&lt;/a&gt; &lt;a href="#"&gt;Photography&lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="SlideDownBoxMenu2/images/1.jpg" alt=""/&gt; &lt;span class="sdt_active"&gt;&lt;/span&gt; &lt;span class="sdt_wrap"&gt; &lt;span class="sdt_link"&gt;Portfolio&lt;/span&gt; &lt;span class="sdt_descr"&gt;My work&lt;/span&gt; &lt;/span&gt; &lt;/a&gt; &lt;div class="sdt_box"&gt; &lt;a href="#"&gt;Websites&lt;/a&gt; &lt;a href="#"&gt;Illustrations&lt;/a&gt; &lt;a href="#"&gt;Photography&lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="SlideDownBoxMenu2/images/1.jpg" alt=""/&gt; &lt;span class="sdt_active"&gt;&lt;/span&gt; &lt;span class="sdt_wrap"&gt; &lt;span class="sdt_link"&gt;Portfolio&lt;/span&gt; &lt;span class="sdt_descr"&gt;My work&lt;/span&gt; &lt;/span&gt; &lt;/a&gt; &lt;div class="sdt_box"&gt; &lt;a href="#"&gt;Websites&lt;/a&gt; &lt;a href="#"&gt;Illustrations&lt;/a&gt; &lt;a href="#"&gt;Photography&lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="SlideDownBoxMenu2/images/1.jpg" alt=""/&gt; &lt;span class="sdt_active"&gt;&lt;/span&gt; &lt;span class="sdt_wrap"&gt; &lt;span class="sdt_link"&gt;Portfolio&lt;/span&gt; &lt;span class="sdt_descr"&gt;My work&lt;/span&gt; &lt;/span&gt; &lt;/a&gt; &lt;div class="sdt_box"&gt; &lt;a href="#"&gt;Websites&lt;/a&gt; &lt;a href="#"&gt;Illustrations&lt;/a&gt; &lt;a href="#"&gt;Photography&lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#"&gt; &lt;img src="SlideDownBoxMenu2/images/6.jpg" alt=""/&gt; &lt;span class="sdt_active"&gt;&lt;/span&gt; &lt;span class="sdt_wrap"&gt; &lt;span class="sdt_link"&gt;Projects&lt;/span&gt; &lt;span class="sdt_descr"&gt;I like to code&lt;/span&gt; &lt;/span&gt; &lt;/a&gt; &lt;div class="sdt_box"&gt; &lt;a href="#"&gt;Job Board Website&lt;/a&gt; &lt;a href="#"&gt;Shopping Cart&lt;/a&gt; &lt;a href="#"&gt;Interactive Maps&lt;/a&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div&gt; &lt;span class="reference"&gt; &lt;/span&gt; &lt;/div&gt; </code></pre> <p>Here is my CSS:</p> <pre><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 &gt; 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; } </code></pre> <p>Here is my Javascript code with jQuery:</p> <pre><code> &lt;!-- The JavaScript --&gt; &lt;script type="text/javascript"&gt; $(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 &gt; 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); }); }); &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USmarc_s
    1. USLahiru Chathuranga
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POI want to add a sub element to my menu items in jQuery and css
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POI want to add a sub element to my menu items in jQuery and css
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POI want to add a sub element to my menu items in jQuery and css
      1. This table or related slice is empty.
      1. VTUpMod
    1. COWhy don't you just organize it all into one list?
      singulars
      1. POI want to add a sub element to my menu items in jQuery and css
      1. USChad
    2. COHello now check to this and do http://jsfiddle.net/rohitazad/3qPbE/11/
      singulars
      1. POI want to add a sub element to my menu items in jQuery and css
      1. USRohit Azad
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload