谁能给个类似淘宝搜索排序的例子！

这不就是根据排序项选择的下拉框的值传递到后台，然后根据值来决定是order by 字段 desc|asc吗？

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[//><!]]></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都测试过了！外型都是一样的。

http://www.open-lib.com/Type/210-1.jsp下拉菜单....

调试易

谁能给个类似淘宝搜索排序的例子！

解决方案 »