脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS样式清新的横排下拉菜单

JS实现样式清新的横排下拉菜单效果

 更新时间：2015年10月09日 09:29:29   作者：企鹅  
这篇文章主要介绍了JS实现样式清新的横排下拉菜单效果,通过简单的元素遍历控制页面元素的动态切换效果,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了JS实现样式清新的横排下拉菜单效果。分享给大家供大家参考。具体如下：

这是一款灰色调横排清新的下拉菜单，完全符合WEB标准，兼容性不错，菜单简洁好用，适合大部分的网页风格。如果色调不是你想要的，自己发挥聪明才智，修改一下吧。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-simple-style-hp-menu-demo/

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS下拉菜单，竖向</title>
<style type="text/css" media="screen">
<!--
#Nav {
width: auto;
float: left;
border-left: 1px solid #777;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
position: relative;
width: 120px;
float: left;
}
li ul {
position: absolute;
left: 0px;
top: 23px;
display: none;
border-bottom: 1px solid #777;
border-left: 0px;
}
ul li a {
display: block;
font-size: 12px;
line-height: 22px;
text-decoration: none;
color: #333;
background-color: #FFF;
height: 22px;
padding-left: 8px;
border: 1px solid #777;
border-left: 0px;
}
ul li ul li a {
border: 1px solid #777;
border-bottom: 0px;
}
a:hover {
color: #F60;
background-color: #EFEFEF;
}
* html ul li {
float: left;
height: 1%;
}
* html ul li a {
height: 1%;
}
li:hover ul, li.over ul {
display: block;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
startList = function() {
if (document.all && document.getElementById) {
var menuRoot = document.getElementById("Menu");
for (var i = 0; i < menuRoot.childNodes.length; i++) {
var node = menuRoot.childNodes[i];
if (node.nodeName == "LI") {
node.onmouseover = function() {
this.className += " over";
}
node.onmouseout = function() {
this.className = this.className.replace(" over", "");
}
}
}
}
}
window.onload = startList;
-->
</script>
</head>
<body>
<div id="Nav">
<ul id="Menu">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">网站介绍</a></li>
<li><a href="#">客户反馈</a></li>
<li><a href="#">产品服务</a></li>
</ul>
</li>
<li><a href="#">脚本下载</a>
<ul>
<li><a href="#">最新脚本</a></li>
<li><a href="#">下载排行</a></li>
<li><a href="#">分类索引</a></li>
</ul>
</li>
<li><a href="#">网页特效</a>
<ul>
<li><a href="#">菜单</a></li>
<li><a href="#">布局</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 详解如何愉快的在微信小程序中使用SVG图标

    详解如何愉快的在微信小程序中使用SVG图标

    这篇文章主要介绍了详解如何愉快的在微信小程序中使用SVG图标,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • JavaScript闭包实例讲解

    JavaScript闭包实例讲解

    众所周知，JavaScript没有块级作用域，只有函数作用域。那就意味着定义在函数中的参数和变量在函数外部是不可见的，而在一个函数内部任何位置定义的变量，在该函数内部任何地方都可见
    2014-04-04
  • JavaScript 代码压缩工具小结

    JavaScript 代码压缩工具小结

    为了使页面更快的完成加载，经常需要对javascript/css代码进行压缩以减小体积，这里简单列一下用过的压缩工具，同时也作为存档
    2012-02-02
  • js实现滚动条自动滚动到最底部示例代码

    js实现滚动条自动滚动到最底部示例代码

    这篇文章主要给大家介绍了关于js实现滚动条自动滚动到最底部的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友可以参考下
    2023-06-06
  • uniapp 使用定位示例详解

    uniapp 使用定位示例详解

    这篇文章主要为大家介绍了uniapp如何使用定位过程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • 在父页面调用子页面的JS方法

    在父页面调用子页面的JS方法

    这篇文章介绍了在父页面调用子页面的JS方法，有需要的朋友可以参考一下
    2013-09-09
  • JavaScript中判断整数的多种方法总结

    JavaScript中判断整数的多种方法总结

    这篇文章主要介绍了JavaScript中判断整数的多种方法总结,本文总结了5种判断整数的方法,如取余运算符判断、Math.round、Math.ceil、Math.floor判断等,需要的朋友可以参考下
    2014-11-11
  • IE6弹出“已终止操作”的解决办法

    IE6弹出“已终止操作”的解决办法

    导致这个问题产生的原因，一般是因为js（一个比较复杂的js）写在body里面，在body元素加载完之前调用出现问题。显然，解决该问题的方法就是将这一段js放在body元素解析完毕之后。
    2010-11-11
  • JS解决回调地狱为什么需要Promise来优化异步编程

    JS解决回调地狱为什么需要Promise来优化异步编程

    这篇文章主要为大家介绍了JS解决回调地狱为什么需要Promise来优化异步编程原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • angular之ng-template模板加载

    angular之ng-template模板加载

    本篇文章主要介绍了angular之ng-template模板加载，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11

最新评论