模板無憂
網頁特效
每日更新
|
TOP排行榜
|
Tag標簽
|
充值
無憂首頁
網頁模板
程序模板
建站教程
視頻教程
網頁特效
圖標素材
字體下載
站長工具
站長問答
網頁特效
菜單導航
圖片特效
文本鏈接
層和布局
頁面背景
表單按鈕
日期時間
計算轉換
鍵盤鼠標
瀏覽器
游戲娛樂
綜合其它
常用代碼
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在線編輯器
Mootools
HTML
JS廣告代碼合集
站長工具
站長常用軟件
網站綜合查詢
Alexa排名查詢
Google PR查詢
域名Whois查詢
網站收錄查詢
友情鏈接查詢
CSS2中文手冊
CSS精簡優化工具
網頁特效代碼
模板無憂
>
網頁特效
>
菜單導航特效代碼
>
收藏
分享
查看評論
菜單導航
演示
在網頁右上角隱藏的滑出菜單_菜單導航特效
查看演示效果
特效Tag:
滑出菜單
右上角
添加
在網頁右上角隱躲的滑出菜單,鼠標移過往,菜單自然出現,移開自動隱躲,可以用作副菜單。
<html> <head> <title>右上角隱躲的滑出菜單</title> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312"> </head> <body> <style type="text/css"> <!-- #menuBar {position: absolute;left: -200px; width: 300px; top: 0px; clip: rect( )} #glider {position: absolute;left: 200px;top: 0px; width: 80px}/* www.wf0088.com */ .glideText {font-size: 18px;color: #E2E2E2;text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif} a:link { color: #D7D7D7; text-decoration: none} a:visited { color: #E0E0E0; text-decoration: none} a:active { color: #333333; text-decoration: none} a:hover { color: #333333} .mentd { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; background-color: #999999; background-image: url(graygrid2.gif)} td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #333333} h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #FFFFFF} --> </style> <script language="JavaScript"> <!-- var pee = -200 var drec = 40; var speed = 20; var l = pee; function Proj7GlideBack () {l += drec; if (document.layers) { document.menuBar.left = l; } else if (document.all) {document.all.menuBar.style.pixelLeft = l; } else if (document.getElementById) {document.getElementById('menuBar').style.left = l + 'px'; } if (l < 0) setTimeout('Proj7GlideBack()', speed); else { if (document.layers) { var html = ''; html += '<A HREF="javascript:;"'; html += 'onClick="Proj7GlideOut(); return false;"'; html += 'Class="glideText"'; html += 'close'+ '<br>'; html += 'close'+ '<Br>'; html += '<\/A>'; var a = window.document.menuBar.document.glider; a.document.open(); a.document.write(html); a.document.close(); } else if (document.all) {document.all.glidetextLink.innerHTML = 'close'; document.all.glidetextLink.onclick = moveIn; } else if (document.getElementById) { document.getElementById('glidetextLink').firstChild.nodeValue ='close'; document.getElementById('glidetextLink').onclick = moveIn; } } } function Proj7GlideOut () {l -= drec; if (document.layers) {document.menuBar.left = l; } else if (document.all) {document.all.menuBar.style.pixelLeft = l; } else if (document.getElementById) {document.getElementById('menuBar').style.left = l + 'px'; } if (l > pee) setTimeout('Proj7GlideOut()', speed); else { if (document.layers) { var html = ''; html += '<A HREF="javascript:;"'; html += 'onclick="Proj7GlideBack(); return false;"'; html += 'Class="glideText"'; html += 'menu'+ '<Br>'; html += 'menu'+ '<Br>'; html += '<\/A>'; var a = window.document.menuBar.document.glider; a.document.open(); a.document.write(html); a.document.close(); } else if (document.all) {document.all.glidetextLink.innerHTML = 'Menu'; document.all.glidetextLink.onclick = moveOut; } else if (document.getElementById) { document.getElementById('glidetextLink').firstChild.nodeValue = 'Menu'; document.getElementById('glidetextLink').onclick = moveOut; } } } function moveIn () {Proj7GlideOut();return false; } function moveOut() {Proj7GlideBack();return false; } <!--NNresizeFix Reloads the page to workaround a Netscape Bug--> if (document.layers) { origWidth = innerWidth; origHeight = innerHeight;} function reDo() { if (innerWidth != origWidth || innerHeight != origHeight) location.reload();} if (document.layers) onresize = redo; //--> </script> <div ID="menuBar" style=""> <table width="272" border="0" cellspacing="0" cellpadding="0" bgcolor="#333333"> <tr> <td> <table width="100%" border="0" cellpadding="8" cellspacing="1"> <tr> <td bgcolor="#FF9900" valign="top" class="mentd"> <a href="/" onFocus="if(this.blur)this.blur()" class="menu">網頁殊效</a><Br> <a href="/" onFocus="if(this.blur)this.blur()" class="menu">網站開發</a><Br> <a href="/" onFocus="if(this.blur)this.blur()" class="menu">電子書籍</a><Br> <a href="/" onFocus="if(this.blur)this.blur()" class="menu">站長工具</a><Br> <a href="/" onFocus="if(this.blur)this.blur()" class="menu">網頁殊效</a><Br> <a href="/" onFocus="if(this.blur)this.blur()" class="menu">論壇系統</a> </td> <td width="72" bgcolor="#CC0000"> </td> </tr> </table> </td> </tr> </table> <span ID="glider" style=""> <table border="0" cellspacing="0" cellpadding="0"> <tr align="center"> <td><a id="glidetextLink" href="javascript:;" class="glideText" onClick="Proj7GlideBack(); return false" onFocus="if(this.blur)this.blur()">Menu</a></td> </tr> </table></span> </div> </body> </html>
所屬頻道:
菜單導航特效
/
更新時間:2012-11-01
[收藏]
[報錯]
[返回列表]
相關
菜單導航特效
:
CSS+div+js組合強大實現超酷菜單
超酷仿GOOGLE首頁導航菜單效果
仿網易的滑動門技術DIV+CSS實現
仿藍色理想網站的導航菜單
鼠標觸及帶邊框菜單
用JS實現的類似框架的鏈接導航模式
CSS立體層
右鍵彈出菜單
純css的導航下拉菜單
隱藏菜單效果
css模擬title和alt的提示效果
下拉菜單鏈接頁面打開方式選擇
菜單導航特效Rss訂閱
特效代碼搜索
菜單導航特效推薦
帶缺口的CSS導航欄
酷似FLASH的豎向菜單
四個角都為弧形的純CSS圓角導航欄
超級漂亮的CSS多級透明展開菜單
隱藏菜單效果
懸浮在網頁頂部可關閉的工具條(浮動層)
一般用作排行的CSS側邊列表滑動門
UL、LI 無序列表實現純CSS網站導航菜單
不使用圖片的CSS圓角垂直菜單
簡單漂亮的導航條
猜你也喜歡看這些
來自新浪的一款簡潔JS焦點圖切換代碼
圖象淡入淡出 Script
鼠標接觸或者離開圖片時,圖片大小會相應變化
JS圖片切換學習版,沒有過多修飾
JavaScript 生成彈性透明的圖片放大代碼
JavaScript真正的鼠標放上動畫加載大圖的代碼
圖像映射
圖片漸漸出現腳本
在圖片上單擊獲取圖片原始大小
Js版淘寶圖片切換,類似相冊播放效果
相關鏈接:
復制本頁鏈接
|
搜索在網頁右上角隱藏的滑出菜單
特效說明:
菜單導航模板
-
在網頁右上角隱藏的滑出菜單
。