当我们在windows桌右键的时候，可以看见一堆菜单
在网页中，点击鼠标右键，也能看见一堆菜单
那我们能不能自己定义网站右键，自己做一个菜单呢？
下面是一个自己做的实例。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="keywords" content="<?=$page->keywords?>" /> 6 <meta name="description" content="<?=$page->description?>"/> 7 <title></title> 8 <link href="css/master.css" rel="stylesheet" type="text/css" /> 9 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 10 </head> 11 12 <body> 13 <div class="rmenu"> 14 <ul> 15 <li class="first_li"> 16 <a href="#" class="lev1_a"><p>查看(V)</p></a> 17 <dl> 18 <dd><a href="#"><span>大图标</span></a></dd> 19 <dd><a href="#"><span>中图标</span></a></dd> 20 <dd><a href="#"><span>小图标</span></a></dd> 21 <dd><a href="#"><span>没图标</span></a></dd> 22 </dl> 23 </li> 24 <li class="first_li"> 25 <a href="#" class="lev1_a"><p>排序方式(O)</p></a> 26 <dl> 27 <dd><a href="#"><span>名称</span></a></dd> 28 <dd><a href="#"><span>大小</span></a></dd> 29 <dd><a href="#"><span>修改日期</span></a></dd> 30 <dd><a href="#"><span>项目类型</span></a></dd> 31 </dl> 32 </li> 33 <li class="first_li"><a href="#" class="lev1_a"><p>刷新(E)</p></a></li> 34 <li class="first_li"><a href="#" class="lev1_a"><p>粘贴(P)</p></a></li> 35 <li class="first_li"><a href="#" class="lev1_a"><p>粘贴快捷方式(S)</p></a></li> 36 <li class="first_li"><a href="#" class="lev1_a"><p>撤销复制(O)</p></a></li> 37 <li class="first_li"> 38 <a href="#" class="lev1_a"><p>新建(W)</p></a> 39 <dl> 40 <dd><a href="#"><span>快捷方式</span></a></dd> 41 <dd><a href="#"><span>文件夹</span></a></dd> 42 <dd><a href="#"><span>记事本</span></a></dd> 43 <dd><a href="#"><span>PSD文档</span></a></dd> 44 <dd><a href="#"><span>EXCEL表格</span></a></dd> 45 <dd><a href="#"><span>WORD文档</span></a></dd> 46 </dl> 47 </li> 48 <li class="first_li"><a href="#" class="lev1_a"><p>屏幕分辨率(C)</p></a></li> 49 <li class="first_li"><a href="#" class="lev1_a"><p>个性化(R)</p></a></li> 50 </ul> 51 </div> 52 53 <script> 54 $(function(){ 55 $('.rmenu ul li:eq(1),.rmenu ul li:eq(5),.rmenu ul li:eq(6)').css({borderBottom:'solid 1px #ccc'}); 56 57 $('.rmenu ul li').each(function(i) { 58 if($(this).children('dl').size() > 0) 59 { 60 $(this).find('p').css({'background':'url(images/ico.png) right center no-repeat'}); 61 } 62 }); 63 64 $(document).bind('contextmenu',function(e){ 65 $cmenu = $('.rmenu'); 66 $('<div class="blanklayer"></div>').css({ 67 'width':'100%', 68 'height':'100%', 69 'position':'absolute', 70 'top':'0', 71 'left':'0', 72 'z-index':'100' 73 }).click(function(){ 74 $(this).remove(); 75 $cmenu.hide(); 76 }).bind('contextmenu',function(){return false;}).appendTo(document.body); 77 $(this).find('.rmenu').css({left:e.pageX,top:e.pageY,zIndex:101}).show(); 78 return false; 79 }); 80 81 $('.rmenu ul li').live('click',function(){ 82 if($(this).children().size() == 1) 83 { 84 alert($(this).children().text()); 85 $('.rmenu').hide(); 86 $('.blanklayer').hide(); 87 } 88 }); 89 90 $('.first_li dl dd').live('click',function(){ 91 alert($(this).text()); 92 $('.rmenu').hide(); 93 $('.blanklayer').hide(); 94 }); 95 96 $('.first_li,.first_li dl dd').hover( 97 function(){ 98 $(this).css({backgroundColor : '#E0EDFE' , cursor : 'pointer'}); 99 if($(this).children().size() > 0) 100 { 101 $(this).children('dl').show(); 102 } 103 }, 104 function(){ 105 $(this).css('background-color' , '#fff' ); 106 $(this).children('dl').hide(); 107 }); 108 109 }); 110 </script> 111 112 </body> 113 </html>
有reset style ，自己找一个就行
1 .rmenu {width:200px;height:auto;position:absolute;font:12px/30px 宋体;border:solid 1px #ccc;z-index:101;display:none;} 2 .rmenu ul {} 3 .rmenu ul li {width:200px;height:30px;position:relative;} 4 .rmenu ul li a.lev1_a {display:block;width:200px;height:30px;background:none;color:#555;} 5 .rmenu ul li a.lev1_a p {padding-left:15px;margin-right:10px;} 6 .rmenu ul li dl {position:absolute;left:195px;top:-5px;z-index:102;width:150px;border:solid 1px #ccc;display:none;background:#fff; box-shadow:0 0 5px #ccc;} 7 .rmenu ul li dl dd {width:150px;height:24px;border-bottom:solid 0px #ccc;} 8 .rmenu ul li dl dd a {display:block;width:150px;height:24px;font:12px/24px 宋体;background:none;color:#777;} 9 .rmenu ul li dl dd a span {padding:0 0 0 20px;}