JS+CSS实现精美的二级导航效果代码


Posted in Javascript onSeptember 17, 2015

本文实例讲述了JS+CSS实现精美的二级导航效果代码。分享给大家供大家参考。具体如下:

这是一款基于JS+CSS实现的精美二级导航,适合想学一些基础点的、基础js知识技巧的朋友们。其实本菜单的完成不仅仅是需要基础知识,更需要的是对CSS熟悉之后的巧妙构思,菜单可能都会写,但写出好菜单就不那么容易了。

运行效果截图如下:

JS+CSS实现精美的二级导航效果代码

在线演示地址如下:

具体代码如下:

<!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=utf-8" />
<title>js+css精美二级导航</title>
<style>
<!--
body {margin0; padding:0; text-transform:capitalize;}
ul,li {margin:0; padding:0; list-style-type:none;}
.menu {width:606px; height:48px; background:url(images/nav.gif) 0 0 no-repeat;}
.inner {padding:0 0 0 9px;}
.menu li {float:left; font-size:12px;}
.menu li a {text-decoration:none; color:#000; display:block; padding:0 20px; font:12px/44px "微软雅黑";}
.menu li a:hover {text-decoration:none; color:orange; font:12px/44px "微软雅黑";}
.menu li ul {visibility:hidden; position:absolute;}
.menu li.hover ul {/*ie6不支持li:hover所以在这里写成li.hover以方便js取样式*/visibility:visible; position:absolute; display:block; width:408px; padding:0 0 0 18px; background:url(images/subUlBg.gif) 0 0 no-repeat;}
.menu ul ul li a {padding:0 1em; line-height:48px;}
.menu ul ul li a:hover {padding:0 1em; line-height:48px;}
.menu {margin:50px auto;}
p {text-align:center; font:12px/200% "微软雅黑"; color:skyblue; }
p a {color:skyblue;}
-->
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
 function showSubLevel(Obj){
 Obj.className="hover";
 }
 function hideSubLevel(Obj){
 Obj.className="";
 }
</script>
<div class="menu">
 <ul class="inner">
 <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"><a href="#">mainLevel</a>
 <ul>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 </ul>
 </li>
 <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"><a href="#">mainLevel</a>
 <ul>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 </ul>
 </li>
 <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"><a href="#">mainLevel</a>
 <ul>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 </ul>
 </li>
 <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"><a href="#">mainLevel</a>
 <ul>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 </ul>
 </li>
 <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"><a href="#">mainLevel</a>
 <ul>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 </ul>
 </li>
 <li onmouseover="showSubLevel(this)" onmouseout="hideSubLevel(this)"><a href="#">mainLevel</a>
 <ul>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 <li><a href="#">subLevel</a></li>
 </ul>
 </li>
 </ul>
</div>
<p>Made by Jacktomato<br />
适合想学一些简体、基本的js朋友们</p>
</body>
</html>

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

Javascript 相关文章推荐
JavaScript入门教程(11) js事件处理
Jan 31 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
js实现随机点名
Jan 19 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 #Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 #Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 #Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 #Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 #Javascript
js实现tab切换效果实例
Sep 16 #Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 #Javascript
You might like
php中JSON的使用与转换
2015/01/14 PHP
PHP获取文件行数的方法
2015/06/10 PHP
为你总结一些php系统类函数
2015/10/21 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
JS操作HTML自定义属性的方法
2015/02/10 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
python线程池的实现实例
2013/11/18 Python
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
开始着手第一个Django项目
2015/07/15 Python
解读Django框架中的低层次缓存API
2015/07/24 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
浅谈Python NLP入门教程
2017/12/25 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
python中selenium库的基本使用详解
2020/07/31 Python
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
儿科护士实习自我鉴定
2013/10/17 职场文书
成教自我鉴定
2013/10/27 职场文书
中考冲刺决心书
2014/03/11 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
探亲假请假条
2014/04/11 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书