JS实现智能下拉导航效果代码

本文讲述了一个JS实现智能下拉导航效果代码的例子。分享给大家参考。具体如下：

这是一个基于JS的下拉菜单。它是一个智能网站导航栏。它支持二次显示和向下滑动显示。经典的下拉菜单是用JS和CSS编写实现的。Li菜单列表样式易于修改，并且与主要浏览器兼容。相信你也会喜欢的。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/js-down-nav-blue-menu-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejs暗蓝色下拉导航菜单/title style @ charset ' utf-8 '；车身{ padd :0 pxmargin :0 px }车身{font-family:Arial，Helvetica，无衬线；font-size :9 pt背景色-: # 3A 4954；}ul，Li { padd :0 pxmargin :0 px列表样式类型：无；} * a { text-decoration : nonecolor: # CFE0EE} a :悬停{ color : # F09C 42} a :悬停{ color : # F09C 42} # NavMenu { width :100%；高： 34px线高： 34px显示：块；飞越：隐藏；背景-image : URL(images/nav _ BG。jpg)；背景-重复：次重复-x；背景-位置：左上角；} # NavMenu ul { width :95%；左边距left:16px}#navMenu .一个链接{ background-image :无；} # navMenu li { width:90px文本对齐：居中；向左浮动：线高： 34px高： 34px背景-image : URL(images/nav _ fg。jpg)；背景-重复：不重复；背景-位置： 0中心；边距-左侧：-2px；} #导航菜单阿利{ color: # 6CA7C7字体系列： '宋体；填充-右侧： 1em左填充左侧： 1em边距-左： 2px显示器：块；} #navMenu li a :悬停，# NavMenu Li。将鼠标悬停在{ background-image : URL(images/hover _ BG)上。jpg)；背景-重复：次重复-x；背景-位置：中央顶部；文本装饰：无；color: # FF7B0E}。DropMenu {位置：绝对；top : 0；z指数：100;宽度： 110像素；可见性：隐藏；页边距-顶部：-1px；边距-左侧：-2px；border: 1px固体# 4D5B66边框-top: 0px实心# 3CA2DC背景色-: # 0d 1c 31；填充-top :6 px；填充-底部：6 pxfilter: Alpha(不透明度=85);}.DropMenu李{ margin-top :2 px；保证金-底部：4 px左填充：6 px}.dropMenu阿利{宽度： 92%；显示器：块；文本对齐：居中；颜色：黑色；padd : 4px 0 4px 0 pxcolor : # 6ca 7c 7边框-bottom: 1px虚线# 4D5B66}。dropMenu阿利{ border-top : one；}* html .DropMenu a {宽度： 100%；color: # 6CA7C7}。DropMenu a :悬停{文本装饰：下划线；color: # F09C42}。hdo { width :100%；高度：自动显示：块；飞越：隐藏；}/style脚本类型=' text/JavaScript ' src=' js/下拉。js '/script/head dydiv id=' nav menu ' ul Li class=' one link ' a href=' # ' target=' _ blank '主页/a/Li lia href=' # ' target=' _ blank ' html CSS模板/a/Li lia href=' # ' rel=' drop menu 1 ' target=' _ blank ' js代码/a/李rel=' dropmenu2 ' target=' _ blank '电子商务/a/li lia href='#' SEO优化/a/Li阿利建站技巧/a/li lia href='#' target='_blank '网络营销/a/Li/ul/div ul id=' Dropmenu 1 ' class=' Dropmenu ' lia href=' # target=' _ blank '导航菜单/a/li lia href='#' target='_blank '焦点幻灯片/a/li lia href='#' target='_blank '网页特效/a/li lia href='#' target='_blank '广告代码/a/Li/ulul id=' DropMenu 2 ' class=' DropMenu ' lia href=' # target=' _ blank '企业类网站/a/li lia href='#' target='_blank '行业类网站/a/Li lia href=' #/' target=' _ blank ' BLOG类网站/a/li lia href='#' target='_blank '门户类网站/a/li lia href='#' target='_blank '商城类网站/a/Li/ulul id=' DropMenu 3 ' class=' DropMenu ' lia href=' # ' target=' _ blank ' html技巧/a/Li lia技巧/a/Li lia建站技巧/a/li lia href='#' target='_blank '其他技巧/a/Li/ulscript type=' text/JavaScript ' CSS下拉列表。 启动chrome(' NavMenu ')/脚本！- //nav - /body/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。