jQuery制作垂直箭头菜单.zip资源-CSDN文库

共10个文件

gif：3个

js：2个

psd：1个

版权申诉

javascript

html5

jQuery

195 浏览量 2022-11-24 12:30:44 上传评论收藏 55KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery制作垂直箭头菜单.zip （10个子文件）

jQuery制作垂直箭头菜单

jQuery制作垂直箭头菜单.jpg 36KB

jQueryVerticalMenu

menu.psd 37KB

bg_hover.gif 682B

arrow.png 1KB

index.html 3KB

arrow.gif 1021B

.DS_Store 6KB

jquery-1.3.1.min.js 54KB

jquery.easing.1.3.js 8KB

bg.gif 622B

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>清晰和完美的jQuery垂直菜单</title> <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script> $(document).ready(function () { //Set the height of the block $('#menu .block').height($('#menu li').height()); //go to the default selected item topval = $('#menu .selected').position()['top']; $('#menu .block').stop().animate({top: topval}, {easing: '', duration:500}); $('#menu li').hover( function() { //get the top position topval = $(this).position()['top']; //animate the block //you can add easing to it $('#menu .block').stop().animate({top: topval}, {easing: '', duration:500}); //add the hover effect to menu item $(this).addClass('hover'); }, function() { //remove the hover effect $(this).removeClass('hover'); } ); }); </script> <style> #menu { font-family:verdana; font-size:12px; position:relative; margin:0 auto; width:200px; } #menu ul { /* remove list style */ list-style:none; padding:0; margin:0; /* set the layer position */ position:relative; z-index:5; } #menu li { /* set the styles */ background:#ccc url(bg.gif) no-repeat 0 0; padding:5px; margin:2px; cursor:pointer; border:1px solid #ccc; } #menu li.hover { /* on hover, change it to this image */ background-image:url(bg_hover.gif) !important; } #menu li a { text-decoration:none; color:#888; } #menu .block { /* allow javascript to move the block */ position:absolute; top:0; /* set the left position */ left:150px; /* display above the #menu */ z-index:10; /* the image and the size */ background:transparent url(arrow.png) no-repeat top right; width:39px; padding:4px; cursor:pointer; } /* fast png fix for ie6 */ * html .png{ position:relative; behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)); } </style> </head> <body> <br/><br/><br/> <div id="menu"> <ul> <li><a href="#">Item 01</a></li> <li><a href="#">Item 02</a></li> <li class="selected"><a href="#">Item 03</a></li> <li><a href="#">Item 04</a></li> <li><a href="#">Item 05</a></li> <li><a href="#">Item 05</a></li> </ul> <div class="block png"></div> </div> </body> </html>

评论收藏

内容反馈

版权申诉