DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 淘寶頂部導航菜單
淘寶頂部導航菜單
編輯：關於JavaScript     
效果體驗：http:///keleyi/phtml/menu/3.htm

本菜單支持各種浏覽器，例如IE各個版本，例如6、7、8、9、10、11等，以及Chrome、火狐、Opera等。

搜索功能可以使用，如果要搜索某網站的內容，把name為si和s的input的value值改為網站的網址，例如


HTML文件代碼：

<!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" />
<meta name="keywords" content="JS代碼,菜單導航,JS廣告代碼,JS特效代碼" />
<meta name="description" content="此代碼內容為頂部導航菜單，屬於站長常用代碼，更多菜單導航代碼請訪問JS代碼頻道。" />
<title>頂部導航菜單_</title><base target="_blank" />
<LINK href="http:///keleyi/phtml/menu/3/css/css.css"rel=stylesheet>
<SCRIPT type="text/javascript" src="http:///keleyi/phtml/menu/3/js/.tb.js"></SCRIPT>
</head>

<body style="text-align:center">

<div id=page>
<div class="chl-poster simple" id=header>
<div id=site-nav>
<UL class=quick-menu>
<LI class=home><A href="http:///">首頁</A> </LI>
<LI><A href="http:///a/bjac/et551617.htm">我要買</A></LI>
<LI class="mytaobao menu-item">
<div class=menu>
<A class=menu-hd href="http:///a/bjac/y63we342.htm" target=_top rel=nofollow>我的買賣<B></B></A>
<div class=menu-bd>
<div class=menu-bd-panel>
<div>
<A href="http:///a/bjac/et551617.htm" rel=nofollow>已買到的軟件</A>
<A href="http:///a/bjac/e8t7hoj4.htm" rel=nofollow>已賣出的軟件</A>
</div>
</div>
<S class=r></S><S class=rt></S><S class=lt></S><S class=b></S><S class="b b2"></S><S class=rb></S><S class=lb></S>
</div>
</div>
</LI>
<LI class=cart><A href="http:///a/bjac/et551617.htm" rel=nofollow><S></S>購物車 </A></LI>
<LI class=favorite><A href="http:///a/bjac/et551617.htm" rel=nofollow>收藏夾</A></LI>
<LI class="search menu-item">
<div class=menu><SPAN class=menu-hd><S></S>搜索<B></B></SPAN>
<div class=menu-bd>
<div class=menu-bd-panel>
<FORM name=topSearch action="http://www.baidu.com/baidu?q=site%3A%20"><input type="hidden" name="q" value="" /><INPUT
maxLength=60 name=word><BUTTON type=submit>搜 索</BUTTON> <INPUT type=hidden
value= name=si><input type="hidden" value="" name="s" /><input name=tn type=hidden value=baidu><input type="hidden" value="2097152" name="ct" /> </FORM>
</div>
<S class=r></S><S class=rt></S><S class=lt></S><S class=b></S><S class="b b2"></S><S class=rb></S><S class=lb></S>
</div>
</div>
</LI>
<LI class="services menu-item last">
<div class=menu>
<A class=menu-hd href="http:///a/bjac/et551617.htm" target=_top>網站導航<B></B></A>
<div class=menu-bd style="WIDTH: 210px; HEIGHT: 262px; _width: 202px">
<div class=menu-bd-panel>
<DL>
<DT><A href="http:///a/bjac/9dd21532ed1dbf23.htm">購物</A>
<DD>
<A href="http:///a/bjac/532bedbffca1affa.htm">商城</A>
<A href="http:///a/bjac/kjsrt3b0.htm">電器城</A>
<A href="http:///a/bjac/mt97p5y9.htm">嗨淘</A>
<A href="http:///a/bjac/et551617.htm">全球購</A>
<A href="http:///a/bjac/et551617.htm">跳蚤街</A>
<A href="http:///a/bjac/3wjq3xm2.htm">禮物</A>
<A href="http:///a/bjac/et551617.htm">促銷</A>
<A href="http:///a/bjac/7slnymte.htm">機票</A>
<A href="http:///a/bjac/et551617.htm">彩票</A>
<A href="http:///a/bjac/c07969353e71816f.htm">創意</A>
</DD>
</DL>
<DL>
<DT><A href="http:///a/bjac/kjsrt3b0.htm">門戶</A>
<DD><A href="http:///a/bjac/5aed2303707e30fa.htm">服飾</A> <A href="http:///a/bjac/et551617.htm">女人</A> <A href="http:///a/bjac/et551617.htm">美容</A> <A href="http:///a/bjac/3n8d6g5f.htm">居家</A> <A href="http:///a/bjac/1329fae4a4a54bdd.htm">男人</A> <A href="http:///a/bjac/et551617.htm">數碼</A> <A href="http:///a/bjac/jp71q5jt.htm">親子</A> <A href="http:///a/bjac/et551617.htm">時尚</A> <A href="http:///a/bjac/c6gu08gm.htm">試用</A> <A href="http:///a/bjac/et551617.htm">心得</A> <A href="http:///a/bjac/mnmpm4bv.htm">幫派</A> <A href="http:///a/bjac/et551617.htm">畫報</A> <A href="http:///a/bjac/et551617.htm">淘女郎</A> <A href="http:///a/bjac/et551617.htm">社區</A> <A href="http:///a/bjac/et551617.htm">傳</A>
</DD>
</DL>
<DL>
<DT><A href="http:///a/bjac/nmwpqgag.htm">淘江湖</A> &nbsp;<A href="http:///a/bjac/et551617.htm">手機</A> </DT></DL>
<DL>
<DT><A href="http:///a/bjac/1329fae4a4a54bdd.htm">幫助中心</A>
<DD><A href="http:///a/bjac/utovcdwr.htm">交易安全</A> <A href="http:///a/bjac/et551617.htm">維權中心</A> </DD></DL>
<DL class=last>
<DD><STRONG style="FONT-WEIGHT: bold"><A href="http:///a/bjac/7e8897e5ec0849e9.htm">更多內容</A></STRONG></DD>
</DL>
</div>
<S class=r></S><S class=rt></S><S class=lt></S><S class=b style="WIDTH: 169px"></S><S class="b b2" style="WIDTH: 169px"></S><S class=rb></S><S class=lb></S>
</div>
</div>
</LI>
</UL>
</div>
</div>
</div>
<SCRIPT type=text/javascript>
TB.Header.init();
</SCRIPT>

