简单仿京东导航下拉菜单 javascript
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("ul li").each(function (index) {
$(this).mouseover(function () {
var obj = $(this).offset();
var xobj = obj.left + 190 + "px";
var yobj = obj.top - 50 + "px";
$(this).css({ "width": "190px", "z-index": "9999", "border-right": "none", "background": "#fff" });
$("ul > div:eq(" + index + ")").css({ "left": xobj, "top": yobj }).show();
}).mouseout(function () {
$("ul > .tips").hide();
$(this).css({ "width": "200px", "z-index": "1", "border": "1px solid #E5D1A1", "background": "#FFFDD2" })
})
})
$("div").each(function () {
$(this).mouseover(function () {
$(this).prev("li").css({ "width": "190px", "z-index": "9999", "border-right": "none", "background": "#fff" })
$(this).show();
}).mouseout(function () {
$(this).hide();
$(this).prev("li").css({ "width": "200px", "z-index": "1", "border": "1px solid #E5D1A1", "background": "#FFFDD2" });
})
})
})
</script>
</head>
<body>
<ul>
<li><a href="#">baidu</a></li>
<div class="tips">
<p><a href="http://www.baidu.com">baidu </a></p>
<p><a href="http://www.baidu.com">baidu </a></p>
</div>
<li>goolge</li>
<div class="tips">
<p><a href="http://www.google.com">google</a></p>
<p><a href="http://www.google.com">google</a></p>
</div>
<li>yahoo</li>
<div class="tips">
<p><a href="http://www.yahoo.com">yahoo</a></p>
<p><a href="http://www.yahoo.com">yahoo</a></p>
</div>
<li>microsoft</li>
<div class="tips">
<p><a href="http://www.microsoft.com">microsoft</a></p>
<p><a href="http://www.microsoft.com">microsoft</a></p>
</div>
</ul>
<style type="text/css">
html{color:#666;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,i,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
body{font:12px/1.3 arial,helvetica,clean,sans-serif,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
table{border-collapse:collapse;border-spacing:0;}
img{border:none;}
a{text-decoration:none; color:#666;}
a:hover{text-decoration:underline; color:#FF6600;}
ul,li{list-style-type:none;}
q:before,q:after{content:'';}
sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}
/* All reset */
body{ margin:100px;}
ul li{line-height:30px; border:1px solid #E5D1A1; text-align:center; margin-top:-1px; width:200px; background:#FFFDD2; position:relative; z-index:1;}
.tips{position:absolute; width:150px; height:150px; border:1px solid #E5D1A1; background:#fff; z-index:2; display:none;}
</style>
</body>
</html>
转载原文：http://www.jb51.net/article/35992.htm
简单仿京东导航下拉菜单 javascript的更多相关文章
- MDNavBarView下拉导航菜单（仿美团导航下拉菜单）
说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下, ...
- 纯CSS实现二级导航下拉菜单--css的简单应用
思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...
- 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）
这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...
- jq+css+html简单实现导航下拉菜单
相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code. Html部分 <div class="_nav"> <ul id=&qu ...
- HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播（圆点、箭头） 选项卡 进度条；
1,竖向下拉导航 鼠标单击打开 再打击关闭 <style> *{ margin:0px auto; padding:0px;} div{ width:100px; height:50px; ...
- 兼容ie7的导航下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 下拉菜单--JavaScript触发方法
1. $(function(){ $(".dropdown-toggle").one("click",function(){ $(this).dropdown( ...
- bootstrap：导航下拉菜单
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- js导航下拉菜单
使用定时器.鼠标移动事件 var img = $('#user_head'); var menu = $('.nav_list'); var i=0; var timer; img.mouseente ...
随机推荐
- ExtJs007最常用的查询方法
Ext.onReady(function () { Ext.create('Ext.panel.Panel', { title: '我的面板', width: '100%', height: 400, ...
- C语言格式化输出，空位补0，空位补空格
char strTtimeDump[512] = ""; int a = 5; sprintf(strTtimeDump, "%.4d", a); //strT ...
- cmd命令添加一个应用程序到防火墙例外项中
windows+r 键打开运行 输入cmd按回车 把下列命令在cmd中点击右键粘贴进去,按回车,即可添加到防火墙例外程序列表中. netsh advfirewall firewall delete r ...
- HDU2084-数塔
描述: 在讲述DP算法的时候,一个经典的例子就是数塔问题,它是这样描述的: 有如下所示的数塔,要求从顶层走到底层,若每一步只能走到相邻的结点,则经过的结点的数字之和最大是多少? 代码: 简单的动态规划 ...
- Oracle SQL篇（四）group by 分组与分组的加强 rollup
分组操作group by 和分组的强化(rollup) 分组操作和分组函数的使用,对于编写SQL语句的人来说,是最基本的概念. 我们来看下面的例子: 在这里我们使用员工表EMP scott@D ...
- 射频识别技术漫谈(20)——RC系列射频接口芯片
目前基于13.56MHz的射频识别技术主要有ISO14443A.ISO14443B.ISO15693和FELICA技术.针对13.56MHz的射频识别技术,NXP开发了一系列名字以RC(Radio C ...
- C/C++中的内存管理
一．内存的分配方式 1. 程序代码区 2. 静态数据区 3. 动态数据区 二．动态内存 1. 在栈上创建的内存 2. 从堆上分配的内存 3. 小结 三．指针与内存 1. 操作内存 2. 指针与数组 3 ...
- [转载]各种在线api地址
J2SE1.7英文api地址: http://download.oracle.com/javase/7/docs/api/J2SE1.6英文api地址: http://download.oracle ...
- Linux BFS简介
1. 什么是BFS 这里的BFS可不是广度优先算法,本文介绍的BFS是Linux的一个非Linux mainline调度算法.根据作者的描述BFS能够极大的提高低端设备(这里的低端设备的定义为:CPU ...
- asp.net个人笔记
1.进程外session一记 配置进程外session, 在webconfig中配置<sessionState timeout="60" mode="StateSe ...