当前位置： 文江博客话题详情

熔岩灯下拉重叠

发布于 2024-09-10 22:51:55 字数 5944 浏览 7 评论 0原文

我正在尝试使用 jquery 的 lavalamp 插件并为其添加下拉功能。

下拉菜单和 lavalamp 效果在此代码上都运行良好，但我的问题是下拉菜单扩展了 lavalamp 效果。

我确信问题出在 css 上，但我无法确定它......欢迎任何提示或指示。

这是代码。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Test</title>        
        <link type="text/css" href="css/sample.css" rel="stylesheet"/>
        <script type="text/javascript" src="js/jquery.js"></script>    
        <script type="text/javascript" src="js/jquery.lavalamp.js"></script>
        <script type="text/javascript" src="js/jquery.easing.min.js"></script>
        <script type="text/javascript" src="js/slider.js"></script>    
        <script type="text/javascript">
        $(function() {
            $("#1").lavaLamp({
                fx: "backout", 
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
    </script>

    </head>
    <body>
        <ul class="drop-down" id="1">
        <li class="top">         
           <div class="topbar"><a href="#">Home</a></div>
           <div class="sub">
            <ul>
                <li class="1">
                    <div><a href"#">Calendar</a></div>
                </li>
                <li class="2">
                    <div><a href"#">account</a></div>
                </li>

            </ul> </div>
        </li>
        <li class="top1">
            <div class="topbar1"><a href="#">Resort</a></div>
            <div class="sub1"><ul>
                <li>
                    <div><a href"#">Calendar</a></div>
                </li>
                <li>
                    <div><a href"#">account</a></div>
                </li>                
            </ul></div>
        </li>
        <li class="top2">
            <div class="topbar2"><a href="#">Hotel</a></div>
            <div class="sub2"><ul>
                <li>
                    <div><a href"#">Calendar</a></div>
                </li>
                <li>
                    <div><a href"#">account</a></div>
                </li>                
            </ul></div>
        </li>

        <li class="top3">
            <div class="topbar3"><a href="#">Farm House</a></div></li>
    </ul>




</html>

相应的 css

.drop-down {
    position: relative;
    height: 35px;            
    background: #e8e8e8 url('../img/three_0.gif') repeat-x;
    padding: 0px;
    margin:  0px;   
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

.top, .top1, .top2, .top3,
.top4, .top5, .top6 {
    float: left;    
    padding-left: 24px;
    padding-right: 24px;
    line-height: 30px;
    list-style: none;
}

.drop-down li.back {
    background: #cecece;
    width:auto;
    height: 32px;
    margin-top: 2px;
    z-index: 8;
    position: absolute;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

.drop-down li div.topbar, .drop-down li div.topbar1,.drop-down li div.topbar2,
.drop-down li div.topbar3{
    font: bold 14px arial;
    text-decoration: none;
    color: #fff;
    outline: none;
    text-align: center;
    top: 7px;
    text-transform: uppercase;
    letter-spacing: 0;
    z-index: 10;
    display: block;
    float: left;
    height: 30px;
    position: relative; 

}


.sub, .sub1, .sub2, .sub3{
    display: none;    
    float: left;
    top: 34px;
    left: 0;
    width: 160px;   
    margin: 0px 0 0 -4px;
    background: #cecece;
    white-space: nowrap;    
    -moz-border-radius-bottomleft: 7px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 7px;
    -moz-border-radius-bottomright: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-bottom-right-radius: 7px;
    -webkit-border-top-right-radius: 7px;    
    height: auto;
    position: relative;
    z-index: 20;
}

.sub li, .sub1 li, .sub2 li, .sub3 li{
    display: block;
    height: 25px;
    position: relative;
    z-index: 30;
    float: left;
    width: 160px;   
    font-weight: normal;
    background: #cecece;
}

.sub li a, .sub1 li a , .sub2 li a, .sub3 li a{
    position: relative;
    z-index: 40;
    height: 25px;
    display: block;
    float: left;
    line-height: 20px;
    text-decoration: none;
    margin-top: 1px;
    white-space: nowrap;    
    padding-right: 5px;
    text-align: center;
}

.sub li a:hover, .sub1 li a:hover, .sub2 li a:hover, .sub3 li a:hover{
    background: #ffb600;
    width: 120px;    
    line-height: 20px;          
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    color: #fff;
}

以及我用于下拉菜单的 jquery。

$(document).ready(function() {   

        $('li.top').hover(function () {            
            $('div.sub').slideDown('medium');
    }, 
        function(){
            $('div.sub').stop(true,true).css('display','none');

    });
        $('li.top1').hover(function () {            
            $('div.sub1').slideDown('medium');
    }, 
        function(){
            $('div.sub1').stop(true,true).css('display','none');
    });        

        $('li.top2').hover(function () {            
            $('div.sub2').slideDown('medium');
    }, 
        function(){
            $('div.sub2').stop(true,true).css('display','none');
    });     

});
原文

I am trying to work with the lavalamp plugin for jquery and add a drop down functionality to that.

Both the drop down and the lavalamp effect works fine on this code except my problem is the drop down extends the lavalamp effect.

i am sure the problem is with css but i am not able to pin it down ... any tips or pointers is welcome.

here is the code.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Test</title>        
        <link type="text/css" href="css/sample.css" rel="stylesheet"/>
        <script type="text/javascript" src="js/jquery.js"></script>    
        <script type="text/javascript" src="js/jquery.lavalamp.js"></script>
        <script type="text/javascript" src="js/jquery.easing.min.js"></script>
        <script type="text/javascript" src="js/slider.js"></script>    
        <script type="text/javascript">
        $(function() {
            $("#1").lavaLamp({
                fx: "backout", 
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
    </script>

    </head>
    <body>
        <ul class="drop-down" id="1">
        <li class="top">         
           <div class="topbar"><a href="#">Home</a></div>
           <div class="sub">
            <ul>
                <li class="1">
                    <div><a href"#">Calendar</a></div>
                </li>
                <li class="2">
                    <div><a href"#">account</a></div>
                </li>

            </ul> </div>
        </li>
        <li class="top1">
            <div class="topbar1"><a href="#">Resort</a></div>
            <div class="sub1"><ul>
                <li>
                    <div><a href"#">Calendar</a></div>
                </li>
                <li>
                    <div><a href"#">account</a></div>
                </li>                
            </ul></div>
        </li>
        <li class="top2">
            <div class="topbar2"><a href="#">Hotel</a></div>
            <div class="sub2"><ul>
                <li>
                    <div><a href"#">Calendar</a></div>
                </li>
                <li>
                    <div><a href"#">account</a></div>
                </li>                
            </ul></div>
        </li>

        <li class="top3">
            <div class="topbar3"><a href="#">Farm House</a></div></li>
    </ul>




</html>

the corresponding css

.drop-down {
    position: relative;
    height: 35px;            
    background: #e8e8e8 url('../img/three_0.gif') repeat-x;
    padding: 0px;
    margin:  0px;   
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

.top, .top1, .top2, .top3,
.top4, .top5, .top6 {
    float: left;    
    padding-left: 24px;
    padding-right: 24px;
    line-height: 30px;
    list-style: none;
}

.drop-down li.back {
    background: #cecece;
    width:auto;
    height: 32px;
    margin-top: 2px;
    z-index: 8;
    position: absolute;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
}

.drop-down li div.topbar, .drop-down li div.topbar1,.drop-down li div.topbar2,
.drop-down li div.topbar3{
    font: bold 14px arial;
    text-decoration: none;
    color: #fff;
    outline: none;
    text-align: center;
    top: 7px;
    text-transform: uppercase;
    letter-spacing: 0;
    z-index: 10;
    display: block;
    float: left;
    height: 30px;
    position: relative; 

}


.sub, .sub1, .sub2, .sub3{
    display: none;    
    float: left;
    top: 34px;
    left: 0;
    width: 160px;   
    margin: 0px 0 0 -4px;
    background: #cecece;
    white-space: nowrap;    
    -moz-border-radius-bottomleft: 7px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 7px;
    -moz-border-radius-bottomright: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-bottom-right-radius: 7px;
    -webkit-border-top-right-radius: 7px;    
    height: auto;
    position: relative;
    z-index: 20;
}

.sub li, .sub1 li, .sub2 li, .sub3 li{
    display: block;
    height: 25px;
    position: relative;
    z-index: 30;
    float: left;
    width: 160px;   
    font-weight: normal;
    background: #cecece;
}

.sub li a, .sub1 li a , .sub2 li a, .sub3 li a{
    position: relative;
    z-index: 40;
    height: 25px;
    display: block;
    float: left;
    line-height: 20px;
    text-decoration: none;
    margin-top: 1px;
    white-space: nowrap;    
    padding-right: 5px;
    text-align: center;
}

.sub li a:hover, .sub1 li a:hover, .sub2 li a:hover, .sub3 li a:hover{
    background: #ffb600;
    width: 120px;    
    line-height: 20px;          
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    color: #fff;
}

along with the jquery i use for the drop down.

$(document).ready(function() {   

        $('li.top').hover(function () {            
            $('div.sub').slideDown('medium');
    }, 
        function(){
            $('div.sub').stop(true,true).css('display','none');

    });
        $('li.top1').hover(function () {            
            $('div.sub1').slideDown('medium');
    }, 
        function(){
            $('div.sub1').stop(true,true).css('display','none');
    });        

        $('li.top2').hover(function () {            
            $('div.sub2').slideDown('medium');
    }, 
        function(){
            $('div.sub2').stop(true,true).css('display','none');
    });     

});

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

a√萤火虫的光℡ 2024-09-17 22:51:56

.1 和 .2 上的 CSS 是什么？另外，更改这些名称的名称是一个非常好的主意，以便有一个字母作为第一个字符，例如 .c1 和 .c2

我注意到你有 .sub li，但 .sub 是一个 div，要么放弃div 并将 ul 的类设为 sub （或者更好的是 id ，因为您正在使用像 id 这样的类）或将其设为

.sub ul li ，它也是 .sub li

， border-radius 现在是标准的，所以您可以放弃 -moz和-webkit废话

whats the css on .1 and .2? also, it would be a VERY good idea to change the names of those so that there is a letter as the first character e.g. .c1 and .c2

i noticed that you have .sub li, but .sub is a div, either ditch the div and make the ul's class sub(or better yet id since you're using these classes like id's) or make it

.sub ul li where it's .sub li

also, border-radius is standard now, so you can ditch that -moz and -webkit crap

回复 原文
~没有更多了~

关于作者

屋顶上的小猫咪

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

苍风燃霜

文章 0 评论 0

我的黑色迷你裙

文章 0 评论 0

悸初

文章 0 评论 0

撧情箌佬

文章 0 评论 0

森罗

文章 0 评论 0

lyn1245

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文