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 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
JavaScript门面模式详解
Oct 19 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 Javascript
vue3.0生命周期的示例代码
Sep 24 Javascript
react国际化react-intl的使用
May 06 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
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
angular多语言配置详解
2019/05/16 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
python分割文件的常用方法
2014/11/01 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
使用Python 统计高频字数的方法
2019/01/31 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
银行职员个人的工作自我评价
2014/02/15 职场文书
新春寄语大全
2014/04/09 职场文书
英语教师求职信
2014/06/16 职场文书
2015年元旦标语大全
2014/12/09 职场文书
大学生村官个人总结
2015/02/15 职场文书
幼儿教师辞职信
2015/02/27 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
初中重阳节活动总结
2015/05/05 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android