本文實例講述了jQuery簡單實現(xiàn)仿京東商城的左側(cè)菜單效果代碼。分享給大家供大家參考。具體如下：
這是一款挺漂亮的左側(cè)菜單效果，基于jQuery插件，但是還沒有真正的完善，有些閃動，也希望高人指點修正。仿京東商城風格的菜單。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/jquery-f-jd-shop-left-menu-codes/
具體代碼如下：
<!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>左側(cè)菜單效果</title><script type="text/javascript" src="jquery-1.6.2.min.js"></script><script>$().ready(function(){$(".testbox ul li").hover(function(){$(this).find(".boxshow").show();},function(){$(this).find(".boxshow").hide();});});</script><style type="text/css"><!--* { padding:0; list-style:none; margin:0}body { background:#666;}.testbox { margin-top: 10px; margin-left: 10px; width: 200px;}.testbox ul li a { color: #FFF; font-size: 12px; text-decoration: none; background-color: #333; padding: 8px; margin: 4px; float: left; border: 1px solid #FFF; position: relative; width: 100px;}.testbox ul li a:hover { color: #000; font-size: 12px; text-decoration: none; background-color: #CCC; padding: 8px; float: left; position: relative; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF; border-right-width: 1px; border-right-style: solid; border-right-color: #CCC; z-index: 2; width: 87px;}.testbox ul li .boxshow { background-color: #ccc; height: 330px; width: 300px; position: absolute; left: 118px; border: 1px solid #FFF; font-size: 12px; color: #000; padding: 10px; top: 14px; display: none; z-index: 1;}--></style></head><body><div class="testbox"> <ul> <li><a href="#">測試分類標題1</a> <div class="boxshow">分類標題1的內(nèi)容</div> </li> <li><a href="#">測試分類標題2</a> <div class="boxshow">分類標題2的內(nèi)容</div> </li> <li><a href="#">測試分類標題3</a> <div class="boxshow">分類標題3的內(nèi)容</div> </li> <li><a href="#">測試分類標題4</a> <div class="boxshow">分類標題4的內(nèi)容</div> </li> <li><a href="#">測試分類標題5</a> <div class="boxshow">分類標題5的內(nèi)容</div> </li> <li><a href="#">測試分類標題6</a> <div class="boxshow">分類標題6的內(nèi)容</div> </li> <li><a href="#">測試分類標題7</a> <div class="boxshow">分類標題7的內(nèi)容</div> </li> <li><a href="#">測試分類標題8</a> <div class="boxshow">分類標題8的內(nèi)容</div> </li> <li><a href="#">測試分類標題9</a> <div class="boxshow">分類標題9的內(nèi)容</div> </li> </ul></div></body></html>希望本文所述對大家的jQuery程序設(shè)計有所幫助。
新聞熱點
疑難解答
