医疗网站常用的网页左侧浮动咨询菜单，包含在线咨询，免费电话，QQ在线，自助挂号，回到顶部菜单，其中免费电话采用离线宝免费电话接口，想要使用该功能请修改代码中的相关参数，具体修改方法参考之前的文章 百度离线宝调用接口。

代码打包下载：医疗网站常用的网页左侧浮动咨询菜单

效果截图：

<title>医疗网站常用的网页左侧浮动咨询菜单</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
	$('#zixun .dx').hover(function(){
	    $('.call').show();    								  
	},function(){
	    $('.call').hide();  	
	});
});
</script>
<style>
*{hide-focus: expression(this.hideFocus=true); /* for ie 5+ */outline: none; /* for firefox 1.5 + */}
a {text-decoration:none;}
.youshang{z-index:88888;top:100px;right:8px;display:block;position:fixed;width:148px; height:416px;_position:absolute;}
.note{ background:#444; position:absolute; width:100%; height:100%; z-index:9998; left:0; top:0; opacity: 0.9;-moz-opacity: 0.9;filter:alpha(opacity=90); display:none;}
.noteFrame{ background:#FFF; width:650px; height:375px; border:7px solid #CCC; overflow:hidden; position:absolute;left:50%; margin-left:-330px; z-index:9999; top:130px; display:none;}
.noteFrame h3{ height:40px; line-height:40px; padding:0 10px; margin:0; background:#E5E5E5; font-weight:bold;}
.noteFrame h3 span{float:right; font-size:24px; color:#F00; cursor:pointer;}
#iframeNote{width:100%; height:100%; overflow:hidden;}
.left{ width:70px; position:fixed;z-index:999; left:10px; top:145px; _position:absolute; _right:expression(eval(document.documentElement.scrollLeft+10)); _top:expression(eval(document.documentElement.scrollTop+145)); }
.left .zixun a{ display:block; width:70; height:14px; line-height:14px; padding:49px 0 5px 0; text-align:center; color:#fff; font-size:12px; margin-bottom:2px;}
.left .zixun a:hover{ color:#fff; text-decoration:none;}
.left .zixun a.item0{ margin-bottom:0; height:auto; padding:0;}
.left .zixun a.item1{ background:url(/demo/20141004/002/images/left02_1.png) no-repeat;}
.left .zixun a.item2{ background:url(/demo/20141004/002/images/left03_1.png) no-repeat;}
.left .zixun a.item3{ background:url(/demo/20141004/002/images/left04_1.png) no-repeat;}
.left .zixun a.item4{ background:url(/demo/20141004/002/images/left05_1.png) no-repeat;}
.left .zixun a.item5{ background:url(/demo/20141004/002/images/backtop.png) no-repeat;cursor:pointer;}
.left .zixun a.item5:hover{ background:url(/demo/20141004/002/images/backtop_2.png) no-repeat;}
.left .call{ display:none; position:absolute;z-index:99999; top:62px; left:70px; width:306px; height:81px; background:url(/demo/20141004/002/images/call_bg.jpg) no-repeat;}
.left .call-box{ width:263px; height:29px; margin:39px 0 0 32px;}
.left .call-box .call_i{ float:left; width:166px; height:21px; line-height:21px; padding:2px 3px; border:2px solid #fcd9b3; color:#333; background:#fff;}
.left .call-box .call_b{ float:right; width:84px; height:29px; text-indent:-999em; cursor:pointer; background:url(/demo/20141004/002/images/call_b.jpg) no-repeat;}
.duan{outline: none;width:90px;}.Wdate{outline: none;width:70px;}
</style>

<div class="left" id="left">
    <div class="zixun" id="zixun">
        <a href="#" target="_blank" class="item1">在线咨询</a>
       <div class="dx">
            <a href="javascript:void(0);" target="_self" class="item2">免费电话</a>
            <div class="call">
                <div class="call-box" style="display:block">
                <input style="display:block" id="telInput" class="call_i" type="text" maxlength="20">
                <input style="display:block; border:none" class="call_b" type="submit" value="免费通话" id="callBtn">
                </div>
            </div>
        </div>
        <a target="_blank" href="#" class="item3">QQ在线</a>
        <a target="_blank" href="javascript:void(0)" onclick="openZoosUrl();return false;" class="item4">自助挂号</a>
    <a class="item5" href="javascript:scroll(0,0)"></a>
    </div>
</div>