右侧悬浮菜单实例代码
2011-03-11 12:20
288 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta content="text/html; charset=gbk" http-equiv="Content-Type">
<TITLE> Navigation Bar </TITLE>
<link type="text/css" rel="stylesheet" href="style/chat007.css" mce_href="style/chat007.css">
<link type="text/css" rel="stylesheet" href="style/Muyu007.css" mce_href="style/Muyu007.css">
<mce:script type="text/javascript"><!--
function OnlineOver(){
document.getElementById("divMenu").style.display = "none";
document.getElementById("divOnline").style.display = "block";
document.getElementById("divQQbox").style.width = "150px";
}
function hideMsgBox(theEvent){
if (theEvent)
{
var browser=navigator.userAgent;
if (browser.indexOf("Firefox")>0){
if (document.getElementById('divOnline').contains(theEvent.relatedTarget)) {
return;
}
}
if (browser.indexOf("MSIE")>0){
if (document.getElementById('divOnline').contains(event.toElement)) {
return;
}
}
}
document.getElementById("divMenu").style.display = "block";
document.getElementById("divOnline").style.display = "none";
}
var tips;
var theTop = 175;
var old = theTop;
function initFloatTips() {
tips = document.getElementById('divQQbox');
moveTips();
};
function moveTips() {
var tt=50;
if (window.innerHeight) {
pos = window.pageYOffset
}else if (document.documentElement && document.documentElement.scrollTop) {
pos = document.documentElement.scrollTop
}else if (document.body) {
pos = document.body.scrollTop;
}
pos=pos-tips.offsetTop+theTop;
pos=tips.offsetTop+pos/10;
if (pos < theTop) pos = theTop;
if (pos != old) {
tips.style.top = pos+"px";
tt=10;
}
old = pos;
setTimeout(moveTips,tt);
}
// --></mce:script>
</HEAD>
<BODY>
<div>
test
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>11
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>11<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>11<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>11<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>11
</div>
<div id="divQQbox" class="QQbox" style="width: 150px; top: 297.4px;">
<div style="display: none;" mce_style="display: none;" onmouseout="hideMsgBox(event);" id="divOnline" class="Qlist">
<div class="t">
</div>
<div class="con">
<ul>
<li><a target="_blank" href="http://chatserver.comm100.cn/ChatWindow.aspx?siteId=80015513&planId=28&visitType=1&byHref=1" mce_href="http://chatserver.comm100.cn/ChatWindow.aspx?siteId=80015513&planId=28&visitType=1&byHref=1">
<img border="0px" alt="Live Chat" src="http://chatserver.comm100.cn/BBS.aspx?siteId=80015513&planId=28" mce_src="http://chatserver.comm100.cn/BBS.aspx?siteId=80015513&planId=28" id="comm100_EmailImage">
</a>
</li>
<li>
<a href="" target="_blank"><img border="0" align="left" title="" alt="" src="http://wpa.qq.com/pa?p=2:17131599:45" mce_src="http://wpa.qq.com/pa?p=2:17131599:45"> 网站首页</a>
</li>
<li>
<a href="" target="_blank"><img border="0" align="left" title="" alt="" src="http://wpa.qq.com/pa?p=2:17131599:45" mce_src="http://wpa.qq.com/pa?p=2:17131599:45"> 服务领域</a>
</li>
<li>
<a href="" target="_blank"><img border="0" align="left" title="" alt="" src="http://wpa.qq.com/pa?p=2:17131599:45" mce_src="http://wpa.qq.com/pa?p=2:17131599:45"> 关于我们</a>
</li>
</ul>
</div>
<div class="b">
</div>
</div>
<div onmouseover="OnlineOver();" id="divMenu" style="display: block;" mce_style="display: block;"><img alt="在线咨询" class="press" src="qq_1.gif" mce_src="qq_1.gif">
</div>
</div>
<mce:script type="text/javascript"><!--
initFloatTips();
// --></mce:script>
</BODY>
</HTML>.QQbox{
z-index:999;
width: 150px;
right: 3px;
top: 175px;
position: absolute;
color: #000;
display: block;
}
.QQbox .Qlist a {
font-size: 12px;
color: #000;
text-decoration: none;
line-height: 25px;
width: 150px;
display: block;
height: 25px;
}
.QQbox .Qlist a:hover {
color: #069;
text-decoration: underline;
display: block;
}
.QQbox .press{ right: 0; border: none; cursor: pointer;width: 26px; height: 136px;position: absolute;}
.QQbox .Qlist{
width: 150px;
background: url(../images/siderIM_bg.gif) padding:5px; display: block;
}
.QQbox .Qlist .b{ float: right; height: 6px; width: 150px; font-size: 1px; }
.QQbox .Qlist .infobox{
text-align:center;
background-repeat:no-repeat;
padding:5px;
line-height:14px;
color:#000;
font-weight:700;
}
.QQlistLi01 {
overflow: hidden;
height: 25px;
width: 150px;
display: block;
}
.QQbox .Qlist .t{
height:34px;
background-image: url(../images/chatbg1.png);
background-repeat: repeat;
display: block;
}
.QQbox .Qlist .b{
height:20px;
overflow:hidden;
background-image: url(../images/chatbg3.png);
background-repeat: no-repeat;
}
.QQbox .Qlist .con{
width: 100%;
padding: 10px 0px 10px 0px;
background-image: url(../images/chatbg2.png);
background-repeat: repeat-y;
display: block;
overflow: hidden;
height: 160px;
}
.QQbox .Qlist .con h2{ height: 22px; font: bold 12px/22px "宋体"; background: url(../images/siderIM_bg.gif) repeat-y -163px 0; border: 1px solid #3a708d; text-align: center; color:#fff;}
.QQbox .Qlist .con ul li{
display: block;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 15px;
height: 25px;
line-height: 25px;
width: 150px;
overflow: hidden;
left: 0px;
clear: both;
float: left;
position: relative;
}body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,img,div{margin:0;padding:0;border:0;}
.index {
background-repeat: repeat-x;
background-position: center top;
color: #FFF;
font-family: Arial, Helvetica, sans-serif, "微软雅黑";
font-size: 12px;
margin-top: -30px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
z-index: 1;
background-image: url(../images_muyu/index_bg_body.png);
}
.pagebody {
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.pageHead {
width: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
overflow: hidden;
height: 206px;
z-index: 100;
position: absolute;
background-image: url(../images_muyu/menubg_muyu007.com.png);
background-repeat: no-repeat;
background-position: center top;
text-align: center;
}
.muyubanner {
overflow: hidden;
height: 380px;
width: 960px;
top: 170px;
position: absolute;
z-index: 10;
}
.muyubanner2 {
overflow: hidden;
height: 384px;
width: 960px;
}
.index_aboutus {
margin: 20px;
height: 140px;
width: 920px;
top: 5px;
position: relative;
}
.index_aboutusNy {
width: 420px;
line-height: 35px;
font-size: 14px;
float: left;
top: 20px;
position: relative;
left: 10px;
}
.shouzida {
font-family: "微软雅黑";
font-size: 28px;
}
.index_word {
overflow: hidden;
height: 94px;
width: 960px;
margin-top: 0px;
position: relative;
}
.pagebodyIndex {
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
overflow: hidden;
height: 1912px;
background-image: url(../images_muyu/indexbg.jpg);
background-repeat: no-repeat;
background-position: center 200px;
z-index: 5;
padding-top: 206px;
font-family: "微软雅黑";
}
.pagebodyIndexfoot {
width: 1000px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
overflow: hidden;
height: 236px;
background-image: url(../images_muyu/index_footbg.png);
background-repeat: no-repeat;
background-position: center top;
}
.pagebodyIndexfootNy {
width: 960px;
overflow: hidden;
height: 110px;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 20px;
position: relative;
font-family: "微软雅黑";
}
.pagebodyIndexfootNy1 {
width: 960px;
overflow: hidden;
height: 50px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 20px;
position: relative;
}
.pagebodyIndexfootNy1a {
width: 700px;
overflow: hidden;
height: 50px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
position: relative;
float: left;
clear: left;
}
.pagebodyIndexfootNy1b {
width: 250px;
overflow: hidden;
height: 50px;
position: relative;
float: right;
clear: right;
margin: 0px;
}
.pagebodyIndexfootNy2 {
width: 960px;
overflow: hidden;
height: 60px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 20px;
position: relative;
text-align: center;
color: #999;
}
.pagebodyIndexfootbg {
width: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
overflow: hidden;
height: 236px;
background-image: url(../images_muyu/index_footbgline.png);
background-repeat: repeat-x;
background-position: center top;
}
.button007 {
background-image: url(../images_muyu/buttonbg1.png);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
height: 30px;
line-height:30px;
width: 107px;
position: relative;
}
.button007b {
background-image: url(../images_muyu/buttonbg1.png);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
height: 30px;
line-height:30px;
width: 107px;
position: relative;
}
.button007 a {
height: 30px;
width: 107px;
top: 0px;
color: #FFF;
text-decoration: none;
display: block;
}
.button007b a {
height: 30px;
width: 107px;
top: 0px;
color: #FFF;
text-decoration: none;
display: block;
}
.button007 a:hover {
height: 30px;
width: 107px;
color: #FFF;
text-decoration: none;
background-image: url(../images_muyu/buttonbg2.png);
background-repeat: no-repeat;
background-position: left top;
}
.button007b a:hover {
height: 30px;
width: 107px;
color: #FFF;
text-decoration: none;
background-image: url(../images_muyu/buttonHover.gif);
background-repeat: no-repeat;
background-position: left top;
}
.button007aabout2 {
width: 120px;
position: absolute;
height: 30px;
display: block;
float: left;
left: 530px;
top: 90px;
}
.button007fuwu {
width: 100%;
position: relative;
height: 70px;
}
.button007fuwu1 {
width: 120px;
position: absolute;
height: 30px;
display: block;
float: left;
left: 35px;
}
.button007fuwu2 {
width: 120px;
position: absolute;
height: 30px;
display: block;
float: left;
left: 275px;
}
.button007yuanying {
width: 120px;
position: absolute;
height: 30px;
display: block;
float: left;
left: 630px;
top: 90px;
}
.button007fuwu3 {
width: 120px;
position: absolute;
height: 30px;
display: block;
right: 180px;
float: right;
}
.index_kehu {s
position: relative;
height: 570px;
width: 960px;
}
.index_news {
position: relative;
height: 200px;
width: 910px;
padding-top: 18px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 30px;
}
.index_news1 {
position: relative;
height: 170px;
width: 280px;
float: left;
margin-top: 10px;
}
.index_news2 {
float: right;
height: 150px;
width: 370px;
position: relative;
right: 230px;
}
.index_newsbut {
position: absolute;
height: 30px;
width: 120px;
left: 320px;
top: 190px;
}
.index_news2 ul li a {
font-size: 14px;
color: #3496D3;
text-decoration: none;
}
.index_news2 ul li a:hover {
font-size: 14px;
color: #FFF;
text-decoration: underline;
}
.index_news2 ul li {
height: 32px;
width: 100%;
list-style-type: none;
line-height: 32px;
}
.index_fuwu {
height: 150px;
width: 890px;
position: relative;
margin-top: 220px;
overflow: hidden;
padding-top: 22px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 45px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.index_fuwu ul li {
margin: 0px;
padding: 0px;
height: 27px;
display: block;
width: 210px;
line-height: 27px;
position: relative;
}
.index_fuwu ul li a {
color: #FFF;
text-decoration: none;
text-indent: 15px;
display: block;
height: 27px;
width: 210px;
font-size: 12px;
line-height: 27px;
}
.index_fuwu ul li a:hover {
color: #2DACDF;
text-decoration: none;
background-repeat: no-repeat;
background-position: 4px 12px;
height: 27px;
width: 210px;
background-image: url(../images_muyu/dot007.gif);
line-height: 27px;
}
.index_fuwu01 {
height: 150px;
width: 230px;
text-align: left;
position: relative;
float: left;
}
.index_fuwu02 {
height: 150px;
width: 230px;
text-align: left;
position: relative;
float: right;
right: 420px;
top: 0px;
clear: right;
}
.Muyulink {
font-size: 10px;
line-height: 16px;
text-decoration: none;
overflow: hidden;
height: 22px;
margin-top: 8px;
}
.muyulink li {
float: left;
list-style-type: none;
position: relative;
}
.muyulink li a {
float: left;
font-size: 10px;
color: #666;
text-decoration: none;
}
.muyulink li a:hover {
float: left;
font-size: 10px;
color: #CCC;
text-decoration: none;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 右侧悬浮菜单实例代码
- 左侧悬浮菜单实例代码
- 左侧悬浮菜单实例代码
- 用jquery生成二级菜单的实例代码
- C#中渐变色的代码实例,用于自绘菜单
- 悬浮右侧可展开搜索的客服代码
- jQuery实现可收缩展开的级联菜单实例代码
- Android模仿美团顶部的滑动菜单实例代码
- ionic 上拉菜单(ActionSheet)实例代码
- ajax级联菜单实例代码下载
- 三行代码实现树形菜单（xmlTree标签实例）
- jQuery鼠标悬浮链接弹出跟随图片实例代码
- js实现收缩菜单效果实例代码
- 原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
- 微信小程序 特效菜单抽屉效果实例代码
- 使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
- vue中element-ui表格缩略图悬浮放大功能的实例代码
- PHP 向右侧拉菜单实现代码，测试使用中
- vue2.0的contextmenu右键弹出菜单的实例代码
- jquery实现动态菜单的实例代码