Javascript 在处理项目时，希望添加以下具有最小向下滑动的菜单栏_Javascript_Html_Css

Javascript 在处理项目时，希望添加以下具有最小向下滑动的菜单栏

javascript html css

Javascript 在处理项目时，希望添加以下具有最小向下滑动的菜单栏,javascript,html,css,Javascript,Html,Css,我想添加以下菜单栏，但“向下滑动”非常大，我想缩小幻灯片的大小，尝试了很多方法，但都不起作用，请帮助动画菜单.css body{ 字体系列：“Lucida Grande”，arial，无衬线；背景:#f3； } ul{ 保证金：0；填充：0； } li{ 宽度：100px；高度：50px；浮动：左；颜色：#191919；文本对齐：居中；溢出：隐藏； } a{ 颜色：#FFF；文字装饰：无； } p{ 填充：0px 5px； } .潜台词{ 填充顶部

我想添加以下菜单栏，但“向下滑动”非常大，我想缩小幻灯片的大小，尝试了很多方法，但都不起作用，请帮助

动画菜单.css

body{
字体系列：“Lucida Grande”，arial，无衬线；
背景:#f3；
}   
ul{
保证金：0；
填充：0；
}   
li{
宽度：100px；
高度：50px；
浮动：左；
颜色：#191919；
文本对齐：居中；
溢出：隐藏；
}   
a{
颜色：#FFF；
文字装饰：无；
}   
p{
填充：0px 5px；
}   
.潜台词{
填充顶部：15px；
}   
/*菜单颜色类*/
.green{背景：#6AA63B；}
.yellow{背景：#FBC700；}
.red{背景：#D52100；}
.purple{背景：#5122B4；}
.blue{背景：#0292C0；}`

动画-menu.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>


平滑动画jQuery菜单
滚动菜单项以将其展开。



头版



更多信息



联系



将您的资料发送给我们



法律事务

。

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