JQUERY一个横向的菜单

最新推荐文章于 2024-08-15 08:55:57 发布

baisha0363640

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量77

点赞数

文章标签： javascript php ViewUI

原文链接：http://www.cnblogs.com/sshnwl/p/3446831.html

版权

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>测试</title>
</head>
<style type="text/css">
#nav {background:#0CC; margin:0 auto; width:1000px; height:25px;}
.n{width:200px; display:inline-block; float:left; border-left:1px dotted #fff;}
.t{width:100%; height:25px; background:#999; text-align:center; line-height:150%;}
.n ul{margin:0px; padding:0px; list-style:none; text-align:center; position:absolute;display:none; background:#CCC; width:200px;}
.n li{width:100%;height:20px;line-height:150%;}
#content{clear:both; width:1000px; margin:0 auto; }
</style>
<script type="text/javascript" src="jquery.js"/></script>
<script language="javascript">
$(function(){
 
$('.t').hover(function(){
 
var i = $('.t').index($(this)[0]);
var e = $('.t').eq(i);
e.next('ul').show()
     
    },function(){
     
var i = $('.t').index($(this)[0]);
var e = $('.t').eq(i);
e.next('ul').hide();
         
        })
 
$('.t').next('ul').hover(function(){
 
$(this).show()
     
    },function(){
     
$(this).hide()
         
        })
 
    })
 
 
</script>
 
<body>
 
<div id="nav">
 
<div class='n'>
<div class="t">
栏目点击
</div>
<ul>
<li>栏目测试</li>
<li>栏目测试</li>
<li>栏目测试</li>
<li>栏目测试</li>
<li>栏目测试</li>
</ul>
</div>
 
<div class="n">
<div class="t">
栏目点击
</div>
<ul>
<li>栏目测试</li>
<li>栏目测试</li>
<li>栏目测试</li>
<li>栏目测试</li>
<li>栏目测试</li>
</ul>
</div>
 
<div class="n">
<div class="t">
栏目点击
</div>
<ul>
<li>栏目测试</li>
<li>栏目测试</li>
<li>栏目测试</li>
<li>栏目测试</li>
<li>栏目测试</li>
</ul>
</div>
 
<div class="n">
<div class="t">
栏目点击
</div>
<ul>
<li>栏目测试</li>
<li>栏目测试</li>
<li>栏目测试</li>
<li>栏目测试</li>
<li>栏目测试</li>
</ul>
</div>
 
</div>
<div id="content">
这里是CONTNET的内容
 
</div>
</body>
</html>

一直在寻找最简单的代码，发现很多时候，看别人的代码你未必看得懂，可能是功夫不到家，PHP的代码能看懂，但应用到JS上面常常让人头大。

各位见人见智吧。什么问题可能对于高手来说都是略显简单了，希望大家不要笑我小白。

转载于:https://www.cnblogs.com/sshnwl/p/3446831.html

baisha0363640

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQUERY一个横向的菜单

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试</title></head><style type="text/css">#nav {ba...
复制链接

扫一扫