类似淘宝搜索排序的例子
2011-02-21 13:42
274 查看
1个隐藏ul
代码如下<ul id="J_OrderByList" class="order-options item-list">
<li class="by-price-asc"><a href="/search?q=sdf&commend=all&ssid=s5-e&bcoffset=2&sort=price-asc">价格从低到高</a></li>
<li class="by-price-desc"><a href="/search?q=sdf&commend=all&ssid=s5-e&bcoffset=2&sort=price-desc">价格从高到低</a></li>
<li class="by-credit-desc"><a href="/search?q=sdf&commend=all&ssid=s5-e&bcoffset=2&sort=credit-desc">信用从高到低</a></li>
<li class="by-sale-desc"><a href="/search?q=sdf&commend=all&ssid=s5-e&bcoffset=2&sort=sale-desc">销量从高到低</a></li>
<li class="by-default selected"><a href="/search?q=sdf&commend=all&ssid=s5-e&bcoffset=2&sort=commend">恢复默认排序</a></li>
</ul>
然后点击span（就是你看到的那个排序的模拟select）就会display他
然后定位到他的下面就可以了
很多具有分类导航菜单都有这种效果！
<!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=gb2312" />
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("menu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() { //这里改一下事件，下面的项目加超级链接即可！
this.className=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover//b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]></script>
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { width:977px; height:28px; margin:0 auto;background:#000;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; width:90px; margin-left:3px; background:url(menuico.gif) center right no-repeat;}
#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:#000000; font-size:14px; color:#FFFFFF}
#menu ul li a:hover { background:#2c2c2c; color:green;}
#menu ul li ul { border:1px solid #ccc; display:none; position:absolute;}
#menu ul li ul li { float:none; width:87px; background:#2c2c2c; margin:0;}
#menu ul li ul li a { background:none;}
#menu ul li ul li a:hover { background:#000; color:green;}
#menu ul li:hover ul { display:block;}
#menu ul li.sfhover ul { display:block;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">公司简介</a>
<ul>
<li><a href="#">企业文化</a></li>
<li><a href="#">组织结构</a></li>
<li><a href="#">公司资质</a></li>
</ul>
</li>
<li><a href="#">新闻中心</a>
<ul>
<li><a href="#">公司新闻</a></li>
<li><a href="#">行业新闻</a></li>
<li><a href="#">装修知识</a></li>
</ul>
</li>
<li><a href="#">工装案例</a></li>
<li><a href="#">家装案例</a></li>
<li><a href="#">设计精英</a></li>
<li><a href="#">在线报装</a></li>
<li><a href="#">招贤纳士</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
上面的是鼠标移动移出事件，事件自己更改，然后超级连接里可以加AJAX效果，连接到后台去更新数据！
<!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=gb2312" />
<script type="text/javascript">
var $=function(id){return document.getElementById(id);}
var flag=true;
function menuFix() {
$('msort').onclick=function(){
if(flag==true)
{$('sort').style.display='block';flag=false;}
else
{$('sort').style.display='none';flag=true;}
}
}
window.onload=menuFix;
</script>
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a {color: #000; text-decoration: none;}
#menu {position:relative;width:120px;margin:0 auto;background:#fff;}
#menu ul {list-style: none;margin: 0px; padding: 0px;width:120px;}
#menu ul li {float:left; width:120px; }
#menu ul li a {display:block; width:120px; height:28px; line-height:28px; text-align:center; background:#fff; font-size:12px;}
#msort{border:1px solid #ccc;}
#sort{border:1px solid #ccc;width:120px;display:none; position:absolute;top:28px;left:0px;}
#sort ul li {border-bottom:1px dashed #ccc;float:none; width:120px; background:#fff; margin:0;}
#sort ul li a{background:none; width:120px;}
#sort ul li a:hover{background:#000;color:#fff;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li id='msort'><a>默认排序</a></li>
<li id='sort'>
<ul >
<li><a href="#">价格从低到高</a></li>
<li><a href="#">价格从高到低</a></li>
<li><a href="#">信用从低到高</a></li>
<li><a href="#">信用从高到低</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
这个会更直接一些！IE/FF/CHROME都测试过了！外型都是一样的。
代码如下<ul id="J_OrderByList" class="order-options item-list">
<li class="by-price-asc"><a href="/search?q=sdf&commend=all&ssid=s5-e&bcoffset=2&sort=price-asc">价格从低到高</a></li>
<li class="by-price-desc"><a href="/search?q=sdf&commend=all&ssid=s5-e&bcoffset=2&sort=price-desc">价格从高到低</a></li>
<li class="by-credit-desc"><a href="/search?q=sdf&commend=all&ssid=s5-e&bcoffset=2&sort=credit-desc">信用从高到低</a></li>
<li class="by-sale-desc"><a href="/search?q=sdf&commend=all&ssid=s5-e&bcoffset=2&sort=sale-desc">销量从高到低</a></li>
<li class="by-default selected"><a href="/search?q=sdf&commend=all&ssid=s5-e&bcoffset=2&sort=commend">恢复默认排序</a></li>
</ul>
然后点击span（就是你看到的那个排序的模拟select）就会display他
然后定位到他的下面就可以了
很多具有分类导航菜单都有这种效果！
<!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=gb2312" />
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("menu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() { //这里改一下事件，下面的项目加超级链接即可！
this.className=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover//b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]></script>
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { width:977px; height:28px; margin:0 auto;background:#000;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; width:90px; margin-left:3px; background:url(menuico.gif) center right no-repeat;}
#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:#000000; font-size:14px; color:#FFFFFF}
#menu ul li a:hover { background:#2c2c2c; color:green;}
#menu ul li ul { border:1px solid #ccc; display:none; position:absolute;}
#menu ul li ul li { float:none; width:87px; background:#2c2c2c; margin:0;}
#menu ul li ul li a { background:none;}
#menu ul li ul li a:hover { background:#000; color:green;}
#menu ul li:hover ul { display:block;}
#menu ul li.sfhover ul { display:block;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">公司简介</a>
<ul>
<li><a href="#">企业文化</a></li>
<li><a href="#">组织结构</a></li>
<li><a href="#">公司资质</a></li>
</ul>
</li>
<li><a href="#">新闻中心</a>
<ul>
<li><a href="#">公司新闻</a></li>
<li><a href="#">行业新闻</a></li>
<li><a href="#">装修知识</a></li>
</ul>
</li>
<li><a href="#">工装案例</a></li>
<li><a href="#">家装案例</a></li>
<li><a href="#">设计精英</a></li>
<li><a href="#">在线报装</a></li>
<li><a href="#">招贤纳士</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
上面的是鼠标移动移出事件，事件自己更改，然后超级连接里可以加AJAX效果，连接到后台去更新数据！
<!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=gb2312" />
<script type="text/javascript">
var $=function(id){return document.getElementById(id);}
var flag=true;
function menuFix() {
$('msort').onclick=function(){
if(flag==true)
{$('sort').style.display='block';flag=false;}
else
{$('sort').style.display='none';flag=true;}
}
}
window.onload=menuFix;
</script>
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a {color: #000; text-decoration: none;}
#menu {position:relative;width:120px;margin:0 auto;background:#fff;}
#menu ul {list-style: none;margin: 0px; padding: 0px;width:120px;}
#menu ul li {float:left; width:120px; }
#menu ul li a {display:block; width:120px; height:28px; line-height:28px; text-align:center; background:#fff; font-size:12px;}
#msort{border:1px solid #ccc;}
#sort{border:1px solid #ccc;width:120px;display:none; position:absolute;top:28px;left:0px;}
#sort ul li {border-bottom:1px dashed #ccc;float:none; width:120px; background:#fff; margin:0;}
#sort ul li a{background:none; width:120px;}
#sort ul li a:hover{background:#000;color:#fff;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li id='msort'><a>默认排序</a></li>
<li id='sort'>
<ul >
<li><a href="#">价格从低到高</a></li>
<li><a href="#">价格从高到低</a></li>
<li><a href="#">信用从低到高</a></li>
<li><a href="#">信用从高到低</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
这个会更直接一些！IE/FF/CHROME都测试过了！外型都是一样的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android项目类似淘宝 电商 搜索功能，监听软键盘搜索事件，延迟自动搜索，以及时间排序的搜索历史记录的实现
- Android项目类似淘宝 电商 搜索功能，监听软键盘搜索事件，延迟自动搜索，以及时间排序的搜索历史记录的实现
- Android项目类似淘宝 电商 搜索功能，监听软键盘搜索事件，延迟自动搜索，以及时间排序的搜索历史记录的实现
- Android 类似淘宝 电商 搜索功能，监听软键盘搜索事件，延迟自动搜索，以及时间排序的搜索历史记录的实现
- 通讯录搜索排序 类似微信通讯录
- EditText和数据库结合使用,类似淘宝搜索功能及历史记录
- 有没有类似淘宝app的例子
- struts2+spring3+ibatis下类似淘宝搜索的的三级互联效果
- （字母排序搜索）类似微信通讯录效果
- 以淘宝商品搜索漫谈查询条件的排序对效率的影响(SQL查询性能优化,附调优(性能诊断)DMV)
- List<T>排序的例子---Linq排序 和 for循环搜索
- 以淘宝商品搜索漫谈查询条件的排序对效率的影响(SQL查询性能优化,附调优(性能诊断)DMV)
- 通讯录姓名搜索和排序的代码例子
- 类似淘宝的搜索智能提示
- 以淘宝商品搜索漫谈查询条件的排序对效率的影响(SQL查询性能优化,附调优(性能诊断)DMV)
- appCan开发：oninput实现动态请求搜索功能例子
- 解决solr搜索多词匹配度和排序方案
- 实现像淘宝一样牛的语音搜索框
- Counting Sort 计数排序算法在学生管理系统排序的应用例子
- 基于LBS的地理位置附近的搜索以及由近及远的排序