當前位置：首頁 » 網站代碼 » 懸浮菜單代碼

懸浮菜單代碼

發布時間: 2021-03-21 00:38:25

『壹』求js實現代碼【滑鼠懸浮下方出現菜單，可把數表移到下方菜單，移出後菜單消失（這里可用setTimeout）】

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
li{list-style: none;}
.nav>li{float: left;margin:10px}
.menu{display: none;}
</style>
</head>
<body>
<ul class="nav">
<li>圖站精選
<ul class="menu">
<li>是對是對</li>
<li>發生地方是</li>
<li>是對方式</li>
</ul>
</li>
<li >H紳士道
<ul class="menu">
<li>是對是對</li>
<li>是滴是滴</li>
<li>是對是對</li>
</ul>
</li>

</ul>
<script>
var navli=document.querySelectorAll('.nav>li')
var menu=document.querySelectorAll('.nav .menu')
navli.forEach(function(item,index){
item.onmouseenter=function(){
menu[index].style.display='block'
}
item.onmouseleave=function(){
setTimeout(function(){
menu[index].style.display='none'
},500)
}

})

</script>
</body>
</html>

『貳』 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" />
<title>無標題文檔</title>
<style type="text/css">
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
background-color:#CCC;
left: 165px;
top: 211px;
display:none;
}
</style>
<script type="text/javascript">
function a(){
var a=document.getElementById("a").value;
if(a=="tijiao"){
document.getElementById("apDiv1").style.display="block";
}
}
</script>
</head>

<body>
<input type="button" value="tijiao" id="a" onclick="a()" />
<div id="apDiv1">hello</div>
</body>
</html>

『叄』淘寶最左邊固定懸浮導航求代碼和方法求大神幫忙！

登陸賣家中心，選擇你要添加懸浮的代碼的頁面 - - 新建自定義區模塊 - 點擊「源碼」按鈕，粘貼添加進源代碼，點擊確定，發布。

『肆』 HTML中滑鼠懸浮在有隱藏菜單

先把內復嵌的制ul改用dl試試吧。
<ul class="A">
<li>
<dl>
<dt><a href='#'>關於我們</a></dt>
<dd>我們的故事</dd>
<dd>我們的團隊</dd>
</dl>
</li>
</ul>
<style type="text/css">
.A{}
.A li{}
.A li dl{}
.A li dl dt{}
.A li dl dd{display:none;}
.A li:hover dd{display:block;}
.A li dl:hover dd{display:block}
</style>

『伍』網頁懸浮導航代碼怎麼寫

.menu{width:100%; height:62px; background:#0f9ca1;position:fixed;top:200px;}

『陸』浮動窗口的代碼（html/js）

||第一種方法:
Html代碼
<html>
<head>
<title>浮動窗口</title>
<link type="text/css" rel="stylesheet" href="css/overflow.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/overflow.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var b = $("#b");
var overFlow = $("#over");
b.click(function(){
overFlow.fadeIn();
$("#mask").css("background","#111");
$("#mask").css("opacity","0.8");
})
$("#close").click(function(){
overFlow.fadeOut();
$("#mask").css("background","#fff");
$("#mask").css("opacity","1");
});
drag($("#over"),$("#title"));
}) ;
</script>
</head>
<body>
<div id="over">
<div id="title"><span id="t">這只是一個演示標題</span><span id="close">[ x ]</span></div>
<div id="content">
When a container object, such as a div, has mouse capture, events originating on objects within that container are fired by the div, unless the bContainerCapture parameter of the setCapture method is set to false. Passing the value false causes the container to no longer capture all document events. Instead, objects within that container still fire events, and those events also bubble as expected.<br/>
---This is edited by Alp.
</div>
</div>
<div id="mask"> <a id="b" href="#">click</a></div>
</body>
</html>

