0

我需要像我们跟随的那样创建下拉菜单。

在此处输入图像描述

在suppage,幻灯片必须是打开的。

例如,如果我单击服务 2,在服务 2 页面中,幻灯片将打开。服务 2 将作为选定菜单。

我附上了我的代码。

我需要在子页面中打开子菜单。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="droplinetabs.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script src="droplinemenu.js" type="text/javascript"></script>

<script type="text/javascript">

droplinemenu.buildmenu("droplinetabs1")

</script>
</head>

<body>
<div id="droplinetabs1" class="droplinetabs">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>About</span></a>
  <ul>
  <li><a href="#">About 1</a></li>
  <li><a href="#">About 2</a></li>
  <li><a href="#">About 3</a></li>
  <li><a href="#">About 4</a></li>
  </ul>
</li>
<li><a href="#"><span>Services</span></a>
  <ul>
  <li><a href="#">Services 1</a></li>
  <li><a href="#">Services 2</a></li>
  <li><a href="#">Services 3</a></li>
  <li><a href="#">Services 4</a></li>
  <li><a href="#">Services 5</a></li>
  </ul>
</li>
<li><a href="#"><span>Gallery</span></a></li>
</ul>
</div>
</body>
</html>

CSS文件

.droplinetabs{
    overflow: hidden;
    border-bottom: 1px solid gray; /*underline across bottom of main tabs*/
}

.droplinetabs ul{
    font: bold 11px Verdana, sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}

.droplinetabs li{
    display: inline;
    margin: 0 2px 0 0;
    padding: 0;
    text-transform: uppercase;
}


.droplinetabs a{
    float: left;
    color: white;
    background: #c76023 url(leftedge.gif) no-repeat left top; /*default background color of tabs, left corner image*/
    margin: 0 4px 0 0;
    padding: 0 0 4px 3px;
    text-decoration: none;
    letter-spacing: 1px;
}

.droplinetabs a:link, .droplinetabs a::visited, .droplinetabs a:active{
    color: white;
}

.droplinetabs a span{
    float: left;
    display: block;
    background: transparent url(rightedge.gif) no-repeat right top; /*right corner image*/
    padding: 7px 9px 3px 6px;
    cursor: pointer;
}

.droplinetabs a span{
    float: none;
}


.droplinetabs a:hover{
    background-color: #b05016; /*background color of tabs onMouseover*/
    color: white;
}

.droplinetabs a:hover span{
    background-color: transparent;
}

/* Sub level menus*/
.droplinetabs ul li ul{
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    background: #c76023; /*sub menu background color */
    visibility: hidden;
}

/* Sub level menu links style */
.droplinetabs ul li ul li a{
    font: normal 13px Verdana;
    padding: 6px;
    padding-right: 8px;
    margin: 0;
    background: #c76023; /*sub menu background color */
}

.droplinetabs ul li ul li a span{
    background: #c76023; /*sub menu background color */
}

.droplinetabs ul li ul li a:hover{ /*sub menu links' background color onMouseover. Add rounded edges in capable browsers */
    background: #714421;
    -webkit-border-radius: 5px;  
    -moz-border-radius: 5px; 
    -khtml-border-radius: 5px;  
    border-radius: 5px;
}

查询文件

var droplinemenu={

arrowimage: {classname: 'downarrowclass', src: 'down.gif', leftpadding: 5}, //customize down arrow image
animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid){
    jQuery(document).ready(function($){
        var $mainmenu=$("#"+menuid+">ul")
        var $headers=$mainmenu.find("ul").parent()
        $headers.each(function(i){
            var $curobj=$(this)
            var $subul=$(this).find('ul:eq(0)')
            this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
            this.istopheader=$curobj.parents("ul").length==1? true : false
            if (!this.istopheader)
                $subul.css({left:0, top:this._dimensions.h})
            var $innerheader=$curobj.children('a').eq(0)
            $innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
            $innerheader.append(
                '<img src="'+ droplinemenu.arrowimage.src
                +'" class="' + droplinemenu.arrowimage.classname
                + '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'
            )

            $curobj.hover(
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    if ($targetul.queue().length<=1) //if 1 or less queued animations
                        if (this.istopheader)
                            $targetul.css({left: $mainmenu.position().left, top: $mainmenu.position().top+this._dimensions.h})
                        if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
                            $mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
                        $targetul.dequeue().slideDown(droplinemenu.animateduration.over)
                },
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    $targetul.dequeue().slideUp(droplinemenu.animateduration.out)
                }
            ) //end hover
        }) //end $headers.each()
        $mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
    }) //end document.ready
}
}
4

