-1

次のメニューバーを追加したいのですが、スライドダウンが非常に大きく、スライドのサイズを縮小したいです。いろいろ試しましたがうまくいきませんでした。助けてください

アニメーションメニュー.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>
4

1 に答える 1

0

私はおそらく間違っていると理解していますが、ドロップダウンのサイズを小さくしたい場合は、javascriptコードの150pxを少し小さいものに編集しますか？

于 2012-08-10T08:06:31.297 に答える