Js代碼
function drag(overFlow,title){
title.onmousedown = function(evt){
var doc = document;
var evt = evt || window.event;
var x = evt.offsetX?evt.offsetX:evt.layerX;
var y = evt.offsetY?evt.offsetY:evt.layerY;
if(overFlow.setCapture){
overFlow.setCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
doc.onmousemove = function(evt){
evt = evt || window.event;
var xPosition = evt.pageX || evt.clientX;
var yPosition = evt.pageY || evt.clientY;
var newX = xPosition - x;
var newY = yPosition - y;
overFlow.style.left = newX;
overFlow.style.top = newY;
};
doc.onmouseup = function(){
if(overFlow.releaseCapture){
overFlow.releaseCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
doc.onmousemove=null;
doc.onmouseup=null;
};
};
}

css代碼
#over{
position: absolute;
left: 300px;
top: 200px;
border: 1px solid black;
display: none;
background: #cccccc;
cursor: default;
width: 300px;
z-index: 10;
opacity: 1;
}
#title{
border: 1px solid #1840C4;
background: #95B4DC;
padding: 2px;
font-size:12px;
cursor: default;
}
#close{
cursor: pointer;
margin-right: 1px;
overflow: hidden;
}
#content{
border: 1px solid #C2D560;
background: #EFF4D7;
}
#t{
margin-right:145px;
}
#mask{
z-index: 1;
background: #fff;
width: 1024px;
height: 800px;
}
#b{
position: absolute;
left: 200px;
top: 100px;
}
body{
padding: 0px;
margin: 0px;
}
#over{
background: transparent;
}

第二種方法:
消息框遮罩層:<iframe id="show_upload_iframe" frameborder=0 scrolling="no" style="display:none; position:absolute;"></iframe><div id="show_upload">nothing...</div>'

頁面載入loading中:<div id="body_loading" onClick="loaded();"><img src="__PUBLIC__/images/body_load.gif"></div>

關閉浮動窗口:<a href="javascript:hideupload()">關閉窗口建議用小圖片</a>

打開浮動窗口:<a href="javascript:showupload('admin.php')">打開浮動</a>
// 消息框loading
function loading(){
var o = $('#body_loading');
o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px");
o.css("top",(($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2))+"px");
o.fadeIn("fast");
}
// 消息框消失
function loaded(){
var o = $('#body_loading');
o.fadeOut("fast");
}
// 隱藏浮動窗口
function hideupload(){
$('#show_upload').hide();
$('#show_upload_iframe').hide();
}
// 彈出浮動窗口
function showupload(ajaxurl){
loading();
var o=$('#show_upload');
var f=$('#show_upload_iframe');
var top = 200;
$.ajax({
url: ajaxurl,
//cache: false,
success: function(res){
loaded();
o.html(res);
o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px");
if($(document).scrollTop()>200){
top = ($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2);
}
o.css("top",top+"px");
f.css({'width':o.width(),'height':o.height(),'left':o.css('left'),'top':o.css('top')});
f.show();
o.show();
}
});
}

『柒』關於HTML做懸浮窗口

<style>
#nav { width:150px; height: 400px; border: 1px solid #D4CD49; position:fixed;left:0;top:30% }
</style>
<div id="nav"></div>

你看這樣行不行

『捌』求懸浮框的HTML代碼

|<script language="JavaScript">
var Msg_loopNum = 5;
function showMsg()
{
if(typeof redmsg != 'undefined') {
if (!redmsg || redmsg.length < 1) return;
document.getElementById('mnum').innerHTML = redmsg;
}else{
if(Msg_loopNum > 0) {setTimeout(function(){showMsg();},100);Msg_loopNum--;}
}
}

『玖』 html 怎麼做滑鼠懸浮菜單上的選項能出現下拉菜單

html做滑鼠懸浮菜單上的選項能出現下拉菜單，CSS+JS做出此效果。

<body>內代碼為：

