常识 共享 合作 bodog官网

    bodog官网专心于网页资料下载,供给博狗博彩、网页规划、ps资料、图片资料等,服务于【个人站长】【网页规划师】和【web开发从业者】的代码资料与规划资料网站。

    bodog官网供给网页资料下载、博狗博彩
    常识 共享 合作!

    jquery弹出下拉菜单插件弹出层相对于本身的父层

    作者:佳明妈 来历:jquery特效 2012-06-17 人气:
    这个jquery弹出下拉菜单插件弹出层相对于本身的父层jquery特效弹出下拉菜单作用,考虑到不需要改动程序所以就使用本来的JS代码,用ajax的方法加载(今后只保护那个ajax加载的文件即可

    bodog官网阐明:id="lr_systembox" 这个外层的父层是演示用的层,实践使用中你能够借用顶部或者是其他什么地方的div层,这个父层要设置相对定位,为了肯定定位里边的弹出菜单的方位。

    这个弹出下拉菜单插件弹出层相对于本身的父层jquery特效弹出下拉菜单作用,是bodog官网在一做校园网站的时分用的,需求要在中心校的部属校园的顶部都呈现这个菜单,所以bodog官网就选用的灰色按钮(灰色能够调配各种风格色彩^_^),考虑到不需要改动程序所以就使用本来的JS代码,用ajax的方法加载(今后只保护那个ajax加载的文件即可)。

    或许你会觉得bodog官网的弹出菜单结构有点杂乱了,其实不然,dl dt dd结构是有后续考虑的比如要加三级菜单的时分,这种结构就会有一点用武之地了,懒人能够再增加dd标签

    bodog官网的拙作期望能协助到像我相同的菜鸟,高手能够飘过自己写的。^_^

    中心jquery特效代码如下:
    <script type="text/javascript">
    $(document).ready(function(){
        var lr_systembtn = $("#lr_systembtn");
        var lr_menu = $("#lr_menu");
        lr_systembtn.mouseenter(function(){
            t_delay= setTimeout(function(){
                lr_menu.fadeIn("slow");
            }200);
        });
        lr_systembtn.mouseleave(function(){
            clearTimeout(t_delay);
            lr_menu.fadeOut("slow");
        });

    });
    </script>

    css代码:
    /*bodog官网弹出菜单*/
    #lr_systembox{ width:980px; height:50px; background-color:#CCC; position:relative; margin:0 auto; z-index:100000;}
    .lr_systembtn{ width:201px; height:35px; line-height:33px;position:absolute; top:0px; right:0px; z-index:100004;}
    .lr_systembtn .lr_abtn{ width:100%; height:35px; display:block; font-size:15px; font-weight:bold;color:#666666;
    background-image: url(lr_images/btn_system.png);background-repeat:no-repeat;background-position:left top;}
    .lr_systembtn .lr_abtn:hover{color:#333333;background-position:left bottom;}
    .lr_systembtn .lr_abtn span{ padding-left:28px;}
    .lr_menu{ width:184px; padding:8px 6px 8px 6px; background-color:#ffffff; border:#ACACAC solid 2px;filter:alpha(opacity=90);opacity: 0.90;
    position:absolute; top:35px; right:0px;  z-index:100005;display:none;}
    .lr_menu dl{width:100%; display:block; overflow:hidden;}
    .lr_menu a{ width:100%;display:block; color:#666666;border-bottom:#ACACAC dashed 1px;height:30px; line-height:30px; font-size:14px;
    background-image: url(lr_images/jt1.gif);background-repeat:no-repeat;background-position:6px center;}
    .lr_menu a:hover{background-color:#E2E2E2; color:#333333; text-decoration:none;}
    .lr_menu dt{}
    .lr_menu dt a{font-weight:bold;text-indent:14px;}
    .lr_menu dd a{text-indent:24px;background-position:16px center;}

    html代码:
    <div id="lr_systembox">

        <div id="lr_systembtn" class="lr_systembtn">
            <a href="#" class="lr_abtn"><span>bodog官网为您供给</span></a>
            <div id="lr_menu" class="lr_menu">
              <dl>
                 <dt><a href="http://www.3mbodoglv.com/js/" target="_blank">jquery特效</a></dt>
              </dl>
              <dl>
                 <dt><a href="http://www.3mbodoglv.com/js/nav/" target="_blank">导航菜单</a></dt>
                 <dd><a href="#" target="_blank">三级菜单测验</a></dd>
                 <dd><a href="#" target="_blank">三级菜单测验</a></dd>
              </dl>   
              <dl>
                 <dt><a href="http://www.3mbodoglv.com/js/slide/" target="_blank">焦点幻灯片</a></dt>
              </dl>
              <dl>
                 <dt><a href="http://www.3mbodoglv.com/js/texiao/" target="_blank">网页特效</a></dt>
              </dl>
              <dl>
                 <dt><a href="http://www.3mbodoglv.com/qqkefu/" target="_blank">qq在线客服代码</a></dt>
              </dl>   
              <dl>
                 <dt><a href="http://www.3mbodoglv.com/jquery_tanchu/" target="_blank">jquery弹出层</a></dt>
              </dl>       
            </div>
        </div>

    </div>

    ↓ 检查全文

    jquery弹出下拉菜单插件弹出层相对于本身的父层由bodog官网收集整理,您能够自在传达,请主动带上本文链接

    bodog官网便是免费共享,觉得有用就多来支撑一下,没有能帮到您,懒人也只能表示遗憾,期望有一天能帮到您。

    jquery弹出下拉菜单插件弹出层相对于本身的父层-最新谈论