JavaScript+CSS实现仿天猫侧边网页菜单效果


Posted in Javascript onAugust 25, 2015

本文实例讲述了JavaScript+CSS实现仿天猫侧边网页菜单效果。分享给大家供大家参考。具体如下:

这是一款自己写的仿天猫的菜单效果,二级分类的功能已经实现,但没有美化,留着用的朋友自己完善吧,JS功能已经实现,鼠标移在主分类上,二级分类向右伸出展开,目前淘宝网、天猫购物、京东都在用的导航菜单特效,测试时候请先点击一下菜单,主菜单就显示出来了。

运行效果截图如下:

JavaScript+CSS实现仿天猫侧边网页菜单效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿天猫侧边网页菜单</title>
<style type="text/css">
*{margin:0; padding:0;}
body{ font-size:14px; font-family:"宋体";}
h1, h2, h3{ font-size:14px; font-weight:normal;}
li{ list-style:none;}
a{ color:#333; text-decoration:none;}
#nav{ width:202px; height:35px; background:#C00; margin:50px 0 0 20px;}
#nav h1{ padding-left:17px; line-height:35px; color:#fff; margin-right:17px;}
#box{ width:200px; border:1px solid #B00; border-top:none; margin-left:20px; display:none;}
#subnav{width:200px;}
#subnav .list{ width:200px; height:30px;}
#subnav .list h2{ width:160px; height:30px; padding-left:30px; line-height:30px; margin-right:10px;}
#subnav .list a:hover, #subnav .active a:hover{ color:#900; font-weight:bold;}
#subnav .active{ width:200px; height:30px; border-bottom:1px solid #b00; border-top:1px solid #b00; position:relative;}
#subnav .active h2{ width:170px; height:30px; padding-left:30px; line-height:30px; background:#fff; position:absolute; left:1px; top:0; z-index:4;}
#subnav .list_nav{ width:500px; overflow:hidden; border:1px solid #b00; position:absolute; left:200px; top:-1px; z-index:3; display:none;}
</style>
<script type="text/javascript">
window.onload=function()
{
 var oNav=document.getElementById('nav');
 var oBox=document.getElementById('box');
 var oSubnav=document.getElementById('subnav');
 var aLi=oSubnav.getElementsByTagName('li');
 var i=0;
 oNav.onclick=function()
 {
  if(oBox.style.display=='block')
  {
   oBox.style.display='none';
  }
  else
  {
   oBox.style.display='block';
  }
 }
 for(i=0;i<aLi.length;i++)
 {
  if(aLi[i].className=='list')
  {
   aLi[i].onmousemove=function()
   {
    for(i=0;i<aLi.length;i++)
    {
     var aDivList=this.getElementsByTagName('div')[0];
     aDivList.style.display='block';
     this.className='active';
    }
   }
   aLi[i].onmouseout=function()
   {
    for(i=0;i<aLi.length;i++)
    {
     var aDivList=this.getElementsByTagName('div')[0];
     aDivList.style.display='none';
     this.className='list';  
    }
   }
  }
 }
};
</script>
</head>
<body>
<div id="nav">
<h1>所有商品分类</h1>
</div>
<div id="box">
 <ul id="subnav">
  <li class="list">
   <h2><a href="#">服饰内衣、鞋靴运动</a></h2>
   <div class="list_nav">
    <ul>
     <li>1</li>
     <li>1</li>
     <li>1</li>
     <li>1</li>
    </ul>
   </div>
  </li>
  <li class="list">
   <h2><a href="#">电子商品</a></h2>
   <div class="list_nav">
    <ul>
     <li>222</li>
     <li>2222</li>
     <li>2222</li>
     <li>22222</li>
    </ul>
   </div>
  </li>
  <li class="list">
   <h2><a href="#">服饰内衣、鞋靴运动</a></h2>
   <div class="list_nav">
    <ul>
     <li>3333</li>
     <li>3333</li>
     <li>3333</li>
     <li>3333</li>
    </ul>
   </div>
  </li>
  <li class="list">
   <h2><a href="#">服饰内衣、鞋靴运动</a></h2>
   <div class="list_nav">
    <ul>
     <li>1</li>
     <li>1</li>
     <li>1</li>
     <li>1</li>
    </ul>
   </div>
  </li>
 </ul>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
jquery 实现表单验证功能代码(简洁)
Jul 03 Javascript
js清理Word格式示例代码
Feb 13 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 Javascript
Vue实现穿梭框效果
Sep 30 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 #Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 #Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 #Javascript
js文本框走动跑马灯效果代码分享
Aug 25 #Javascript
jQuery实现图片左右滚动特效
Apr 20 #Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 #Javascript
jquery图片滚动放大代码分享(1)
Aug 25 #Javascript
You might like
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
php中final关键字用法分析
2016/12/07 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
PHP7修改的函数
2021/03/09 PHP
jquery实现倒计时代码分享
2014/06/13 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
ansible作为python模块库使用的方法实例
2017/01/17 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
优良学风班总结材料
2014/02/08 职场文书
会计自荐信范文
2014/03/09 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
电话客服工作职责
2014/07/27 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
2015年环保局工作总结
2015/05/22 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python