Question

我需要创建像我们一样的下拉菜单。

enter image description here

在支持中，幻灯片必须打开。

例如，如果我单击“服务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 FILE

.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;
}

JQUERY FILE

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
}
}

Answer 1

我看了你的代码。我不得不说它有点笨拙，因为如此多的样式直接硬编码到你的JavaScript中。理想情况下，您可能希望将样式分开并使用类。下拉菜单的绝对定位并不是必需的，导致解决方案更复杂。

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

<!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来检查它是否有“on”类，它会立即动画。

所以在$ mainmenu.find（“ul”）.... part

之后添加以下部分

    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课堂上做一个“display：block”，但是因为你的手风琴JS正在进行如此多的风格计算，所以不能这样做容易。这个“黑客”应该对你有用，我希望如此。

我会建议一个更优雅的jQuery手风琴解决方案，网上有很多可供选择。看起来你可能已经在查看一个相对较旧的例子，你正在使用的jQuery版本。

根据Dropdown菜单使用jQuery

1 个答案: