jQuery仿FLASH上下翻滚效果导航菜单

最新推荐文章于 2021-03-02 12:34:18 发布

weixin_34247155

最新推荐文章于 2021-03-02 12:34:18 发布

阅读量73

点赞数

原文链接：https://my.oschina.net/pandao/blog/63320

版权

为什么80%的码农都做不了架构师？>>>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery仿FLASH上下翻滚效果导航菜单 By:Pandao, QQ：272383090</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;padding:50px;}
a{color:#444;text-decoration: none;}
a:hover{color:#065BC2;text-decoration: none;}
.clear{clear:both;}
img{border:none;vertical-align: middle;}
ul{list-style: none;}
.menu{}
.menu li{width:100px;height:32px;float:left;text-align:center;overflow:hidden;border-right:1px solid #222;}
.menu-link dt{background:#333;}
.menu-link dd{background:red;}
.menu-link a{display:block;display:block;padding:6px 10px;color:#fff;}
</style>
</head>
<body>
<h1 style="font-size:18px;margin:10px 0;">jQuery仿FLASH上下翻滚效果导航菜单</h1>
<ul class="menu">
    <li>
        <dl class="menu-link">
            <dt><a href="#1">HOME</a></dt>
            <dd><a href="#2">首页</a></dd>
        </dl>
    </li>
    <li>
        <dl class="menu-link">
            <dt><a href="#1">ABOUT US</a></dt>
            <dd><a href="#2">关于我们</a></dd>
        </dl>
    </li>
    <li>
        <dl class="menu-link">
            <dt><a href="#1">PRODUCTS</a></dt>
            <dd><a href="#2">产品系列</a></dd>
        </dl>
    </li>
    <li>
        <dl class="menu-link">
            <dt><a href="#1">NEWS</a></dt>
            <dd><a href="#2">新闻资讯</a></dd>
        </dl>
    </li>
    <li>
        <dl class="menu-link">
            <dt><a href="#1">CASES</a></dt>
            <dd><a href="#2">成功案例</a></dd>
        </dl>
    </li>
    <li>
        <dl class="menu-link">
            <dt><a href="#1">SERVICES</a></dt>
            <dd><a href="#2">客户服务</a></dd>
        </dl>
    </li>
<ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function() {
    $('.menu li').hover(function() {
        $(this).children('dl').animate({marginTop : '-32px'}, 200);
    }, function() {
        $(this).children('dl').animate({marginTop : '0'}, 200);
    });
});
</script>
</body>
</html>

转载于:https://my.oschina.net/pandao/blog/63320