当前位置：首页 » 网站代码 » 悬浮菜单代码

悬浮菜单代码

发布时间: 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做鼠标悬浮菜单上的选项能出现下拉菜单的解决方法。

阅读全文

悬浮菜单代码

与悬浮菜单代码相关的阅读推荐