简单实用的滑动门导航菜单(jquery实现)_菜单导航

简单实用的滑动门导航菜单(jquery实现): 发布时间：2020-05-16编辑：脚本学堂

简单实用的滑动门导航菜单

<!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    <FCK:meta charset="UTF-8" />
    <title>滑动门菜单代码</title>
    
    <style type="text/css">
    body{padding:20px;}
    .list{position:relative;display:inline-block;cursor:pointer;border-left:1px solid #CCC;border-top:1px solid #CCC;z-index:2;}
    .list li{display:inline-block;height:35px;<a href=http://www.jb200.com/article/15092.html target=_blank class=infotextkey>line-height</a>:35px;padding:0 5px;
    border-right:1px solid #CCC;border-bottom:1px solid #CCC;}
    .list .current{border-bottom-color:white;}
    .list,
    .list li{*display:inline;*zoom:1;}
    .box{width:104px;border:1px solid #CCC;position:relative;top:-1px;z-index:1;}
    .box .content{padding:10px;display:none;}
    </style>
    </head>
    <body>
    <ul class="list">
    <li>设计</li><li>前端</li><li>后台</li>
    </ul>
    <section class="box">
    <section class="content">Ps Fw Fl</section>
    <section class="content">HTML,CSS,JS</section>
    <section class="content">ASP.NET PHP</section>
    </section>
    <script type="text/javascript" src="/source/js/<a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a>1.3.2.js"></script>
    <script type="text/javascript">
$(function(){
    $list=$(".list").eq(0);
    $lis=$list.children("li");
    $box=$('.box').eq(0);
    $contents=$box.children(".content");
    $lis.eq(0).addClass("current");
    $contents.eq(0).show();
    $lis.mouseover(function(){
        var $index=$lis.index($(this));
        $lis.removeClass("current");
        $contents.hide();
        $(this).addClass("current")
        $contents.eq($index).show();
    })
})
</script>
    </body>
    </html>

提示：可修改代码后再运行!

上一篇：纯CSS3制作的Windows 7开始菜单
下一篇：可伸缩的超酷导航菜单

与简单实用的滑动门导航菜单(jquery实现) 有关的文章

本文标题：简单实用的滑动门导航菜单(jquery实现)
本页链接：http://www.jb200.com/tx/18.html

浏览排行

栏目分类

热点文章

简单实用的滑动门导航菜单(jquery实现)