19种下拉菜单导航效果_导航下拉效果资源-CSDN文库

共122个文件

gif：64个

js：19个

html：18个

需积分: 10 62 浏览量 2010-06-20 14:18:51 上传评论收藏 634KB RAR 举报

下拉菜单在网页设计中是一种常见的交互元素，用于在有限的空间内展示丰富的导航选项。本文将详细介绍纯JS实现的19种下拉菜单导航效果，这些效果不仅美观，而且实用，能够提升用户在网站上的浏览体验。下拉菜单的基本原理是利用JavaScript的事件监听和DOM操作来实现。当用户鼠标悬停在主菜单项上时，通过JS触发下拉子菜单的显示或隐藏。这种动态效果使得网页更加生动，同时也可以避免过多的菜单项占用页面空间。 19种不同的下拉菜单效果涵盖了多种样式和动画效果，例如平滑展开、淡入淡出、滑动显示、旋转弹出等。每一种效果都是通过精心设计的CSS样式和JavaScript逻辑来实现的。开发者可以通过分析源代码，学习如何控制元素的显示、位置调整以及过渡动画，这对于提升自己的前端技能大有裨益。在实际应用中，需要注意的是，下拉菜单的设计应考虑到不同设备和浏览器的兼容性。由于JavaScript的广泛支持，这些下拉菜单在大部分现代浏览器中都能正常工作。但为了确保所有用户都能访问，应当进行充分的跨浏览器测试，包括IE、Firefox、Chrome、Safari和Edge等主流浏览器。文件"下拉导航条出现错误解决办法.doc"可能包含了常见问题和解决方案，如菜单不显示、点击无反应或者动画效果不流畅等。这些问题往往源于JavaScript代码错误、CSS选择器不正确或者是DOM结构的误解。通过文档中的指导，开发者可以快速定位并修复问题，保证下拉菜单的正常运行。而"19种导航条下拉效果"文件可能包含了这19种效果的示例代码，开发者可以直接参考和修改这些代码，以适应自己的项目需求。这些代码通常会包含HTML结构、CSS样式以及JavaScript逻辑，形成一个完整的下拉菜单实现。学习和掌握这些纯JS编写的下拉菜单导航效果，不仅可以提升网页的交互性，也能进一步提高前端开发者对JavaScript和CSS的理解。通过实践和调试，你可以创造出更多富有创意的下拉菜单，为用户提供更优质的浏览体验。

展开

资源推荐

资源详情

资源评论

收起资源包目录

19种下拉菜单导航效果（122个子文件）

imenus0.css 2KB

Thumbs.db 23KB

Thumbs.db 8KB

Thumbs.db 7KB

Thumbs.db 6KB

Thumbs.db 5KB

Thumbs.db 4KB

下拉导航条出现错误解决办法.doc 26KB

purchase.gif 5KB

organize.gif 5KB

purchase_hl.gif 4KB

balance.gif 3KB

organize_hl.gif 3KB

balance_hl.gif 3KB

thirst.gif 3KB

thirst_hl.gif 2KB

sample14_main_bg.gif 2KB

bluegray_columns_bl.gif 934B

beige_rounded_bl.gif 924B

beige_rounded_br.gif 920B

brown_bl.gif 906B

brown_br.gif 905B

brown_bc.gif 881B

beige_rounded_bc.gif 874B

arrow_down.gif 874B

arrow_right.gif 872B

bluegray_columns_br.gif 859B

sample2_bg.gif 855B

squares_0_hl.gif 846B

sample1_sub_arrow.gif 845B

medium_purple_right.gif 843B

sample14_main_expand_on.gif 842B

sample2_main_arrow.gif 842B

sample1_main_arrow.gif 841B

sample14_main_expand_default.gif 841B

bluegray_columns_bc.gif 839B

medium_purple_down.gif 839B

squares_0.gif 837B

sample2_sub_arrow.gif 837B

arrow_sub.gif 837B

light_arrow_right.gif 836B

light_arrow_down.gif 835B

arrows_0.gif 830B

sample13_sub_expand_default.gif 829B

sample13_sub_expand_on.gif 829B

stub_arrow_right.gif 828B

sample3_main_arrow.gif 827B

sample3_sub_arrow.gif 827B

sample3_main_arrow.gif 827B

sample3_sub_arrow.gif 827B

sample3_main_arrow.gif 827B

sample3_sub_arrow.gif 827B

sample3_main_arrow.gif 827B

sample3_sub_arrow.gif 827B

