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 相关文章推荐
JSON 编辑器实现代码
Dec 06 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
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中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
php时间不正确的解决方法
2008/04/09 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
php上传文件常见问题总结
2015/02/03 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
python对execl 处理操作代码
2020/06/22 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
体育教育专业自荐信范文
2013/12/20 职场文书
竞聘副主任科员演讲稿
2014/01/11 职场文书
《赶海》教学反思
2014/04/20 职场文书
团支书竞选演讲稿
2014/04/28 职场文书
会议室标语
2014/06/21 职场文书
2015年财务部工作总结
2015/04/10 职场文书
Java异常体系非正常停止和分类
2022/06/14 Java/Android