CODEWITHSUNDEEP
jquery
InglaDesign בניית אתרים
InglaDesign בניית אתרים

Reputation: 13

ul li show/hide with jQuery

I'm Trying to create A drop down menu.

but i couldn't get the sub menu item to hide on mouseout.

It hides itself on every move

My jQuery code:

<script type="text/javascript">
    $(document).ready(function() {
        $('ul ul').hide();
        $('ul li.top_menu_first a').removeAttr("href");
        $('ul li.top_menu_first > a').mouseover(function(event) {
            $(this).parent().find('ul').show('slow');
        });

        $('ul li.top_menu_first ul').mouseout(function(event) {
            $('ul ul').hide('slow');
        });
    });
</script>

My HTMLcode:

<div id="top_menu">
    <ul>
        <li class="top_menu_first"><a href="http://google.com">ABC</a>
            <ul>
                <li><a>1</a></li>
                <li><a>2</a></li>
                <li><a>3</a></li>
            </ul>
        </li>   
        <li class="top_menu_first"><a>DEF</a></li>
        <li class="top_menu_first"><a>GHI</a></li>
        <li class="top_menu_first"><a>JKL</a>
            <ul>
                <li><a>4</a></li>
                <li><a>5</a></li>
                <li><a>6</a></li>
            </ul>
        </li>   
        <li class="top_menu_first"><a>MNO</a>
            <ul>
                <li><a>7</a></li>
                <li><a>8</a></li>
            </ul>
        </li class="top_menu_first">
    </ul>
</div>
<div id="footer"></div>

Please if anyone can help

Upvotes: 1

Views: 2418

Answers (2)

elclanrs
elclanrs

Reputation: 94101

I don't think you need jQuery for this. Try to get it working with just CSS first, it's the logical step. If you need animations use CSS3 transitions, and jQuery just as fallback for old browsers if you really need the animations, otherwise just let it be, old browser just won't animate the opacity, no big deal.

Demo: http://jsbin.com/uqebor/9/edit

ul.menu,
ul.menu ul {
  position: relative;
  list-style: none;
  padding: 0;
  -webkit-transition: opacity .3s ease-in-out;
  -moz-transition: opacity .3s ease-in-out;
}
ul.menu li {
  margin: 1px 0;
}
ul.menu > li {
  float: left;
  margin: 0 .5em;
}
ul.menu a {
  text-decoration: none;
  display: block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid black;
  background: white;
}
ul.menu ul {
  visibility: hidden;
  height: 0;
  width: 0;
  opacity: 0;
}
ul.menu li:hover ul {
  width: auto;
  height: auto;
  visibility: visible;
  opacity: 1;
}

Upvotes: 0

raam86
raam86

Reputation: 6871

Your code keeps track of the sub menu mouseOut . I assume you want the sub menu to hide when it's mouse out from menu name.

delete ul from $('ul li.top_menu_first ul').mouseout(function(event) {( http://jsfiddle.net/qgbtd/) Make sure you are loading jquery in your HTML Also like the comments say using mouseleave() gives it a nicer behavior

Upvotes: 1

Related Questions