1 回答 1

2

我看了你的代码。我不得不说这有点笨拙,因为很多样式都是直接硬编码到你的 JavaScript 中的。理想情况下,您希望分离尽可能多的样式并改用类。下拉菜单的绝对定位并不是真正必要的,并且会导致解决方案更加复杂。

如果您希望其中一个下拉菜单自动出现,您可以例如在该 UL 上添加一个 on 类。所以说你在服务页面上。菜单将改为显示服务选项:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="droplinetabs.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script src="droplinemenu.js" type="text/javascript"></script>

<script type="text/javascript">

droplinemenu.buildmenu("droplinetabs1")

</script>
</head>

<body>
<div id="droplinetabs1" class="droplinetabs">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>About</span></a>
  <ul>
  <li><a href="#">About 1</a></li>
  <li><a href="#">About 2</a></li>
  <li><a href="#">About 3</a></li>
  <li><a href="#">About 4</a></li>
  </ul>
</li>
<li><a href="#"><span>Services</span></a>
  <ul class="on">
  <li><a href="#">Services 1</a></li>
  <li><a href="#">Services 2</a></li>
  <li><a href="#">Services 3</a></li>
  <li><a href="#">Services 4</a></li>
  <li><a href="#">Services 5</a></li>
  </ul>
</li>
<li><a href="#"><span>Gallery</span></a></li>
</ul>
</div>
</body>
</html>

然后在您的 JS 中,在所有隐藏发生后,您可以循环遍历 UL 以检查它是否具有“打开”类,它会立即动画。

所以在 $mainmenu.find("ul").... 部分之后添加以下部分

    var droplinemenu={

arrowimage: {classname: 'downarrowclass', src: 'down.gif', leftpadding: 5}, //customize down arrow image
animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid){
    jQuery(document).ready(function($){
        var $mainmenu=$("#"+menuid+">ul")
        var $headers=$mainmenu.find("ul").parent()
        $headers.each(function(i){
            var $curobj=$(this)
            var $subul=$(this).find('ul:eq(0)')
            this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
            this.istopheader=$curobj.parents("ul").length==1? true : false
            if (!this.istopheader)
                $subul.css({left:0, top:this._dimensions.h})
            var $innerheader=$curobj.children('a').eq(0)
            $innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
            $innerheader.append(
                '<img src="'+ droplinemenu.arrowimage.src
                +'" class="' + droplinemenu.arrowimage.classname
                + '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'
            )

            $curobj.hover(
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    if ($targetul.queue().length<=1) //if 1 or less queued animations
                        if (this.istopheader){
                            $targetul.css({left: $mainmenu.position().left, top: $mainmenu.position().top+this._dimensions.h})
                        }
                        if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
                            $mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
                        $targetul.dequeue().slideDown(droplinemenu.animateduration.over)
                },
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    $targetul.dequeue().slideUp(droplinemenu.animateduration.out)
                }
            ) //end hover
        }) //end $headers.each()

        $mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
        $($mainmenu.find("ul")).each(function(index) {
            if($(this).hasClass('on')){
                $(this).css({left:$mainmenu.position().left,top:$mainmenu.position().top+$(this).height()})
                $(this).slideDown(droplinemenu.animateduration.over)
            }
        });
    }) //end document.ready
}
}

这不是一个理想的解决方案,因为您应该能够在该 UL 的 on 类上简单地执行“显示:块”,但是因为在您的手风琴 JS 中进行了如此多的样式计算,所以这不能那么容易地完成。不过,这个“hack”应该对你有用,我希望它可以。

我会建议一个更优雅的 jQuery 手风琴解决方案,网上有很多可以查看的。看起来您可能一直在查看您正在使用的 jQuery 版本的一个相对较旧的示例。

于 2012-06-14T11:42:05.513 回答