sample3_main_arrow.gif 827B

small_red_pointer.gif 826B

stub_arrow_down.gif 825B

sample14_sub_expand_on.gif 821B

sample14_sub_expand_default.gif 820B

sample13_main_bg.gif 122B

template.htm 1KB

template.html 11KB

template.html 8KB

共 122 条

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

  <title>Template</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 {background-image:url(squares_0.gif); width:13px; height:8px; left:-12px; top:4px; background-repeat:no-repeat;background-position:top left;}
	#imenus0 li:hover .imeam span,#imenus0 li a.iactive .imeamj span {background-image:url(squares_0_hl.gif); background-repeat:no-repeat;background-position:top left;}


	/* --[[ Sub Expand Icons ]]-- */
	#imenus0 ul .imeas span,#imenus0 ul .imeasj span {background-image:url(small_red_pointer.gif); width:7px; height:8px; left:-7px; 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(small_red_pointer.gif); background-repeat:no-repeat;background-position:top left;}


	/* --[[ Main Container ]]-- */
	#imouter0 {border-style:none; border-color:#6a6a6a; border-width:1px; padding:0px; margin:0px; }

		/* [Rounded Corner Styles] */
		.imrcmain0 .imrcolor {}
		.imrcmain0 .imrbcolor {border-color:#444444; }
		.imrcmain0 .imtopspace {height:0px; }


	/* --[[ Sub Container ]]-- */
	#imenus0 li ul {background-color:#e4f5a9; border-style:solid; border-color:#cccccc; border-width:0px 1px; padding:5px; margin:0px; }

		/* [Rounded Corner Styles] */
		#imenus0 .imrcolor {background-color:#e4f5a9; }
		#imenus0 .imrbcolor {border-color:#b0b0b0; }
		#imenus0 .imtopspace {height:4px; }


	/* --[[ Main Items ]]-- */
	#imenus0 li a, #imenus0 .imctitle {color:#333333; text-align:left; font-family:Arial; font-size:12px; font-weight:normal; text-decoration:underline; border-style:none; border-color:#dddddd; border-width:1px; padding:0px 2px 0px 0px; }

		/* [hover] - These settings must be duplicated for IE compatibility.*/
		#imenus0 li:hover>a {text-decoration:underline; border-style:none; }
		#imenus0 li a.ihover, .imde imenus0 a:hover {text-decoration:underline; border-style:none; }

		/* [active] */
		#imenus0 li a.iactive {border-style:none; }

		/* [Main Graphic Button Text Content] */
		#imenus0 .imbuttons {padding:2px 0px 0px 4px; }


	/* --[[ Sub Items ]]-- */
	#imenus0 ul a, #imenus0 .imsubc li .imctitle  {color:#555555; 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 {color:#000000; text-decoration:underline; }
		#imenus0 ul li a.ihover {color:#000000; text-decoration:underline; }

		/* [active] */
		#imenus0 ul li a.iactive {background-color:#ffffff; }

		/* [Dividers] */
		#imenus0 .dvs {border-bottom-width:1px; border-style:dotted; border-color:#9d9268; padding-bottom:2px; margin-bottom:2px; }

</style><!--end-->

</head>
  <body>







<!--|**START IMENUS**|imenus0,inline-->

<!--  ****** Infinite Menus Structure & Links ***** -->
<div class="imrcmain0 imgl" style="width:580px;z-index:999999;position:relative;"><div class="imcm imde" id="imouter0"><ul id="imenus0">
<li class="imatm"  style="width:145px;"><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:2px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul style="">
	<li class="dvs"><a href="#">Overview</a></li>
	<li class="dvs"><a href="#">Mission &amp; Goals</a></li>
	<li class="dvs"><a href="#">History</a></li>
	<li class="dvs"><a href="#">Management</a></li>
	<li class="dvs"><a href="#">Working at Tyco</a></li>
	<li class="dvs"><a href="#">Press Center</a></li>
	<li class="dvs"><a href="#"><span class="imea imeas"><span></span></span>Worldwide</a>

		<div class="imsc"><div class="imsubc" style="width:119px;top:-23px;left:132px;"><script language="JavaScript" type="text/javascript">im_round_corners("top","sub");</script><ul style="">
		<li class="dvs"><a href="#">Europe</a></li>
		<li class="dvs"><a href="#">Asia</a></li>
		<li class="dvs"><a href="#">US &amp; Canada</a></li>
		<li class="dvs"><a href="#">Mexico</a></li>
		<li class="dvs"><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 class="dvs"><