이 글에서는 은회색 세로 접기 메뉴를 3D 감각으로 구현하기 위한 JS 코드를 주로 소개합니다. 마우스 이벤트에 반응하여 메뉴 표시줄을 동적으로 확장하고 접는 기본 JS 기능을 구현할 수 있습니다. 누가 필요하면 참고하세요
이 글에서는 JS에서 은회색 세로 접기 메뉴 코드를 3D 입체 효과로 구현한 예를 설명합니다. 참고를 위해 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.
웹 페이지 왼쪽에서 사용할 수 있는 매우 멋진 은회색 수직 다단계 접이식 메뉴입니다. 배경을 추가할 수 있습니다. 메뉴를 직접 선택하고 CSS에 예약된 코드가 있습니다. 이것은 p+Css 구조를 가지며 표준에 부합하고 수정하기 쉬운 비교적 표준적이고 고전적인 백엔드 관리 모드 메뉴입니다.
런닝 효과의 스크린샷은 다음과 같습니다.
구체적인 코드는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>网页左边的竖式菜单</title> <style> body { background-color:#F3F3F3; margin:0px; font-size: 9pt; background-position:center; text-decoration: none; scrollbar-face-color: #f6f6f6; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #EEEEEE; scrollbar-3dlight-color: #EEEEEE; scrollbar-arrow-color: #330000; scrollbar-track-color: #f6f6f6; scrollbar-darkshadow-color: #ffffff; } /* 网站链接总的css定义*/ a{text-decoration: underline;} a:link {color: #595989;} a:visited {color: #595989;} a:hover{color: #ff0000;} a:active {color: #595989;} .dt1, .dt2, .dt3, .dt4 ,.dt{ padding: 0px; margin: 0px; border: 0px; padding-left: 25px; border-left: 5px solid #c0c0c0; border-top: 1px solid #ffffff; border-bottom: 1px solid #c0c0c0; width: auto;text-align: left; line-height: 26px; height: 26px; background: #E0E0E0; cursor:pointer!important; cursor:hand; display:block; } /*这里可以加入背景图片 .dt1{ background-image: url(); background-repeat: no-repeat; background-position: right center; } .dt{ background-image: url(); background-repeat: no-repeat; background-position: 8px center; } .dt2{ background-image: url(); background-repeat: no-repeat; background-position: right center; } .dt4{ background-image: url(); background-repeat: no-repeat; background-position: right center; } .dt3{ background-image: ur(); background-repeat: no-repeat; background-position: right center; }*/ #aboutbox { /*左侧box*/ padding: 0px; margin: 0px; border: 0px; width: 190px; float: left; background: #eee; } #aboutbox dl { /*dl、dt、dd*/ margin: 0px; border: 0px; border: medium none; /*不显示边框*/ background:#eeeeee; background-image: url();/*背景图像,这里省略了*/ background-repeat: repeat-y; background-position: left; clear: both; } #aboutbox dd { padding: 0px; margin: 0px; border: 0px; background: #eee; border-top: 1px solid #fff; border-left: 5px solid #e0e0e0; padding-right:3px; } #aboutbox ul { /*ul、li定义*/ padding: 0px; margin: 0px; border: 0px; list-style-type: none; } #aboutbox li { padding: 0px; margin: 0px; border: 0px; text-align: left; text-indent: 10px; list-style:none; } #aboutbox li a { padding-left: 5px; margin: 0px; border: 0px; display: block; background: #eee; font-weight: normal;height: 22px;line-height: 22px; color: #000; border: 1px solid #eee; text-decoration: none;} #aboutbox li a:link,#aboutbox li a:visited {height: 22px;line-height: 22px;} #aboutbox li a:hover { padding-left: 5px; background-color: #e4e4e4; border: 1px solid #999999; color: #D90000;height: 22px;line-height: 22px;} #aboutbox li a:active {color: #333333;height: 22px;line-height: 22px;background: #EEEEEE;} .center_tdbgall /* 中部表格背景颜色 */ { background:#ffffff; } </style> </head> <body> <table class=center_tdbgall width="191" border="0" cellspacing="0" cellpadding="0"> <tr> <td width=191 rowspan="2" valign=top class=web_left_all> <p id=aboutbox> <dl> <dt class=dt1 id=dt1 onmouseover=showbg(1) onclick=showsubmenu(1) onmouseout=showoutbg(1)><B>网站动态</B> <dd id=submenu1> <ul> <LI><A href='#'>今日关注</A></LI> <LI><A href='#'>最新整理</A></LI> <LI><A href='#'>下载排行</A></LI> </ul> </dd> </dt> </dl> <dl> <dt class=dt2 id=dt2 onmouseover=showbg(2) onclick=showsubmenu(2) onmouseout=showoutbg(2)><B>管理新闻</B> <dd id=submenu2> <ul> <LI><A href='#'>新闻分类</A></LI> <LI><A href='#'>新闻列表</A></LI> <LI><A href='#'>审核新闻</A></LI> </ul> </dd> </dt> </dl> <script> function showsubmenu(sid){ whichEl = eval('submenu' + sid); if (whichEl.style.display == 'none'){ eval("submenu" + sid + ".style.display='';"); eval("dt" + sid + ".className='dt2';"); } else{ eval("submenu" + sid + ".style.display='none';"); eval("dt" + sid + ".className='dt1';"); } } function showbg(sid){ whichEl = eval('submenu' + sid); if (whichEl.style.display == 'none'){ eval("dt" + sid + ".className='dt4';"); } else{ eval("dt" + sid + ".className='dt3';"); } } function showoutbg(sid){ whichEl = eval('submenu' + sid); if (whichEl.style.display == 'none'){ eval("dt" + sid + ".className='dt1';"); } else{ eval("dt" + sid + ".className='dt2';"); } } </script> </p></TD> </tr> </table> </body> </html>
위는 이 글의 전체 내용입니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목하세요!
관련 추천:
자바스크립트를 사용하여 사진을 좌우로 전환하는 효과 얻기
JS를 사용하여 WeChat 결제 팝업 기능을 구현하는 방법
위 내용은 3D 입체 효과로 은회색 세로 접기 메뉴를 구현하는 JS 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!