ansaurus

Question

Answer 1

+1 A:

First, correct your html markup, by using id and classes correctly.

Id are unique identifiers, they cannot be used more than once in the same html document. Use the class attribute for that. So far instance, replace <div id="subcontent_container"> by <div class="subcontent_container">

When that is done, update your question with the new html code, i'll update my answer with instructions on the next step.

pixeline 2009-10-15 11:02:35

sry man, was typing faster than my brain could keep up with there :)

LottoLuke 2009-10-15 11:47:13

Answer 2

A:

You would be better off with onmouseover/onmouseout as you have a callback state to hide the menu when the user is no longer hovering the LI.

// this will only work for hover
// you will need a separate binding on the A tag to make
// the panel stick
$('#navmain li').mouseover(function() {
    var id = $(this).attr('id');
    var subId = 'sub' + id;
    // show the sub menu
    $(subId).fadeIn(1, function() {
        // slide down top panel
        $('#toppanel').slideDown('fast');
    });
}, 
// this callback refers to the onmouseout state
function() {
    // hide the top panel
    $('#toppanel').slideUp('fast', function() {
        // hide content again
        $(subId).hide();
    });
});

It's also generally good practice to nest your second level nav inside your LI tag as a nested list, this would enable the mouseover state to carry over to hovering over the newly shown panel code (as it is a child of the LI, so you are still technically "onmouseover" of the containing LI block. This would unfortunately take some CSS restyling and absolute positioning on the nested UL, but IMO it would be worth the effort.

<div id="head_menu">
  <div id="navmain">
    <ul>
      <li id="menu1">
        <a class="open" href="#">Menu 1</a>
        <ul style="display:none">
          <li>
            <div id="submenu1" style="display:none;">
              <div class="subcontent_container">
                <h1>Head</h1>
                <p>content </p>
              </div>
              <div class="subcontent_container">more content</div>
            </div>
          </li>
        </ul>
      </li>
      <li id="menu2">
        <a class="open" href="#">Menu 2</a>
        <ul style="display:none">
          <li>
            <div id="submenu2" style="display:none;">
              <div class="subcontent_container">
                <h1>Head</h1>
                <p>content </p>
              </div>
              <div class="subcontent_container">more content</div>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

It has the added benefit of simplifying your jQuery and reducing some unnecessary tags.

// this version coupled with the above HTML changes
// will allow the UL panel to remain open until
// you mouse out
$('#navmain li').mouseover(function() {
    $(this).find('ul').slideDown('fast');
}, 
// this callback refers to the onmouseout state
function() {
    $(this).find('ul').slideUp('fast');
});

cballou 2009-10-15 12:40:22

Answer 3

A:

I believe when using the .hover event your formatting would need to be done like this:

function border() {
$('ELEMENT').hover(function () {
  $(this).stop().animate({height:"290"},200) },

function () {
  $(this).stop().animate({height:"150"},200)
  });
};

Using this format you should be able to plug in your functions and get the hovers to work on hoverin and hoverout. I will keep an eye on this post to see if any other questions arise. I hope this helps.

Slevin 2009-10-15 13:15:54

ansaurus

tags:

views:

answers:

change content of div on hover, jQuery

related questions