CSS JavaScript仿天猫侧边网页菜单

<!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>

CSS JavaScript仿天猫侧边网页菜单,布布扣,bubuko.com

时间: 2024-10-25 00:49:33

CSS JavaScript仿天猫侧边网页菜单的相关文章

第15天 html css JavaScript dom选择器 示例左侧菜单

CSS补充: - position - background - hover - overflow - z-index - opacity 示例:输入框右边放置图标 JavaScript: 局部变量 var 基本数据类型: 数字 字符串 数组 字典 布尔值 For循环 条件语句 == != === !== || && 函数的定义: function func(){ ... }Dom 找标签 - 直接找 $('#id') $('.c1').siblings() - 简介找 操作: inner

javascript仿天猫加入购物车动画效果

  注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中完成这样的任务,最近需要做类似于天猫加入购物车动画效果,所以就在网上搜索了下,就看到类似的效果,就把代码截下来自己封装了下~~ 如果想要了解抛物线的细节,我建议大家先 看下 张鑫旭 讲解的抛物线的文章,再来看如下JS代码,可能理解更深点~~ http://www.zhangxinxu.com/wordpress/2013/12/javascri

css制作仿商城侧边导航

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .clear{ clear:both; } ul{ list-style: none; padding:0; } a{ display: block; text-decoration: none;

html css 仿微信底部自定义菜单

最近几个月一直从事微信开发,从刚开始的懵懂渐渐成长了一点.今天觉得微信底部自定义菜单,如果能在html的页面上也能显示就好了. 记得以前看过某个网页有类似效果.查找了该网页的css.  ok现在html css 实现微信自定义菜单效果. 不多说直接上代码. /** * 仿微信自定义菜单 * * @author xuyw * @email [email protected] * @date 2014-07-27 */ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HT

JS+CSS打造仿QQ面板的三级折叠下拉菜单

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS+CSS打造仿QQ面板的三级折叠下拉菜单-石家庄地毯</title> <style type="text/css"> *{ margin:0px; padding:0px; border:0p

DIV+CSS+JS仿Select下拉表单网页特效源代码下载

DIV+CSS+JS仿Select下拉表单 原文:DIV+CSS+JS仿Select下拉表单网页特效源代码下载 源代码下载地址:http://www.zuidaima.com/share/1550463331830784.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <

JavaScript实现向右伸出的多级网页菜单

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

水平布局的多级网页菜单,JS、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-Typ

CSS+JS仿QQ面板风格的多级折叠下拉菜单

<html> <head> <title>CSS+JS仿QQ面板风格的多级折叠下拉菜单丨石家庄玻璃隔断|石家庄自动门</title> <style type="text/css"> *{ margin:0px; padding:0px; border:0px; } body{ font-size:12px; color:#333;text-align:center;} .mbox{background:#73C2FF; wid