CODEWITHSUNDEEP
jqueryhtmlcss
Jorge
Jorge

Reputation: 18237

can't put two divs beside each other

I have two divs one inside of the other, now i want to put show the child div called subMenu appears beside the div father, when the event was mouseEnter in the div father called prueba. The event works well my problem it's with the css I'm stock. how can i solve this?

my html

<div id="prueba" class="ui-state-hover" style="width:150px;height:20px;float:left">category
</div>
<div style="float:left"> other thing </div>

My Js

$(document).ready(initialize);

function initialize() {
    $('#prueba').hover(showSubMenu, hideSubMenu);
}
function showSubMenu() {
    var subMenu = '<div id="subMenu" class="ui-state-hover" style="width:150px;position:relative;top:0px;left:100%">subCategory</div>';
    $('#prueba').append(subMenu);
}

function hideSubMenu() {
    $("#subMenu").remove();
}

here's my live demo

UPDATE I don't want that the div that have the text other thing move of his position. i want that subMenu appears over this div

Upvotes: 3

Views: 600

Answers (2)

ShankarSangoli
ShankarSangoli

Reputation: 69905

Instead of creating the submenu everytime, you can check if its exists just use it. In the hideSubMenu method instead or remove you can just hide it.

Try this

Working demo

  $(document).ready(initialize);

  function initialize() {
    $('#prueba').hover(showSubMenu, hideSubMenu);
  }
  function showSubMenu() {
    if($("#subMenu").length == 0){
       $(document.body).append('<div id="subMenu" class="ui-state-hover" style="width:150px; float: left;">subCategory</div>');
    }
      $("#subMenu").css({
          position:'absolute',
          top: $('#prueba').offset().top,
          left: ($('#prueba').offset().left + $('#prueba').width())
      }).show();
  }

  function hideSubMenu() {
    $("#subMenu").hide();
  }

Upvotes: 2

Brian Glaz
Brian Glaz

Reputation: 15676

Here you go, try this.

$(document).ready(initialize);

function initialize() {
    $('#prueba').hover(showSubMenu, hideSubMenu);
}
function showSubMenu() {
    var subMenu = '<div id="subMenu" class="ui-state-hover" style="width:150px; float: left; position: relative; top: -20px; left: 150px;">subCategory</div>';
    $('#prueba').append(subMenu);
}

function hideSubMenu() {
    $("#subMenu").remove();
}

new demo

Upvotes: 2

Related Questions