1. 首页
  2. JAVASCRIPT
  3. 简单仿京东导航下拉菜单 javascript

简单仿京东导航下拉菜单 javascript

•javascript•阅读 3393

<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

相关推荐

Copyright © 2008-2024渝ICP备2022006305号-5.

本站所有数据收集于网络如有侵犯到您的权益请联系，进行下架处理。