JQuery slideUp horizontal menu instead of slideDown_问答_开发者

JQuery slideUp horizontal menu instead of slideDown

开发者 https://www.devze.com 2023-01-26 08:39 出处：网络

I have this menu : <html> <head> <script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js\"></script>

相关专题：css jquery

I have this menu :

<html>
 <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
  <script>
   $(function() {
    $("#menu").find("li").each(function() {
     if ($(this).find("ul").length > 0) {
      $(this).mouseenter(function() {
       $(this).find("ul").stop(true, true).slideDown(); 
      }); 
      $(this).mouseleave(function() {  
       $(this).find("ul").stop(true, true).slideUp();  
      });
     }
    });
   });
  </script>
  <style>
   #menu {
    display:block;
    margin:120px auto 20px;
    border:1px solid #222;
    position:relative;
    background-color:#6a6a6a;
    font:16px Tahoma, Sans-serif;
   }  
   #menu ul {
    padding:0;
    margin:0;
   }  
   #menu li {
    position:relative;
    float:left;
    list-style-type:none;
   }  
   #menu ul:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
   }  
   #menu li a {
    display:block;
    padding:10px 20px;
    border-left:1px solid #999;
    border-right:1px solid #222;
    color:#eee;
    text-decoration:none;
   }  
   #menu li a:focus {
    outline:none;
    text-decoration:underline;
   }  
   #menu li:first-child a {
    border-left:none;
   }  
   #menu li.last a {
    border-right:none;
   }  
   #menu a span {
    display:block;
    float:right;
    margin-left:5px;
   }  
   #menu ul ul {
    display:none;
    width:100%;
    position:absolute;
    left:0;
    background:#6a6a6a;
   }  
   #menu ul ul li {
    float:none;
   }  
   #menu ul ul a {
    padding:5px 10px;
    border-left:none;
    border-right:none;
    font-size:14px;
   }

   a:hover {
    cursor: pointer;
   }
  </style>
 </head>
 <body>
  <div id="menu">
   <ul>
    <li>
     <a>Item1</a>
 开发者_如何转开发   </li>
    <li>
     <a>Item2</a>
     <ul>
      <li><a href="#">item2-1</a></li>
      <li><a href="#">item2-2</a></li>
      <li><a href="#">item2-3</a></li>
     </ul>
    </li>
   <li>
    <a>Item3</a>
    <ul>
     <li><a href="#">item3-1</a></li>
     <li><a href="#">item3-2</a></li>
     <li><a href="#">item3-3</a></li>
    </ul>
   </li>
   <li>
    <a>Item4</a>
   </li>
  </ul>
 </div>
 <body>
<html>

It slides down when the cursor is over a li that contains a ul.

I want the submenu to slide up above the horizontal menu instead of sliding down under.

How can I achieve this ?

Thank you!

Here's the jsFiddle

#menu ul ul {
    bottom:38px;
}

setting the bottom of the nested lists does the trick

I'm not entirely sure what the issue is, but you should be able to reduce your code down to this using a more complex selector:

$("#menu > ul > li:has(ul)").mouseenter(function() { 
    $(this).find("ul").stop(true, true).slideDown();  
}).mouseleave(function() {  
    $(this).find("ul").stop(true, true).slideUp();  
});

EDIT: I see, you want the physical direction of the menu to go up instead of down. To do this, your menus will need to be absolutely positioned at the bottom. Then a height change will make them go up.

Example: http://jsfiddle.net/BKLjs/

#menu ul ul {
    display:none;
    width:100%;
    position:absolute;
    left:0;
    bottom: 40px;
    background:#6a6a6a;
}

Here's a little further code reduction: http://jsfiddle.net/BKLjs/2/

$("#menu > ul > li:has(ul)").hover(function(e) { 
    $(this).find("ul").stop(true, true)['slide' + (e.type === 'mouseenter' ? 'Down' : 'Up')]();  
});

http://jsfiddle.net/SebastianPataneMasuelli/LDQfW/10/

note: uses jquery UI:

.show("slide", { direction: "down" });
.hide("slide", { direction: "up" });

JQuery slideUp horizontal menu instead of slideDown

精彩评论

关注公众号

热门标签

图文推荐

JQuery slideUp horizontal menu instead of slideDown

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：