js+div+css下拉导航菜单完整代码分享


Posted in Javascript onDecember 28, 2016

效果预览:http://keleyi.com/keleyi/phtml/menu/1.htm

js+div+css下拉导航菜单完整代码分享

下拉菜单

js+div+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>
<title>css+div+js下拉菜单导航--柯乐义</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{padding:0;margin:0;font-size:12px;color:#fff;font-family:arial, helvetica, sans-serif;background:#fff;}
#nav{padding:0 5px;z-index:1;left:298px;width:600px;position:absolute;top:175px;height:30px;}
#nav li{float:left;text-align:center;}
#nav li a{float:left;width:100px;color:#336601;text-decoration:none;padding:3px 5px 0 5px;}
#nav li a:hover{float:left;width:88px;color:#fff;background:#539d26;text-decoration:none;padding:3px 3px 0 20px;}
.list{font-weight:normal;line-height:20px;text-align:left;padding:4px;}
.menu1{border:#9cdd75 1px solid;overflow-y:hidden;margin:6px 4px 0px 0px;width:120px;cursor:pointer;color:#336601;padding-top:6px;background:#f1fbec;moz-opacity:0.7;filter:alpha(opacity=70);opacity:0.7;}
.menu2{border:#eee8dd 1px solid;overflow-y:hidden;margin:6px 4px 0px 0px;width:120px;cursor:pointer;color:#999;padding-top:6px;height:18px;background:#f5f5f5;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li onmouseout="this.className='menu2'" onmouseover="this.className='menu1'" class="menu2">Javascript
<div class="list">
<a href="http://keleyi.com/a/bjac/687f154f53ab3aef.htm" target="_blank">js中substring</a><br />
<a href="http://keleyi.com/a/bjac/ff33a0656183eba.htm" target="_blank">客户端代码着色</a><br />
<a href="http://keleyi.com/a/bjac/6e893bbacf5184f3.htm" target="_blank">js实现代码着色</a><br />
<a href="http://keleyi.com/a/bjac/21e2e5321077656f.htm" target="_blank">11个js技巧</a><br />
<a href="http://keleyi.com/a/bjac/d32ac9822ef75ef9.htm" target="_blank">tab切换样式</a><br />
<a href="http://keleyi.com/a/bjac/fca5ac722271d2d5.htm" target="_blank">js获取可见域宽</a><br />
<a href="http://keleyi.com/a/bjac/ade2f3941bd75ba.htm" target="_blank">js导航菜单</a>
</div>
</li>
<li onmouseout="this.className='menu2'" onmouseover="this.className='menu1'" class="menu2">jQuery
<div class="list">
<a href="http://keleyi.com/a/bjac/13639353acde40c.htm" target="_blank">左侧可弹出div</a><br />
<a href="http://keleyi.com/a/bjac/d863921ed93d03ff.htm" target="_blank">jquery修改a标签</a><br />
<a href="http://keleyi.com/a/bjac/6f008786225269ac.htm" target="_blank">纯文本返回顶部</a><br />
<a href="http://keleyi.com/a/bjac/ac398357acb82782.htm" target="_blank">jquery倒计时</a><br />
<a href="http://keleyi.com/a/bjac/88af29335890a287.htm" target="_blank">div(tab)切换</a><br />
<a href="http://keleyi.com/a/bjac/2041333085cb032d.htm" target="_blank">选项卡切换</a><br />
<a href="http://keleyi.com/a/bjac/768f469b95b61487.htm" target="_blank">单行文字滚动</a><br />
<a href="http://keleyi.com/a/bjac/ed5eb8c2959c619e.htm" title="滚动页面时DIV到达顶部时固定在顶部" target="_blank">DIV到顶固定</a><br />
<a href="http://keleyi.com/a/bjac/a6d651710217f7a0.htm" title="使用jQuery UI修饰title属性的气泡悬浮框" target="_blank">修饰title气泡</a>
</div>
</li>
<li onmouseout="this.className='menu2'" onmouseover="this.className='menu1'" class="menu2">C#
<div class="list">
<a href="http://keleyi.com/a/bjac/e3ce4526c3fcaf8f.htm" target="_blank">删除文本空白行</a><br />
<a href="http://keleyi.com/a/bjac/94190f87387a868a.htm" target="_blank">生成图片验证码</a><br />
<a href="http://keleyi.com/a/bjac/954abc0d69092dc1.htm" title=".NET生成固定长度的唯一字符串(以8位为例)" target="_blank">生成唯一字符串</a><br />
<a href="http://keleyi.com/a/bjac/c4dd6879a4a4fb36.htm" target="_blank">向文件写入文本</a><br />
<a href="http://keleyi.com/a/bjac/d09a76fa32100d7.htm" target="_blank">用IgnoreRoute忽略路径</a><br />
<a href="http://keleyi.com/a/bjac/84d4e8554b88f61.htm" target="_blank">RouteCollection类</a><br />
<a href="http://keleyi.com/a/bjac/c8e988b2eb520f4b.htm" target="_blank">柯乐义图片压缩类</a>
</div>
</li>
<li onmouseout="this.className='menu2'" onmouseover="this.className='menu1'" class="menu2">CMS
<div class="list"><a href="http://keleyi.com/a/bjac/9d5534156d5814fc.htm" target="_blank">KeleyiCMS更新</a><br />
<a href="http://keleyi.com/a/bjac/2916901353b081f1.htm" target="_blank">柯乐义留言板介绍</a>
</div>
</li>
</ul>
</div>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
js实现简单放大镜效果
Mar 07 Javascript
javascript实现简单的ajax封装示例
Dec 28 #Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 #Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 #Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 #Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 #Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 #Javascript
基于JS设计12306登录页面
Dec 28 #Javascript
You might like
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
Python实现抓取网页并且解析的实例
2014/09/20 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
python sorted函数的小练习及解答
2019/09/18 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
Django Form常用功能及代码示例
2020/10/13 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
网络技术专业推荐信
2014/02/20 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
2014年科普工作总结
2014/12/06 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android