<ULid=fm>
<LI><Ahref="#">一級菜單欄目</A>
<UL>
<LI><Ahref="#">一級菜單目錄</A></LI>
<LI><Ahref="#">一級菜單目錄</A></LI>
<LI><Ahref="#">一級菜單目錄</A></LI>
<LI><Ahref="#">一級菜單目錄</A></LI></UL>
</LI>
<LI><Ahref="#">二級菜單欄目</A>
<UL>
<LI><Ahref="#">二級菜單目錄</A></LI>
<LI><Ahref="#">二級菜單目錄</A></LI>
<LI><Ahref="#">二級菜單目錄</A></LI>
<LI><Ahref="#">二級菜單目錄</A></LI>
<LI><Ahref="#">二級菜單目錄</A></LI></UL></LI>
<LI><Ahref="#">三級菜單欄目</A>
<UL>
<LI><Ahref="#">三級菜單目錄</A></LI>
<LI><Ahref="#">三級菜單目錄</A></LI>
<LI><Ahref="#">三級菜單目錄</A></LI>
<LI><Ahref="#">三級菜單目錄</A></LI>
</UL></LI>
<LI><Ahref="#">四級菜單欄目</A>
<UL>
<LI><Ahref="#">四級菜單目錄</A></LI>
<LI><Ahref="#">四級菜單目錄</A></LI>
<LI><Ahref="#">四級菜單目錄</A></LI>
<LI><Ahref="#">四級菜單目錄</A></LI></UL></LI>
</UL></LI></UL>

為了突出效果，做的CSS樣式代碼為：

<STYLEtype=text/css>
*{margin:0;padding:0;border:0;}
#fm{line-height:24px;list-style-type:none;background:#666;}/*設置盒子的行高，去掉標記，設置背景顏色*/
#fma{display:block;width:80px;text-align:center;}/*設置A標簽為塊元素不顯示，寬度，居中*/
#fma:link{color:#666;text-decoration:none;}/*設置未訪問的鏈接樣式*/
#fma:visited{color:#666;text-decoration:none;}/*設置已訪問的鏈接樣式*/
#fma:hover{color:#FFF;text-decoration:none;font-weight:bold;}/*當有滑鼠懸停在鏈接上的顏色*/
#fmli{float:left;width:150px;background:#CCC;}
#fmlia:hover{background:#999;}
#fmliul{line-height:27px;list-style-type:none;text-align:left;left:-999em;width:80px;position:absolute;}
#fmliulli{float:left;width:80px;background:#F6F6F6;}
#fmliula{display:block;width:80px;width:80px;text-align:left;padding-left:5px;}
#fmliula:link{color:#666;text-decoration:none;}
#fmliula:visited{color:#666;text-decoration:none;}
#fmliula:hover{color:#F3F3F3;text-decoration:none;font-weight:normal;background:#C00;}
#fmli:hoverul{left:auto;}
#fmli.sfhoverul{left:auto;}
#content{clear:left;}
</STYLE>

js代碼為：

<SCRIPTtype=text/javascript>
functionmenuFix(){
varsfEls=document.getElementById("fm").getElementsByTagName("li");
for(vari=0;i<sfEls.length;i++){
sfEls[i].onmouseover=function(){
this.className+=(this.className.length>0?"":"")+"sfhover";
}
sfEls[i].onMouseDown=function(){
this.className+=(this.className.length>0?"":"")+"sfhover";
}
sfEls[i].onMouseUp=function(){
this.className+=(this.className.length>0?"":"")+"sfhover";
}
sfEls[i].onmouseout=function(){
this.className=this.className.replace(newRegExp("(?|^)sfhover\b"),
"");
}
}
}
window.onload=menuFix;
</SCRIPT>

最後的效果圖為：

以上就是用html做滑鼠懸浮菜單上的選項能出現下拉菜單的解決方法。

閱讀全文

懸浮菜單代碼

與懸浮菜單代碼相關的閱讀推薦