<p>&nbsp; </p>
<p>代碼整理：<a href="http:///" target="_blank"></a>　感謝：<a href="http:///" target="_blank"></a></p>
<p>＊尊重他人勞動成果，轉載請自覺注明出處！注：此代碼僅供學習交流，請勿用於商業用途。</p>
<p></p>
<p><p>整合了購物車，收藏夾，搜索，搜索，網站導航等功能的導航。</p></p>
<p></p>
</body>
</html>

這是使用的圖片：
關於JavaScript
javascript 動態樣式添加的簡單實現
異步加載css文件或者異步加載css模塊，支持所有浏覽器，包括IE，參考至javascript高級編
AngularJS基礎知識
angularJS定義和特點1.google前端開源框架2.MVVM(model view view
js實現文字滾動效果
首先先看一下大致效果圖，因為是動態的，在頁面無法顯示出來。具體的實現代碼如下：1.首先是css代碼：

相關文章

JavaScript基礎知識JSON基礎正則表達式關於JavaScriptJavaScript技巧jQuery入門知識AJAX入門JavaScript綜合知識
小編推薦
WEB前端實現裁剪上傳圖片功能 老生常談遮罩層 滾動條的問題 javascript正則表達式基礎知識入門 Bootstrap圖片輪播組件Carousel使用方法詳解 suggestion開發小結以及對鍵盤事件的總結（針對中文輸入法狀態） js圖片上傳前預覽功能（兼容所有浏覽器） JS構建頁面的DOM節點結構的實現代碼 js 動態給元素添加、移除事件的實現方法 關於JS中setTimeout()無法調用帶參函數問題的解決方法 關於div自適應高度/左右高度自適應一致的js代碼
熱門推薦
用js實現小球的自由移動代碼 JavaScript實現圖片輪播組件代碼示例 AJAX教程(4)：AJAX 浏覽器支持 JavaScript的事件：onLoad js函數內變量的作用域分析 基於dropdown.js實現的兩款美觀大氣的二級導航菜單 JS函數arguments數組獲得實際傳參數個數的實現方法 IP地址歸屬地查詢JS/JSON接口 JavaScript中的細節分析
大家都在看
javascript 中__proto__和prototype詳解 CSS-div高度100%設置問題 通過DataSet讀取XML的效率問題 深入理解javascript中concat方法 把Node.js程序加入服務實現隨機啟動 基於jquery編寫的橫向自適應幻燈片切換特效的實例代碼 form的OnSubmit和input type=image使用介紹 JavaScript的繼承的封裝介紹
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved