最新文章:

首页 Web技术

网站侧边栏滑动菜单特效代码

发布时间:2015年05月23日 评论数:抢沙发 阅读数:1266

    这是一个普遍用到的侧边栏划出菜单功能,同时也是非常美观的的一个侧边栏菜单,主要用于商城页面的搭建,包括返回顶部,收藏网页的js特效,除了侧边栏,还有顶部栏,我都把这些梳理好了,只要按照自身情况稍微修改一下就可以放到自己的网站上。

    网站侧边栏滑动菜单特效代码

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://wuover.qiniudn.com/jquery.js" type="text/javascript"></script> 
    <div class="top">
      <div class="top_bar">
        <div class="top_bar_lef"> <a href="javascript:void(0);" onclick="AddFavorite(window.location)">收藏百家网络博客</a> <i>|</i> 您好,欢迎来到百家网络博客!<i>|</i> </div>
      </div>
    </div>
    
    <style>
    * {margin:0px auto;}
    a{text-decoration:none;}
    body {font:12px/150% Arial,Verdana,"宋体"; color:#555555;}
    .top { width:100%; height:29px; line-height:29px; border-bottom:1px solid #eeeeee; font-size:12px;background:#f7f7f7;}
    .top_bar { width:1210px; }
    .top_bar_lef { float:left; color:#666666;}
    .top_bar_lef a, .top_bar_rig a { padding-right:10px; color:#666666;}
    .top_bar_lef i, .top_bar_rig i { padding-right:10px; }
    .top_bar_lef a:hover, .top_bar_rig a:hover { color:#f03b43; text-decoration:underline;}
    .top_bar_rig { float:right; text-align:right;}
    .top_bar_rig em {padding-right:5px; color:#666666;}
    .top_bar_lef a.member { color:#f03b43; padding:0px 3px;}
    
    
    .side_nav91 { width:44px; height:100%; background:#f1f1f1; border-left:1px solid #dddddd; position:fixed; bottom:0px; right:0px; z-index: 99999999;  _position:absolute; _height:830px; *right:-1px;}
    .sina91{  height:600px; position:relative;  _position:absolute; right:0px;} 
    .sina91_cell { height:70px; margin-bottom:5px; position:relative;}
    .sina91_cell a.link { height:50px; width:44px; padding:10px 0px; display:block; position:absolute; left:0px; z-index:2; background:#f1f1f1; cursor:default;}
    .sina91_cell.cur a.link {background:#eb6161;}
    .sina91_cell .icon { width:25px; height:25px; margin-bottom:2px; background:url(http://www.baiji.com.cn//bj_img/index_v4/sidenavbg.png) no-repeat;}
    .sina91_cell .menu { width:44px; height:18px; line-height:18px; text-align:center; color:#555555;}
    .sina91_cell.ctact .icon { background-position:-48px 0px;}
    .sina91_cell.phone .icon { background-position:-50px -30px;}
    .sina91_cell.cart .icon { background-position:-52px -60px;}
    .sina91_cell.quality .icon { background-position:-52px -92px;}
    .sina91_cell.feedback .icon { background-position:-51px -123px;}
    .sina91_cell.wechat .icon { background-position:-53px -153px;}
    .sina91_cell.poli .icon { background-position:-53px -185px;}
    
    .sina91_cell.ctact.cur .icon { background-position:-2px top;}
    .sina91_cell.phone.cur .icon { background-position:-4px -30px;}
    .sina91_cell.cart.cur .icon { background-position:-6px -60px;}
    .sina91_cell.quality.cur .icon { background-position:-6px -92px;}
    .sina91_cell.feedback.cur .icon { background-position:-5px -123px;}
    .sina91_cell.wechat.cur .icon { background-position:-7px -153px;}
    .sina91_cell.poli.cur .icon { background-position:-7px -185px;}
    .sina91_cell.cur { }
    .sina91_cell.cur .menu { color:#FFF;}
    /*redend*/
    .sina91_line { width:35px; height:2px; margin-bottom:10px; background:url(http://www.baiji.com.cn//bj_img/index_v4/sidenavbg.png) 0px -180px no-repeat;}
    /*-----------------------二级菜单----------------------*/
    .sina91_sec { width:95px; min-height:50px; line-height:25px; position:absolute; top:0px; z-index:1; right:-110px;}
    .sina91_cell.ctact .sina91_sec a { padding:5px 10px 5px 35px; display:block; color:#FFF; background:#676767;}
    .sina91_cell.ctact .sina91_sec a.ctacta {  background:url(http://www.baiji.com.cn//bj_img/index_v4/ctactbg.png) 6px 3px no-repeat #676767; }
    .sina91_cell.ctact .sina91_sec a.ctactb {  background:url(http://www.baiji.com.cn//bj_img/index_v4/ctactbg.png) 6px -24px no-repeat #676767; }
    
    .sina91_phone { width:152px; min-height:70px; position:absolute; top:0px; background:#f2f2f2; z-index:1; right:-152px;}
    .sina91_pha { height:28px; line-height:28px; background:#f2f2f2; font-size:12px; text-align:center; color:#555555; border-left:1px solid #ddd; border-right:1px solid #ddd; border-top:1px solid #ddd;}
    .sina91_phb { height:41px; background:url(http://www.baiji.com.cn//bj_img/index_v4/sidemenu400.gif) center center no-repeat #f03b44;}
    
    .sina91_cart { width:130px; min-height:70px; position:absolute; right:-130px; top:0px; background:#f2f2f2;}
    .sina91_cara { height:34px; line-height:34px; background:url(http://www.baiji.com.cn//bj_img/index_v4/sidenavbg.png) -56px -257px no-repeat #f2f2f2; padding-left:32px; font-size:12px; color:#555555; border-left:1px solid #ddd; border-right:1px solid #ddd; border-top:1px solid #ddd; overflow:hidden;}
    .sina91_cara em { color:#e43941;}
    .sina91_carb { height:35px; line-height:35px; background:#f03b44; text-align:center; color:#FFF;}
    .sina91_carb a { display:block; color:#FFF;}
    .sina91_carb a:hover { text-decoration:underline;}
    .sina91_cell.certi .sina91_sec a, .sina91_cell.pay .sina91_sec a, .sina91_cell.user .sina91_sec a { padding:5px 10px; height:25px; overflow:hidden; display:block; color:#FFF; background:#656565;}
    /*-----------------------二级菜鼠标经过----------------------*/
    .sina91_cell.ctact .sina91_sec a:hover { padding:5px 10px 5px 35px; display:block; color:#FFF; background:#f03b44;}
    .sina91_cell.ctact .sina91_sec a:hover.ctacta {  background:url(http://www.baiji.com.cn//bj_img/index_v4/ctactbg.png) 6px 3px no-repeat #f03b44; }
    .sina91_cell.ctact .sina91_sec a:hover.ctactb {  background:url(http://www.baiji.com.cn//bj_img/index_v4/ctactbg.png) 6px -24px no-repeat #f03b44; }
    .sina91_cell.ctact .sina91_sec a:hover.ctactc {  background:url(http://www.baiji.com.cn//bj_img/index_v4/ctactbg.png) 6px -50px no-repeat #f03b44; }
    .sina91_cell.certi .sina91_sec a:hover, .sina91_cell.pay .sina91_sec a:hover, .sina91_cell.user .sina91_sec a:hover { padding:5px 10px; height:25px; overflow:hidden; display:block; color:#FFF; background:#f03b44;}
    /*-----------背景二级---------*/
    .sina91_cell.quality .sina91_sec a, .sina91_cell.feedback .sina91_sec a, .sina91_cell.history .sina91_sec a, .sina91_cell.poli .sina91_sec a, .sina91_cell.cart .sina91_sec a  { padding:5px; height:25px; overflow:hidden; display:block; color:#FFF; background:#676767; text-align:center; }
    .sina91_cell.quality .sina91_sec a:hover, .sina91_cell.feedback .sina91_sec a:hover, .sina91_cell.history .sina91_sec a:hover, .sina91_cell.poli .sina91_sec a:hover, .sina91_cell.cart .sina91_sec a:hover { background:#f03b44; }
    .sina91_cell.phone .sina91_sec a { padding:5px; height:25px; overflow:hidden; display:block; color:#FFF; background:#f03b44; text-align:center; }
    .sina91_cell.quality .sina91_point, .sina91_cell.feedback .sina91_point, .sina91_cell.cart .sina91_point, .sina91_cell.wechat .sina91_point {border-left: 8px solid #f03b44; display:none; }
    .sina91_cell.phone .sina91_sec a { font-size:14px;}
    /*-----------微信二级---------*/
    .sina91_wechat { width:130px; bottom:0px; right:44px; display:block; display:none; position:absolute;}
    .sn91_wca {  padding:10px 0px; text-align:center; border:solid #dddddd; border-width:1px 1px 0px 1px; background:#FFF;}
    .sn91_wcb { padding:5px 10px; height: 40px; line-height: 20px; text-align: center;color:#FFF; background:#f03b44;}
    .sina91_point {  position: absolute; top: 12px; right: 50px; width: 0; height: 0; line-height: 0; font-size: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid #cacaca; opacity: 0; filter: alpha(opacity=0); display:none;}
    .backtop91 { width:44px; height:44px; position:absolute; bottom:0px; left:0px; background:url(http://www.baiji.com.cn//bj_img/index_v4/sidenavbg.png) -45px -217px no-repeat #dddddd; display:block;}
    .backtop91:hover { background:url(http://www.baiji.com.cn//bj_img/index_v4/sidenavbg.png) 2px -217px no-repeat #eb6161;}
    /*-----------微信二级 end  1212add---------*/
    .sidnposi91 {  position:absolute; bottom:0px; left:0px; _height:800px; _width:44px; width:44px;}
    </style>
    
    <div class="side_nav91">
      <div class="sidnposi91">
        <div class="sina91">
          <div class="sina91_cell ctact"> <a class="link">
            <div class="icon"></div>
            <div class="menu">在线</div>
            <div class="clear"></div>
            </a>
            <div class="sina91_sec" style="right: -110px;"> <a onclick="onlineinquiry_click();" href="" class="ctacta">在线咨询</a> <a href="" class="ctactb">QQ在线</a>
              <div class="clear"></div>
            </div>
            <div class="clear"></div>
          </div>
          <div class="sina91_cell phone"> <a class="link">
            <div class="icon"></div>
            <div class="menu">电话</div>
            <div class="clear"></div>
            </a>
            <div class="sina91_sec" style="right: -110px;"> <a>1183238717</a>
              <div class="clear"></div>
            </div>
            <div class="clear"></div>
          </div>
          <div class="sina91_cell cart"> <a class="link">
            <div class="icon"></div>
            <div class="menu">购物车</div>
            <div class="clear"></div>
            </a>
            <div class="sina91_sec" style="right: -110px;"><a href="" target="_blank">购物车0件</a>
              <div class="clear"></div>
            </div>
            <div class="sina91_point" style="right: 27px;opacity: 1;display: inline;display:none;"></div>
            <div class="clear"></div>
          </div>
          <div class="sina91_cell quality"> <a class="link">
            <div class="icon"></div>
            <div class="menu">保障</div>
            <div class="clear"></div>
            </a>
            <div class="sina91_sec" style="right: -110px;"> <a href="http://www.wuover.com/" target="_blank">正品保障</a>
              <div class="clear"></div>
            </div>
            <div class="clear"></div>
          </div>
          <div class="sina91_cell feedback"> <a class="link">
            <div class="icon"></div>
            <div class="menu">反馈</div>
            <div class="clear"></div>
            </a>
            <div class="sina91_sec" style="right: -110px;"> <a href="http://www.wuover.com/" target="_blank">投诉建议</a>
              <div class="clear"></div>
            </div>
            <div class="clear"></div>
          </div>
          <div class="sina91_cell wechat"> <a class="link" href="http://www.wuover.com/">
            <div class="icon"></div>
            <div class="menu">微信</div>
            <div class="clear"></div>
            </a>
            <div class="sina91_wechat" style="display: none;">
              <div class="sn91_wca"><img src="http://www.wuover.com/img/gongzhonghao.jpg" width="110" height="110"></div>
              <div class="sn91_wcb">加微信享受更多优惠<br />
                ID:qiuyeboke</div>
              <div class="clear"></div>
            </div>
            <div class="sina91_point" style="right: 27px;opacity: 1;display: inline; display:none;"></div>
            <div class="clear"></div>
          </div>
          <div class="sina91_cell poli"> <a class="link" href="http://www.wuover.com/">
            <div class="icon"></div>
            <div class="menu">防诈骗</div>
            <div class="clear"></div>
            </a>
            <div class="sina91_sec" style="right: -110px;"> <a href="http://www.wuover.com/" target="_blank">防诈骗公告</a>
              <div class="clear"></div>
            </div>
            <div class="clear"></div>
          </div>
          <a href="javascript:;" id="back-to-top" class="backtop91"></a>
          <div class="clear"></div>
        </div>
        <div class="clear"></div>
      </div>
      <div class="clear"></div>
    </div>
    </div>
    <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 /><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 /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <script>
    /*加入收藏夹*/
    function AddFavorite(sURL, sTitle)
    {
        try{window.external.addFavorite(sURL, sTitle);}
        catch (e)
        {
            try{
    			window.sidebar.addPanel(sTitle, sURL, "");
    		}
            catch (e){alert("收藏失败,请使用Ctrl+D收藏【百家网络博客】");}
        }
    }
    
    $(function () {
    	//当点击跳转链接后,回到页面顶部位置
    	$("#back-to-top").click(function(){
    	$('body,html').animate({scrollTop:0},250); //距离顶部0像素,250为时间
    	return false;
    	});		
    	//侧导鼠标经过背景
    	$(".sina91_cell").hover(function(){
    		$(this).addClass("cur");
    		$(this).children(".sina91_sec").animate({right:44},250);
    		$(this).children(".sina91_phone").animate({right:44},250);
    		$(this).children(".sina91_cart").animate({right:44},250);
    		$(this).children(".sina91_wechat").show();
    		},function(){
    			
    			$(this).removeClass("cur");
    			$(this).children(".sina91_sec").animate({right:-110},250);
    			$(this).children(".sina91_phone").animate({right:-152},250);
    			$(this).children(".sina91_cart").animate({right:-110},250);
    			$(this).children(".sina91_wechat").hide();
    	})
    });
    </script>
二维码加载中...
本文作者:Mr.linus      文章标题: 网站侧边栏滑动菜单特效代码
本文地址:http://www.90qj.com/58  百度暂未收录本文
版权声明:若无注明,本文皆为“挨踢 Blog”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论