快捷導(dǎo)航

Js點擊彈出下拉菜單效果實例

更新時間：2013年08月12日 12:02:49 作者：

本文章來給各位同學(xué)介紹一款不錯的Js點擊彈出下拉菜單效果代碼，這種效果有點像支付寶的下拉菜單，有需要了解的朋友可參考。

<STYLE type=text/css> 
.menu { BORDER-RIGHT: #006080 2px solid; BORDER-TOP: #80e0ff 2px solid; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #80e0ff 2px solid; BORDER-BOTTOM: #006080 2px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #40a0c0 } 
A.menuItem { BORDER-RIGHT: #000000 0px solid; PADDING-RIGHT: 12px; BORDER-TOP: #000000 0px solid; DISPLAY: block; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FONT-SIZE: 8pt; PADDING-BOTTOM: 2px; BORDER-LEFT: #000000 0px solid; CURSOR: default; COLOR: #ffffff; PADDING-TOP: 2px; BORDER-BOTTOM: #000000 0px solid; FONT-FAMILY: MS Sans Serif, Arial, Tahoma, sans-serif; TEXT-DECORATION: none } 
A.menuItem:hover { COLOR: #ffff00; BACKGROUND-COLOR: #004060 } 
</STYLE> 
<DIV class=menu id=myMenu><A class=menuItem 
href="http://www.fzitv.net">腳本之家</A> <A class=menuItem 
>百度</A> <A class=menuItem 
href="">網(wǎng) 易</A> <A class=menuItem 
href="">江蘇音符</A> <A class=menuItem 
href="">央視國際</A> </DIV> 
<P><font onclick="openMenu(event, 'myMenu');return false;">點擊打開菜單</font></P> 
<SCRIPT type=text/javascript> 
document.getElementById("myMenu").onmouseout = closeMenu; 
function openMenu(event, id) { 
var el, x, y; 
el = document.getElementById(id); 
if (window.event) { 
x = window.event.clientX + document.documentElement.scrollLeft 
+ document.body.scrollLeft; 
y = window.event.clientY + document.documentElement.scrollTop + 
+ document.body.scrollTop; 
} 
else { 
x = event.clientX + window.scrollX; 
y = event.clientY + window.scrollY; 
} 
x -= 2; y -= 2; 
el.style.left = x + "px"; 
el.style.top = y + "px"; 
el.style.visibility = "visible"; 
} 
function closeMenu(event) { 
var current, related; 
if (window.event) { 
current = this; 
related = window.event.toElement; 
} 
else { 
current = event.currentTarget; 
related = event.relatedTarget; 
} 
if (current != related && !contains(current, related)) 
current.style.visibility = "hidden"; 
} 
function contains(a, b) { 
// Return true if node a contains node b. 
while (b.parentNode) 
if ((b = b.parentNode) == a) 
return true; 
return false; 
} 
</SCRIPT> </td>
   </tr>
 </table>

您可能感興趣的文章:

相關(guān)文章

基于javascript如何傳遞特殊字符
在 JavaScript 中使用反斜杠來向文本字符串添加特殊字符，下面通過本篇文章給大家介紹javascript如何傳遞特殊字符，對js傳遞特殊字符相關(guān)內(nèi)容感興趣的朋友一起學(xué)習(xí)吧
2015-11-11
js 替換功能函數(shù)，用正則表達式解決，js的全部替換
js 替換功能函數(shù)，用正則表達式解決，js的全部替換，學(xué)習(xí)js的朋友可以參考下。
2010-12-12
微信小程序文章詳情功能完整實例
這篇文章主要介紹了微信小程序文章詳情功能,結(jié)合完整實例形式詳細分析了微信小程序文章詳情功能具體步驟、原理及功能實現(xiàn)技巧,需要的朋友可以參考下
2020-06-06
javascript實現(xiàn)計時器的簡單方法
這篇文章主要為大家詳細介紹了javascript實現(xiàn)計時器的簡單方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-02-02
基于JavaScript實現(xiàn)購物網(wǎng)站商品放大鏡效果
大家在日常生活中都有網(wǎng)購的經(jīng)驗，有的網(wǎng)站會有商品放大鏡功能，效果非常棒，那么基于js代碼是如何實現(xiàn)的呢？下面小編給大家?guī)砹嘶趈s實現(xiàn)購物網(wǎng)站商品放大鏡效果，非常不錯，感興趣的朋友參考下吧
2016-09-09
如何為你的JS項目添加智能提示與類型檢查詳解
這篇文章主要給大家介紹了關(guān)于如何為你的JS項目添加智能提示與類型檢查的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
詳解JavaScript原始數(shù)據(jù)類型Symbol
以前提到 JavaScript 原始數(shù)據(jù)類型時，我們知道有Number，String，Null，Boolean，Undefined這幾種。ES6 引入了新的基本數(shù)據(jù)類型Symbol和BigInt。今天我們就來了解下Symbol類型。Symbol類型是為了解決屬性名沖突的問題，順帶還具備模擬私有屬性的功能。
2021-05-05
JavaScript事件對象event用法分析
這篇文章主要介紹了JavaScript事件對象event用法,結(jié)合實例形式分析了事件對象event中常用的屬性、方法、相關(guān)操作技巧與注意事項,需要的朋友可以參考下
2018-07-07
JS使用cookie保存用戶登錄信息操作示例
這篇文章主要介紹了JS使用cookie保存用戶登錄信息操作,結(jié)合具體實例形式分析了javascript使用cookie實現(xiàn)針對用戶信息的存儲與讀取相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
BootStrap入門學(xué)習(xí)第一篇
這篇文章主要為大家詳細介紹了BootStrap入門學(xué)習(xí)第一篇，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08