返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

jQuery实现级联菜单效果(仿淘宝首页菜单动画)

2020-05-24 21:28:10易采站长站整理

相信初学HTM+DIV+CSSl的同学们肯定也想做出淘宝网首页的菜单动画吧。今天我们就带大家体会一下级联菜单的显示。小编我只是实现了简单地效果，不过总体来说原理是一样的哦，那么先让大家看看效果图吧。
那么要实现这个效果我们当然要使用到的是jQuery,那么我就开始讲解怎么做的了，先上html和css的代码

<!DOCTYPE html>
<html>
<head>
<title>menu.html</title>
<meta http-equiv=”keywords” content=”keyword1,keyword2,keyword3″>
<meta http-equiv=”description” content=”this is my page”>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
<link rel=”stylesheet” type=”text/css” href=”../css/menu.css”>
<script type=”text/javascript” src=”../js/jquery-1.10.2.js”></script>
<script type=”text/javascript” src=”../js/menu.js”></script>
</head>
<body>
<ul>
<li class=”menu”>
<div class=”title”>
<span>电脑数码类产品</span>
</div>
<ul class=”content”>
<li class=”optn”><a href=”#”>笔记本</a>
<ul class=”tip”>
<li><a href=”#”>笔记本1</a></li>
<li><a href=”#”>笔记本1</a></li>
<li><a href=”#”>笔记本1</a></li>
<li><a href=”#”>笔记本1</a></li>
</ul>
</li>
<li class=”optn”><a href=”#”>移动硬盘</a>
<ul class=”tip”>
<li><a href=”#”>移动硬盘1</a></li>
<li><a href=”#”>移动硬盘1</a></li>
<li><a href=”#”>移动硬盘1</a></li>
<li><a href=”#”>移动硬盘1</a></li>
</ul>
</li>
<li class=”optn”><a href=”#”>电脑软件</a>
<ul class=”tip”>
<li><a href=”#”>电脑软件1</a></li>
<li><a href=”#”>电脑软件1</a></li>
<li><a href=”#”>电脑软件1</a></li>
<li><a href=”#”>电脑软件1</a></li>
</ul>
</li>
<li class=”optn”><a href=”#”>数码产品</a>
<ul class=”tip”>
<li><a href=”#”>数码产品1</a></li>
<li><a href=”#”>数码产品1</a></li>

相关文章 大家在看