Js點(diǎn)擊彈出下拉菜單效果實(shí)例
<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.dbjr.com.cn">腳本之家</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;">點(diǎn)擊打開菜單</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>
- JavaScript 下拉菜單實(shí)現(xiàn)代碼
- css+js下拉菜單
- js動(dòng)態(tài)設(shè)置select下拉菜單的默認(rèn)選中項(xiàng)實(shí)例
- 三級(jí)下拉菜單的js實(shí)現(xiàn)代碼
- 一個(gè)日期下拉菜單的js實(shí)現(xiàn)代碼
- JS實(shí)多級(jí)聯(lián)動(dòng)下拉菜單類,簡單實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)菜單!
- JavaScript實(shí)現(xiàn)下拉菜單的顯示和隱藏
- JS中用三種方式實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單
- js實(shí)現(xiàn)全國省份城市級(jí)聯(lián)下拉菜單效果代碼
- javascript實(shí)現(xiàn)簡單下拉菜單效果
相關(guān)文章
微信小程序iBeacon測距及穩(wěn)定程序的實(shí)現(xiàn)解析
這篇文章主要介紹了微信小程序iBeacon測距及穩(wěn)定程序的實(shí)現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07JS獲得選取checkbox整行數(shù)據(jù)的方法
這篇文章主要介紹了JS獲得選取checkbox整行數(shù)據(jù)的方法,涉及使用js對DOM節(jié)點(diǎn)的操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01微信小程序?qū)崿F(xiàn)pdf、word等格式文件上傳的方法
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)pdf,word等格式文件上傳的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09js實(shí)現(xiàn)適配移動(dòng)端的拖動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)適配移動(dòng)端的拖動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01純javascript移動(dòng)優(yōu)先的幻燈片效果
這篇文章主要介紹了純javascript實(shí)現(xiàn)移動(dòng)優(yōu)先的幻燈片效果,感興趣的小伙伴們可以參考一下2015-11-11Bootstrap基本樣式學(xué)習(xí)筆記之圖片(6)
這篇文章主要介紹了Bootstrap學(xué)習(xí)筆記之圖片基本樣式的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12C#中TrimStart,TrimEnd,Trim在javascript上的實(shí)現(xiàn)
今天在后臺(tái)寫了個(gè)類,后來才發(fā)現(xiàn),需要在JS上做..于是把代碼拷到j(luò)s上進(jìn)行修改,代碼中用到TrimStart,TrimEnd,Trim等方法,在網(wǎng)上找半天竟然沒找到.要么就只能清除空格的!2011-01-01微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_
這篇文章主要介紹了微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"},非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-10-10