仿当当网淘宝网等主流电子商务网站商品分类导航菜单

日期：2024-12-26 作者：chinayema 移动：http://mip.riyuangf.com/mobile/quote/38509.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src=https://www.jb51.net/article/"http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
#sidebar-menu {

border-left : 1px solid #F93;
width : 237px;

margin : 0;
padding : 0;
background : #FFF7F0;
}
#sidebar-menu > ul {
list-style : none;
padding : 0;
margin : 0;
}
#sidebar-menu > ul > li {
list-style : none;
padding : 0;
margin : 0;
border-bottom : 1px solid #FDEADB;
position : relative;
}
#sidebar-menu > ul > li.selected {
background : #FFF;
border-top : 1px solid #F93;
border-bottom : 1px solid #F93;
}
#sidebar-menu > ul > li.first {
border-top : 1px solid #F93;
}
#sidebar-menu > ul > li.last {
border-bottom : 1px solid #F93;
}

#sidebar-menu .menu-item {
background : #FFF7F0 no-repeat left center;
height : 32px;
border-right : 1px solid #F93;
z-index : 10000;
position : relative;
}

#sidebar-menu > ul > li.selected .menu-item {
border-right : 1px solid #FFF;
background : #FFF no-repeat left center;
}
#sidebar-menu .menu-item span {
font-size : 13px;
font-weight : bold;
height : 32px;
line-height : 32px;
padding-left : 35px;
padding-top : 2px;
display : inline-block;
}

#sidebar-menu .menu-panel {
padding : 10px 20px;
display : none;
border : 1px solid #F93;
width : 560px;
position : absolute;
left : 236px;
top : -1px;
z-index : 5000;
min-height : 50px;
box-shadow: 1px 1px 4px #888888;
}

#sidebar-menu div.menu-panel.selected {
display : block;
}

#sidebar-menu div.menu-panel ul {
list-style : none;
padding : 0;
margin : 0;
}
#sidebar-menu div.menu-panel ul li {
list-style : none;
padding : 5px 0px;
margin : 0;
}

#sidebar-menu div.menu-panel>ul>li>h2 {
margin : 0;
padding : 0;
padding-top : 2px;
font-size : 13px;
color : red;
float : left;
width : 60px;
}
#sidebar-menu div.menu-panel>ul>li>div.link-list {
float : left;
padding-left : 10px;
width : 450px;
}
#sidebar-menu div.menu-panel div.link-wrapper {
display : inline-block;
padding : 3px 0px;
}
#sidebar-menu div.menu-panel div.link-wrapper span {
font-size : 13px;
color : #888;
padding-right : 4px;
}
#sidebar-menu div.menu-panel div.link-list a {
font-size : 13px;
color : #888;
text-decoration : none;
}
#sidebar-menu div.menu-panel div.link-list a:hover {
text-decoration : underline;
}
#sidebar-menu div.clear {
clear : both;
height : 0;
line-height : 0;
}
</style>
<script type="text/javascript">
$(function() {
$("#sidebar-menu > ul > li").hover(function() {
$(this).addClass("selected");
$(".menu-panel", this).addClass("selected");
var bgImg = $(".menu-item", this).css("background-image");
bgImg = bgImg.replace(".", "-hover.");
$(".menu-item", this).css("background-image", bgImg);
}, function() {
$(this).removeClass("selected");
$(".menu-panel", this).removeClass("selected");
var bgImg = $(".menu-item", this).css("background-image");
bgImg = bgImg.replace("-hover.", ".");
$(".menu-item", this).css("background-image", bgImg);
});
});
</script>

<title>Side bar demo</title>
</head>
<body>
<div id="sidebar-menu">
<ul>
<li class="first">
<div class="menu-item" style="background-image : url(images/tubiao.jpg);">
<span>图书音像</span>
</div>
<div class="menu-panel">
<ul>
<li>
<h2>高考图书</h2>
<div class="link-list">
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">物理习题</a></div>
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">生物</a></div>
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">高考复习题</a></div>
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">语文作文大全</a></div>
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">品德</a></div>
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">历年高考真题解析与答案</a></div>
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">考试题</a></div>
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">化学实验测试</a></div>
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">生物测试</a></div>
</div>
<div class="clear"></div>
</li>
<li>
<h2>专辑</h2>
<div class="link-list">
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">郑智化专辑</a></div>
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">阿嚏</a></div>
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">张韵</a></div>
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">刘德华</a></div>
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">成龙</a></div>
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">王菲</a></div>
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">最新歌曲排行榜</a></div>
</div>
<div class="clear"></div>
</li>
<li>
<h2>生活图书</h2>
<div class="link-list">
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">领悟人生</a></div>
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">天文地理</a></div>
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">旅游百科</a></div>
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">炒菜一本通</a></div>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</li>
<li>
<div class="menu-item" style="background-image : url(images/tubiao.jpg);">
<span>生活类</span>
</div>
<div class="menu-panel">
<ul>
<li>
<h2>炒菜宝典</h2>
<div class="link-list">
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">领悟人生</a></div>
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">天文地理</a></div>
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">旅游百科</a></div>
<div class="link-wrapper"><span>|</span><a href=https://www.jb51.net/article/"#">炒菜一本通</a></div>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
</li>
<li>
<div class="menu-item">
<span>商品分类</span>
</div>
<div class="menu-panel">
商品分类内容......
</div>
</li>
<li>
<div class="menu-item">
<span>商品分类</span>
</div>
<div class="menu-panel">
商品分类内容......
</div>
</li>
<li>
<div class="menu-item">
<span>商品分类</span>
</div>
<div class="menu-panel">
商品分类内容......
</div>
</li>
<li>
<div class="menu-item">
<span>商品分类</span>
</div>
<div class="menu-panel">
商品分类内容......
</div>
</li>
<li>
<div class="menu-item">
<span>商品分类</span>
</div>
<div class="menu-panel">
商品分类内容......
</div>
</li>
<li>
<div class="menu-item">
<span>商品分类</span>
</div>
<div class="menu-panel">
商品分类内容......
</div>
</li>
<li>
<div class="menu-item">
<span>商品分类</span>
</div>
<div class="menu-panel">
商品分类内容......
</div>
</li>
<li>
<div class="menu-item">
<span>商品分类</span>
</div>
<div class="menu-panel">
商品分类内容......
</div>
</li>
<li class="last">
<div class="menu-item">
<span>商品分类</span>
</div>
<div class="menu-panel">
商品分类内容......
</div>
</li>
</ul>
</div>
</body>
</html>

特别提示：本信息由相关用户自行提供，真实性未证实，仅供参考。请谨慎采用，风险自负。

点赞 0举报收藏 0评论 0

0 条相关评论

相关最新动态

推荐最新动态

点击排行