지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

Node.js는 둥근 모서리_javascript 기술을 사용하여 다단계 드롭다운 메뉴 효과를 구현합니다.

WBOY
풀어 주다： 2016-05-16 15:41:54
원래의
1166명이 탐색했습니다.

이 문서의 예에서는 js를 사용하여 모서리가 둥근 다단계 드롭다운 메뉴를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

모서리가 둥근 멋진 검은색 다단계 슬라이드다운 메뉴로, 마우스를 놓으면 슬라이드아웃 메뉴가 표시됩니다. 코드는 다음과 같습니다. 조금 복잡하고 관심이 있으면 공부할 수 있습니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2015/js-down-show-menu-style-codes/

구체적인 코드는 다음과 같습니다. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title>下拉菜单</title>
 <!--[imcss] *** Infinite Menus Core CSS: Keep this section in the document head for full validation. -->
<style type="text/css">.imcm ul,.imcm li,.imcm div,.imcm span,.imcm a{text-align:left;vertical-align:top;padding:0px;margin:0;list-style:none outside none;border-style:none;background-image:none;clear:none;float:none;display:block;position:static;overflow:visible;line-height:normal;}.imcm li a img{display:inline;border-width:0px;}.imcm span{display:inline;}.imcm .imclear,.imclear{clear:both;height:0px;visibility:hidden;line-height:0px;font-size:1px;}.imcm .imsc{position:relative;}.imcm .imsubc{position:absolute;visibility:hidden;}.imcm li{list-style:none;font-size:1px;float:left;}.imcm ul ul li{width:100%;float:none !important;}.imcm a{display:block;position:relative;}.imcm ul .imsc,.imcm ul .imsubc {z-index:10;}.imcm ul ul .imsc,.imcm ul ul .imsubc{z-index:20;}.imcm ul ul ul .imsc,.imcm ul ul ul .imsubc{z-index:30;}.imde ul li:hover .imsubc{visibility:visible;}.imde ul ul li:hover .imsubc{visibility:visible;}.imde ul ul ul li:hover .imsubc{visibility:visible;}.imde li:hover ul .imsubc{visibility:hidden;}.imde li:hover ul ul .imsubc{visibility:hidden;}.imde li:hover ul ul ul .imsubc{visibility:hidden;}.imcm .imea{display:block;position:relative;left:0px;font-size:1px;line-height:1px;height:0px;width:1px;float:right;}.imcm .imea span{display:block;position:relative;font-size:1px;line-height:0px;}.dvs,.dvm{border-width:0px}/*\*//*/.imcm .imea{visibility:hidden;}/**/</style><!--[if IE]><style type="text/css">.imcm .imea span{position:absolute;}.imcm .imclear,.imclear{display:none;}.imcm{zoom:1;} .imcm li{curosr:hand;} .imcm ul{zoom:1}.imcm a{zoom:1;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imcm .imsubc{background-image:url(ie_css_fix);}</style><![endif]--><!-- ****** Infinite Menus Rounded Corners Add-On ****** -->
<script language="JavaScript" type="text/javascript">
 ulm_round_corner_size_main = 2;
 ulm_round_corner_size_sub = 2;
</script>
<div id="ssimrc" style="position:absolute;visibility:hidden;"><style type="text/css">.imgl .imrc{font-size:1px;line-height:0px;height:1px;border-width:0px;border-style:solid;border-right-width:1px;border-left-width:1px;}.imgl .imbrc{border-width:0px;border-bottom-width:1px;height:0px;}</style></div><!--[if lte IE 6]><style type="text/css">.imgl .imrc{overflow:hidden;}.imgl .imroundcorner{height:1px;}</style><![endif]--><!--[if gte IE 7]><style type="text/css">.imgl .imroundcorner{zoom:1;}</style><![endif]--><script language="JavaScript" type="text/javascript">;function im_round_corners(tb,ms,isget,inner){var size=window["ulm_round_corner_size_"+ms];var pos=0;var wv="";if(!inner)wv+='<div class="imroundcorner" imrctype="'+tb+'" imrcgroup="'+ms+'">';if(tb=="top"){wv+=im_rcs(size,1," imtopspace");for(var i=size-1;i>=0;i--)wv+=im_rcs(i);}else {for(var i=0;i<size;i++)wv+=im_rcs(i);wv+=im_rcs(size,1,"");}if(!inner)wv+='</div>';if(isget)return wv;else document.write(wv);};function im_rcs(pos,is_cap,topclass){if(is_cap)return '<div class="imrbcolor imrc imbrc'+topclass+'" style="margin-left:'+pos+'px;margin-right:'+pos+'px;"></div>';else return '<div class="imrbcolor imrcolor imrc" style="vertical-align:top;margin-left:'+pos+'px;margin-right:'+pos+'px;"></div>';}</script>
<!--end-->
<!--[imstyles] *** Infinite Menu Styles: Keep this section in the document head for full validation. -->
<style type="text/css">
 /* --[[ Main Expand Icons ]]-- */
 #imenus0 .imeam span,#imenus0 .imeamj span {width:9px; height:9px; left:-10px; top:5px; background-repeat:no-repeat;background-position:top left;}
 #imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-repeat:no-repeat;background-position:top left;}
 /* --[[ Sub Expand Icons ]]-- */
 #imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(images/small_red_pointer.gif); width:7px; height:8px; left:-8px; top:3px; background-repeat:no-repeat;background-position:top left;}
 #imenus0 ul li:hover .imeas span,#imenus0 ul li a.iactive .imeasj span {background-image:url(images/small_red_pointer.gif); background-repeat:no-repeat;background-position:top left;}
 /* --[[ Main Container ]]-- */
 #imouter0 {background-color:#546347; border-style:solid; border-color:#000000; border-width:0px 1px; padding:0px 2px; margin:0px; }
  /* [Rounded Corner Styles] */
  .imrcmain0 .imrcolor {background-color:#546347; }
  .imrcmain0 .imrbcolor {border-color:#444444; }
  .imrcmain0 .imtopspace {height:0px; }
 /* --[[ Sub Container ]]-- */
 #imenus0 li ul {background-color:#cce7bc; border-style:solid; border-color:#a2a2a2; border-width:0px 1px; padding:5px 7px; }
  /* [Rounded Corner Styles] */
  #imenus0 .imrcolor {background-color:#cce7bc; }
  #imenus0 .imrbcolor {border-color:#a2a2a2; }
  #imenus0 .imtopspace {height:6px; }
 /* --[[ Main Items ]]-- */
 #imenus0 li a, #imenus0 .imctitle {color:#ffffff; text-align:center; font-family:Arial; font-size:12px; font-weight:bold; text-decoration:none; border-style:none; border-color:#000000; border-width:0px; padding:2px 5px 2px 12px; }
  /* [hover] - These settings must be duplicated for IE compatibility.*/
  #imenus0 li:hover>a {background-color:#cce7bc; color:#546347; }
  #imenus0 li a.ihover, .imde imenus0 a:hover {background-color:#cce7bc; color:#546347; }
  /* [active] */
  #imenus0 li a.iactive {}
 /* --[[ Sub Items ]]-- */
 #imenus0 ul a, #imenus0 .imsubc li .imctitle {color:#111111; text-align:left; font-size:11px; font-weight:normal; text-decoration:none; border-style:none; border-color:#000000; border-width:1px; padding:2px 5px; }
  /* [hover] - These settings must be duplicated for IE comptatibility.*/
  #imenus0 ul li:hover>a {background-color:transparent; color:#cc0000; }
  #imenus0 ul li a.ihover {background-color:transparent; color:#cc0000; }
  /* [active] */
  #imenus0 ul li a.iactive {background-color:#ffffff; }
  /* [Dividers] */
  #imenus0 .dvs {border-bottom-width:1px; border-style:dotted; border-color:#546347; padding-bottom:4px; margin-bottom:4px; }
</style><!--end-->
</head>
 <body>
<!--|**START IMENUS**|imenus0,inline-->
<!-- ****** Infinite Menus Structure & Links ***** -->
<div class="imrcmain0 imgl" style="width:538px;z-index:999999;position:relative;"><script language="JavaScript" type="text/javascript">im_round_corners("top","main");</script><div class="imcm imde" id="imouter0"><ul id="imenus0">
<li class="imatm" style="width:140px;"><a class="" href="#"><span class="imea imeam"><span></span></span>Who We Are</a>
<div class="imsc"><div class="imsubc" style="width:140px;top:0px;left:0px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul >
 <li><a href="#">Overview</a></li>
 <li><a href="#">Mission & Goals</a></li>
 <li><a href="#">History</a></li>
 <li><a href="#">Management</a></li>
 <li><a href="#">Working at Tyco</a></li>
 <li class="dvs"><a href="#">Press Center</a></li>
 <li><a href="#"><span class="imea imeas"><span></span></span>Board of Directors</a>
  <div class="imsc"><div class="imsubc" style="width:140px;top:-26px;left:127px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul >
  <li><a href="#">Overview</a></li>
  <li><a href="#">Electronics</a></li>
  <li><a href="#">Fire & Security</a></li>
  <li><a href="#">Healthcare</a></li>
  <li><a href="#">Plastics & Adhesives</a></li>
  <li><a href="#">Engineered Producs</a></li>
  <li><a href="#">Tyco Worldwide</a></li>
  </ul><script language="JavaScript" type="text/javascript">im_round_corners("bottom","sub");</script></div></div></li>
 <li class="dvs"><a href="#"><span class="imea imeas"><span></span></span>Worldwide</a>
  <div class="imsc"><div class="imsubc" style="width:140px;top:-26px;left:127px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul >
  <li><a href="#">Europe</a></li>
  <li><a href="#">Asia</a></li>
  <li><a href="#">US & Canada</a></li>
  <li><a href="#">Mexico</a></li>
  <li><a href="#">Australia</a></li>
  <li><a href="#">Middle East</a></li>
  </ul><script language="JavaScript" type="text/javascript">im_round_corners("bottom","sub");</script></div></div></li>
 <li><a href="#">Customers</a></li>
 </ul><script language="JavaScript" type="text/javascript">im_round_corners("bottom","sub");</script></div></div></li>
<li class="imatm" style="width:142px;"><a href="#"><span class="imea imeam"><span></span></span>Our Commitment</a>
<div class="imsc"><div class="imsubc" style="width:142px;top:0px;left:0px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul >
 <li><a href="#">Overview</a></li>
 <li><a href="#">People & Values</a></li>
 <li><a href="#">Governance</a></li>
 <li><a href="#">Community</a></li>
 <li><a href="#">Environmental</a></li>
 </ul><script language="JavaScript" type="text/javascript">im_round_corners("bottom","sub");</script></div></div></li>
<li class="imatm" style="width:125px;"><a href="#"><span class="imea imeam"><span></span></span>Our Business</a>
<div class="imsc"><div class="imsubc" style="width:125px;top:0px;left:0px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul >
 <li><a href="#">Overview</a></li>
 <li><a href="#">Electronics</a></li>
 <li><a href="#">Fire & Security</a></li>
 <li><a href="#">Healthcare</a></li>
 <li><a href="#">Plastics</a></li>
 <li><a href="#">Engineered Producs</a></li>
 <li><a href="#">Tyco Worldwide</a></li>
 </ul>
<script language="JavaScript" type="text/javascript">
im_round_corners("bottom","sub");
</script>
</div></div></li>
<li class="imatm" style="width:125px;"><a href="#"><span class="imea imeam"><span></span></span>Investors</a>
<div class="imsc"><div class="imsubc" style="width:126px;top:0px;left:0px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul >
 <li><a href="#">Overview</a></li>
 <li><a href="#">Stock Quotes</a></li>
 </ul><script language="JavaScript" type="text/javascript">
im_round_corners("bottom","sub");
</script>
</div></div></li>
</ul><div class="imclear"> </div></div><script language="JavaScript" type="text/javascript">im_round_corners("bottom","main");</script></div>
<script language="JavaScript" src="ocscript.js" type="text/javascript"></script>
</body>
</html>
로그인 후 복사

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

관련 라벨：
js 圆角 다단계 드롭다운 메뉴
원천：php.cn
이전 기사：AngularJS Node.js는 온라인 채팅방을 구현합니다_AngularJS 다음 기사：jQuery는 부드러운 스크롤 레이블 열 전환 effect_jquery를 구현합니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
여러 경로에 선언된 작업자 풀이 임계값을 고려하지 않고 여전히 CPU 사용량을 유지할 수 있습니까? CPU 집약적인 작업을 처리하기 위해 작업자 풀이 있는 node.js 시스템을 찾고 있지만 여러 경로에서의 CPU 사용량에 대해 약간 혼란스럽습니다. 시나리오는 ...
에서 2024-04-06 19:54:23
0
1
444
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
숨겨진 측면 패널 표시: 선택됨 애니메이션 햄버거 메뉴를 통해 보기로 전환할 수 있는 탐색 메뉴를 측면 패널에 갖고 싶습니다. JS 없이 CSS만 사용하여 만들고 싶습니다. :checked 의사...
에서 2024-04-06 15:49:33
0
1
319
Nuxt.js로 생성된 대시보드를 배포하기 위해 SSG를 사용해야 합니까? Nuxt.js를 사용하여 내부용 대시보드를 개발하겠습니다. 내부 대시보드이므로 범용 스키마가 필요하지 않습니다. 일반적으로 대부분의 대시보드는 SPA에서 개발됩니...
에서 2024-04-06 13:17:44
0
1
493
Electron은 사전 로드 시 AppData를 가져옵니다. 사전 로드된 AppData 디렉터리를 얻는 방법은 무엇입니까? Background.js[...]asyncfunctioncreateWindow(){constwin=...
에서 2024-04-06 11:05:31
0
1
417
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