JS+CSS實現(xiàn)電子商務網(wǎng)站導航模板效果代碼
更新時間：2015年09月10日 11:04:28 作者：企鵝
這篇文章主要介紹了JS+CSS實現(xiàn)電子商務網(wǎng)站導航模板效果代碼,涉及JavaScript結合css動態(tài)操作頁面元素屬性的相關技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了JS+CSS實現(xiàn)電子商務網(wǎng)站導航模板效果代碼。分享給大家供大家參考。具體如下：
這是一款JS+CSS實現(xiàn)的電子商務網(wǎng)站導航模板，二級導航菜單，超強美化，超強實用性，分享給大家。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-css-dzsw-wen-nav-style-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">
<TITLE>適合電子商務網(wǎng)站CSS導航模板版</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<style>
BODY {
}
UL {
LIST-STYLE-TYPE: none;
padding:0px;
margin:0px;
}
LI {
FONT-SIZE: 12px;
COLOR: #333;
LINE-HEIGHT: 1.5em;
FONT-FAMILY: "宋體", Arial, Verdana;
}
.hide {
DISPLAY: none
}
#mainmenu_top UL LI .menuhover {
BACKGROUND: url(images/mainmenu_s.gif) no-repeat;
COLOR: #fff;
}
#mainmenu_body
{
margin-top:100px;
}
#mainmenu_top UL LI A {
MARGIN-TOP: 2px;
CURSOR: pointer;
PADDING-TOP: 8px;
HEIGHT: 20px;
text-decoration: none;
}
#mainmenu_top {
width:100%;
HEIGHT: 28px;
display:block;
overflow:hidden;
}
#mainmenu_top UL LI {FLOAT: left}
#mainmenu_top UL LI A {
WIDTH: 81px;
height:auto;
DISPLAY: block;
COLOR: #666666;
TEXT-ALIGN: center;
FONT-WEIGHT: bold;
BACKGROUND: url(images/mainmenu_h.gif) no-repeat;
}
#mainmenu_bottom {
width:100%;
height:32px;
line-height:32px;
display:block;
overflow:hidden;
BACKGROUND: url(images/mainmenu_bg.jpg) repeat-x
}
#mainmenu_bottom .mainmenu_rbg {
HEIGHT: 32px;
COLOR: #fff;
MARGIN-LEFT: 0px;
PADDING: 0px 0px 0px 5px;
BACKGROUND: url(images/mainmenu_r.gif) no-repeat right 50%;
}
#mainmenu_bottom UL {}
#mainmenu_bottom UL LI {
PADDING-LEFT: 8px;
FLOAT: left;
MARGIN-LEFT: 7px;
HEIGHT: 32px;
}
#mainmenu_bottom UL LI.se {
FLOAT: left;
MARGIN-LEFT: 7px;
HEIGHT: 32px;
PADDING-LEFT: 8px;
BACKGROUND: url(images/menulink_bg_l.gif) no-repeat;
}
#mainmenu_bottom UL LI A {
COLOR: #fff;
LINE-HEIGHT: 32px;
PADDING-RIGHT: 18px;
DISPLAY: block;
text-decoration: none;
BACKGROUND: url(images/menulink_bg_normal.gif) no-repeat right 50%;
}
#mainmenu_bottom UL LI A:hover {
BACKGROUND: url(images/menulink_bg_normal.gif) no-repeat right 50%;
color: #FFCC00;
}
#mainmenu_bottom UL LI A.se {
COLOR: #fff;
LINE-HEIGHT: 32px;
PADDING-RIGHT: 18px;
DISPLAY: block;
BACKGROUND: url(images/menulink_bg_r.gif) no-repeat right 50%;
}
</style>
<SCRIPT type=text/javascript>
var waitting = 1;
var secondLeft = waitting;
var timer;
var sourceObj;
var number;
function getObject(objectId)//獲取id的函數(shù)
{
if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId);
} else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId);
} else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
} else {
return false;
}
}
function SetTimer()//主導航時間延遲的函數(shù)
{
for(j=1; j <10; j++){
if (j == number){
if(getObject("mm"+j)!=false){
getObject("mm"+ number).className = "menuhover";
getObject("mb"+ number).className = "";
}
}
else{
if(getObject("mm"+j)!=false){
getObject("mm"+ j).className = "";
getObject("mb"+ j).className = "hide";
}
}
}
}
function CheckTime()//設置時間延遲后
{
secondLeft--;
if ( secondLeft == 0 )
{
clearInterval(timer);
SetTimer();
}
}
function showM(thisobj,Num)//主導航鼠標滑過函數(shù),帶時間延遲
{
number = Num;
sourceObj = thisobj;
secondLeft = 1;
timer = setTimeout('CheckTime()',100);
}
function OnMouseLeft()//主導航鼠標移出函數(shù),清除時間函數(shù)
{
clearInterval(timer);
}
</SCRIPT>
<!--導航開始-->
<DIV id=mainmenu_body>
<!--主導航開始-->
<DIV id=mainmenu_top>
<UL>
<LI><A id=mm1 onmouseover=showM(this,1); onmouseout=OnMouseLeft(); href="#" target=_parent>網(wǎng)站首頁</A> </LI>
<LI><A id=mm2 onmouseover=showM(this,2); onmouseout=OnMouseLeft(); href="#" target=_parent>CCS導航</A> </LI>
<LI><A id=mm3 onmouseover=showM(this,3); onmouseout=OnMouseLeft(); href="#" target=_parent>源碼下載</A> </LI>
<LI><A id=mm4 onmouseover=showM(this,4); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS模板</A> </LI>
<LI><A id=mm5 onmouseover=showM(this,5); onmouseout=OnMouseLeft(); href="#" target=_parent>后臺模板</A> </LI>
<LI><A id=mm6 onmouseover=showM(this,6); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS技巧</A> </LI>
<LI><A id=mm7 onmouseover=showM(this,7); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS菜單</A> </LI>
<LI style="DISPLAY: none"><A id=mm8 onmouseover=showM(this,8); onmouseout=OnMouseLeft(); href="#" target=_parent>HTML+CSS模板</A> </LI>
<LI><A id=mm9 onmouseover=showM(this,9); onmouseout=OnMouseLeft(); href="#" target=_parent>SEO優(yōu)化</A> </LI></UL>
</DIV>
<!--子導航導航開始-->
<DIV id=mainmenu_bottom>
<DIV class=mainmenu_rbg>
<UL class=hide id=mb1>
<LI><A href="#">本導航非常適合于分類比較多電子商務站等網(wǎng)站的導航模板版</A> </LI>
<LI><A href="#">此導航很漂亮</A> </LI>
</UL>
<UL class=hide id=mb2>
<LI style="DISPLAY: none"><A href="#" target=_parent>免費模板網(wǎng)</A> </LI>
<LI><A href="#" target=_parent>免費模板網(wǎng)</A> </LI>
<LI><A href="#" target=_parent>HTML+CSS模板</A> </LI>
<LI><A href="#" target=_parent>HTML+CSS模板</A> </LI>
<LI><A href="#" target=_parent>HTML+CSS教程</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)頁特效</A> </LI></UL>
<UL class=hide id=mb3>
<LI style="DISPLAY: none"><A href="#" target=_parent>免費模板網(wǎng)</A> </LI>
<LI style="MARGIN-LEFT: 7px"><A href="#" target=_parent>免費模板網(wǎng)</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)上商城</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)上商城</A> </LI>
<LI><A href="#" target=_parent>MYSQL數(shù)據(jù)庫</A> </LI>
<LI><A href="#" target=_parent>MYSQL數(shù)據(jù)庫</A> </LI>
<LI><A href="#" target=_parent>電子商務</A> </LI>
<LI><A href="#" target=_parent>網(wǎng)頁特效</A> </LI></UL>
<UL class=hide id=mb4>
<LI style="DISPLAY: none; MARGIN-LEFT: 80px"><A href="#" target=_parent>免費模板網(wǎng)首頁</A> </LI>
<LI style="MARGIN-LEFT: 80px"><A href="#" target=_parent>網(wǎng)頁特效</A> </LI>
<LI><A href="#" target=_parent>MYSQL數(shù)據(jù)庫</A> </LI>
<LI><A href="#" target=_parent>MSSQL數(shù)據(jù)庫</A> </LI></UL>
<UL class=hide id=mb5>
<LI style="DISPLAY: none"><A href="#" target=_parent>服務器租用首頁</A> </LI>
<LI style="MARGIN-LEFT: 80px"><A href="#" target=_parent>服務器租用首頁</A> </LI>
<LI><A href="#" target=_parent>服務器租用</A> </LI>
<LI><A href="#" target=_parent>服務器托管</A> </LI>
<LI><A href="#" target=_parent>超級機房</A> </LI>
<LI><A href="#" target=_parent>CDN加速設施</A> </LI></UL>
<UL class=hide id=mb6>
<LI style="DISPLAY: none"><A href="#" target=_parent>企業(yè)郵局首頁</A> </LI>
<LI style="MARGIN-LEFT: 160px"><A href="#" target=_parent>企業(yè)郵局首頁</A> </LI>
<LI><A href="#" target=_parent>綠色G級郵箱</A> </LI>
<LI><A href="#" target=_parent>綠色企業(yè)郵箱</A> </LI></UL>
<UL class=hide id=mb7>
<LI style="DISPLAY: none"><A href="#" target=_parent>網(wǎng)站制作首頁</A> </LI>
<LI style="MARGIN-LEFT: 180px"><A href="#" target=_parent>企業(yè)建站</A> </LI>
<LI><A href="#" target=_parent>商城制作</A> </LI>
<LI><A href="#" target=_parent>個人建站</A> </LI>
<LI><A href="#" target=_parent>門戶建站</A> </LI></UL>
<UL class=hide id=mb8 style="DISPLAY: none">
<LI style="MARGIN-LEFT: 270px"><A href="#" target=_parent>代理加盟</A> </LI>
<LI><A href="#" target=_parent>代理加盟</A> </LI>
<LI><A href="#" target=_parent>代理加盟</A> </LI></UL>
<UL class=hide id=mb9>
<LI style="MARGIN-LEFT: 180px"><A href="#">代理加盟</A> </LI>
<LI><A href="#" target=_parent>聯(lián)系我們</A> </LI>
<LI><A href="#" target=_parent>本站通知</A> </LI>
<LI><A href="#" target=_parent>行業(yè)新聞</A> </LI>
<LI><A href="#" target=_parent>誠聘英才</A> </LI></UL>
<script>
function mmenuURL()//主導航、二級導航顯示函數(shù)
{
var thisURL = document.URL;
tmpUPage = thisURL.split( "/" );
thisUPage_s = tmpUPage[ tmpUPage.length-2 ];
thisUPage_s= thisUPage_s.toLowerCase();//小寫
//thisUPage=thisUPage.substring(0,4)
if(thisUPage_s=="test.jb51.net"||thisUPage_s=="m.fzitv.net"||thisUPage_s=="demo.jb51.net")
{
getObject("mm1").className="menuhover"
getObject("mb1").className = "";
}
else if(thisUPage_s=="domain")
{
getObject("mm2").className="menuhover"
getObject("mb2").className = "";
}
else if(thisUPage_s=="hosting")
{
getObject("mm3").className="menuhover"
getObject("mb3").className = "";
}
else if(thisUPage_s=="mail")
{
getObject("mm4").className="menuhover"
getObject("mb4").className = "";
}
else if(thisUPage_s=="solutions"||thisUPage_s=="site"){
getObject("mm5").className="menuhover"
getObject("mb5").className = "";
}
else if(thisUPage_s=="promotion"){
getObject("mm6").className="menuhover"
getObject("mb6").className = "";
}
else if(thisUPage_s=="trade"||thisUPage_s=="phonetic"||thisUPage_s=="switchboard"||thisUPage_s=="note"){
getObject("mm7").className="menuhover"
getObject("mb7").className = "";
}
else if(thisUPage_s=="benefit"){
getObject("mm8").className="menuhover"
getObject("mb8").className = "";
}
else if(thisUPage_s=="userlogon"||thisUPage_s=="domain_service"||thisUPage_s=="hosting_service"||thisUPage_s=="mail_service"||thisUPage_s=="Payed"||thisUPage_s=="unPayed"||thisUPage_s=="Invoice"||thisUPage_s=="Finance"||thisUPage_s=="RegInfoModify"){
getObject("mm9").className="menuhover"
getObject("mb9").className = "";
}
else
{
getObject("mm1").className="";
getObject("mb1").className = "";
}
}
window.load=mmenuURL()
</script>
</DIV>
</DIV>
</DIV>
</body>
</html>
希望本文所述對大家的JavaScript程序設計有所幫助。
相關文章
這篇文章主要介紹了JS操作Fckeditor的一些常用方法，主要包括獲取、插入等,需要的朋友可以參考下2020-02-02
js 連接數(shù)據(jù)庫如何操作數(shù)據(jù)庫中的數(shù)據(jù)
JS中怎么連接數(shù)據(jù)庫,和提取數(shù)據(jù)庫中的數(shù)據(jù),本文將以此問題詳細介紹，需要的朋友可以了解下2012-11-11
這篇文章主要為大家詳細介紹了微信小程序用canvas實現(xiàn)電子簽名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
下面小編就為大家?guī)硪黄猨s實現(xiàn)股票實時刷新數(shù)據(jù)案例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了JS訪問對象兩種方式區(qū)別解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08
基于javascript實現(xiàn)數(shù)字英文驗證碼
這篇文章主要為大家詳細介紹了javascript實現(xiàn)數(shù)字英文驗證碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
你在?JavaScript?代碼編寫中有遇到過一個你需要比較或操作處理字符串,但是在開始或者結尾有額外空格的情況嗎？在這篇博客中,我將給你展示如何使用不同的方法在?JavaScript?中修剪字符串,需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細介紹了js實現(xiàn)div色塊碰撞，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
Javascript (ECMA Script)是一種弱類型的語言.這并不意味著它沒有數(shù)據(jù)類型,只是變量或者Javascript對象屬性不需要一個特定類型的值分配給它或者它始終使用相同的值.Javascript中的變量同樣支持自由類型轉換成為適用(或者要求)的內(nèi)容以便于使用.2009-06-06
分包指的是把一個完整的小程序項目,按照需求劃分為不同的子包,在構建時打包成不同的分包,用戶在使用時按需進行加載,下面這篇文章主要給大家介紹了關于微信小程序分包的相關資料,需要的朋友可以參考下2022-09-09