Create Drill Menu

Question

I have a div called subMenuRigth , this div inside the <li> that I want to execute is that the div appears next to the div called subMenu , which I tried to use in different ways, but it isn’t, t, it shows does not contain.

this is my html

 <div id="menu" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"> <label class="formatText" id="lblIndicators">Tal</label> <span class="ui-icon ui-icon-triangle-1-e menuIcon" style="float:right"></span> <div id="subMenu" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"> <ul class="options"> <li> <label class="formatText">SubTal</label> <span class="ui-icon ui-icon-triangle-1-s" style="float:right"></span> <div id="subMenuRight" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"> <ul class=options> <li>hi</li> <li>bye</li> </ul> </div> </li> <li>algo</li> </ul> </div> </div> 

this my css

 #menu { width:150px; } #subMenu { display:none; width:149px; } #subMenuRight { display:none; width:150px; float:rigth; } 

my js

 $(document).ready(initialize); function initialize(){ $("#menu").hover(mouseIn,mouseOut); $(".options li").hover(overOption,outOption); $(".subMenu").hover(openRigthMenu,closeRigthMenu); } function mouseIn(){ $(this).find('span').attr('class',''); $(this).find('span').attr('class','ui-icon ui-icon-triangle-1-s'); $("#subMenu").slideDown(100); } function mouseOut(){ $(this).find('span').attr('class',''); $(this).find('span').attr('class','ui-icon ui-icon-triangle-1-e'); $("#subMenu").fadeOut(100); } function overOption(){ $(this).attr('class','ui-state-hover ui-corner-all'); } function outOption(){ $(this).attr('class',''); } function openRigthMenu(){ $("#subMenuRight").css('display','block'); $("#subMenuRight").css('outline','0'); $("#subMenuRight").slideDown(100); } function closeRegithMenu(){ $("#subMenuRight").slideUp(100); } 

My live demo

Answer 1

After fixing a typo:

 #subMenuRight { display:none; width:150px; position:absolute; left:100%; top:0px; } .options{ position:relative; } 

and the result was ..... (drum roll)

http://jsfiddle.net/ZxvkN/

It was strict !;)

Answer 2

The following is a working example after changing the original live demo : a live live demo

First, you access your subMenu in javascript by class, not by id. Then I updated CSS a bit to set the positioning correctly.

Answer 3

You can view a working example at: http://jsfiddle.net/CyjfU/

The solution essentially requires two parts: 1) css styling; 2) modified structured;

CSS

 #subMenu { display:none; width:149px; position: relative; } #subMenuRight { display:none; width:150px; position: absolute; top: 0px; left: 150px; } 

The key with css sets the positioning of the elements. The first positioning to establish is the value of #subMenu . You want to set the position position: relative; . The second part is with #subMenuRight . You want to set position: absolute; for this place position: absolute; (if the parent element was not relative, then this parameter will default to the nearest parent property - which does not currently exist, so it will be placed as absolute in the body. You will also want to set the position of the absolute element by declaring top: 0px; left: 150px; This sets the top position to 0px to align the upper edges and indents on the left by 150 pixels.

Part of the structure contains two parts: a) HTML; b) JavaScript

HTML:

Added subSubMenu class in li containing your true submenu.

JavaScript:

Changed: $(".subMenu").hover(openRigthMenu,closeRigthMenu); up to $(".subSubMenu").hover(openRightMenu,closeRightMenu);

Answer 4

There are a few things that are not entirely clear. For example, you will have more than 1 submenu. Also, if you want it to be in addition to the subMenu div class, why is it so deeply embedded in the tree hierarchy ?.

However, to get back to what you want to achieve, you can add the following:

 #subMenu { position: relative; } #subMenuRight { position: absolute; top: 0; } 

This will fix, but I don’t think that this is exactly what you are looking for, as if you had several submenus, all of them would be stacked on top of each other. Maybe you should create a sibling in subMenu, where would you put all your subMenuRight elements?

Another answer might be to change your subMenu to a <ul> and inside create a <li> with 2 divs, 1 is the content, the other is your subMenuRight.