Result

jQuery

    $(document).ready(function() {
     
        //ストライプを作成
        $('ul#menu li:even').addClass('even');
         
        //マウスホバーイベント
        $('ul#menu li a').mouseover(function() {
         //アニメーションでpaddingを与えたり外したり
            $(this).animate({paddingLeft:"25px"},{queue:false,duration:200});
        }).mouseout(function(){
            $(this).animate({paddingLeft:"0"},{queue:true,duration:300});
        }).click(function(){
            $(this).animate({fontSize:"25px"},{queue:false,duration:200});
        });     
    });

css

ul#menu {
    margin:0;
    padding:0;
    width:180px;
    border:1px solid #ddd;
    list-style:none;    
    background-color:#eee;
}
 
ul#menu li {
    margin:0;
    padding:5px 0 5px 20px;
    border-bottom:1px solid #ddd;    
    font-family:arial;
    font-size:15px;
    font-weight:700;
    color:#F6EFDC;
}
 
ul#menu li:first-child {
    border-top:none
}
 

ul#menu li a {
    color:#F6EFDC;
    text-decoration:none;   
    padding-right:100px;
    white-space:nowrap;
}
 
ul#menu li a {
    color:#666;
    text-decoration:none;
}
 
.even {
    background-color:#666;
    
}
ul#menu li.even a{
color:#eee;
}
 
*html ul#menu li a {
    padding-right:60px !important
}
 

html

   <ul id="menu">
    <li><a href="javascript:void(0);">List01</a></li>
    <li><a href="javascript:void(0);">List02</a></li>
    <li><a href="javascript:void(0);">List03</a></li>
    <li><a href="javascript:void(0);">List04</a></li>
    <li><a href="javascript:void(0);">List05</a></li>
    <li><a href="javascript:void(0);">List06</a></li>
   </ul>

via

Navigation List menu + jQuery Animate Effect Tutorial | Queness

Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7

Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.32-2/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7