处理一个项目，想要添加以下菜单栏，并尽量减少向下滑动

working on a project, want to add following menu-bar with minimum slide down

本文关键字：菜单栏 添加 一个 项目 处理      更新时间：2023-09-26

我想添加以下菜单栏，但向下滑动非常大，我想减小幻灯片的大小，尝试了很多东西但没有用，请帮助

动画菜单.css

body{   
    font-family:"Lucida Grande", arial, sans-serif;   
    background:#F3F3F3;   
}   
ul{   
    margin:0;   
    padding:0;   
}   
li{   
    width:100px;   
    height:50px;   
    float:left;   
    color:#191919;   
    text-align:center;   
    overflow:hidden;   
}   
a{   
    color:#FFF;   
    text-decoration:none;   
}   
p{   
    padding:0px 5px;   
}   
.subtext{   
        padding-top:15px;   
}   
/*Menu Color Classes*/  
.green{background:#6AA63B;}   
.yellow{background:#FBC700;}   
.red{background:#D52100;}   
.purple{background:#5122B4;}   
.blue{background:#0292C0;}  `

动画菜单.js

$(document).ready(function(){   
    //When mouse rolls over   
    $("li").mouseover(function(){   
        $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing:                                                           
 'easeOutBounce'})   
    });   
   //When mouse is removed   
    $("li").mouseout(function(){   
        $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing:             
  'easeOutBounce'}) 
    });   
});

动画菜单.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
<title>Smooth Animated jQuery Menu</title>  
<link rel="stylesheet" href="animated-menu.css"/>    
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" 
 type="text/javascript"></script> 
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>  
<script src="animated-menu.js" type="text/javascript"></script>  
</head>  
<body>  
<p>Rollover a menu item to expand it.</p>  
 <ul>
   <li class="green"> 
        <p><a href="#">Home</a></p>  
        <p class="subtext">The front page</p> 
  </li>  
   <li class="yellow">  
       <p><a href="#">About</a></p>   
  <p class="subtext">More info</p>  
    </li>  
    <li class="red">  

        <p><a href="#">Contact</a></p>  
        <p class="subtext">Get in touch</p> 
    </li>  
  <li class="blue">  
       <p><a href="#">Submit</a></p>  
       <p class="subtext">Send us your stuff!</p> 
    </li>  
  <li class="purple"> 
        <p><a href="#">Terms</a></p>
    <p class="subtext">Legal things</p>  
   </li>  
   </ul>  .</body>  
</html>

我可能理解错了，但是如果您想减小下拉列表的大小，请将 javascript 代码中的 150px 编辑为更小的内容？

相关文章：