如何创建此下拉框

Question

我正在尝试创建一个向下滑动的下拉框，并在底部图像向内滑动时保留底部图像。 我一直在努力寻找专门用于此的脚本，但我找不到任何脚本。 也许有人可以给我一个良好的开端或指针。 或者有没有人有我可以解决的脚本？

这是我的目标：创建一个向下滑动的菜单，在单击时向下和向上滑动，但保留此外观。

Answer 1

这是一个简单的下拉内容，你用jQuery描述的内容： http ： //jsfiddle.net/t9hq9/19/你可以用你的底部图像替换我的#bottom ，我的只是用带有border-radius的css。

HTML：

<div id="content">CONTENT</div>
<div id="bottom"></div>

CSS：

#content {
width: 400px;
border-left: 10px solid #FA802F;
border-right: 10px solid #FA802F;
text-align: center;
padding: 100px 0px 100px 0px;
display: none;
}

#bottom {
width: 420px;
height: 100px;

background-color: #FA802F;
-webkit-border-bottom-left-radius: 50px;
-moz-border-bottom-left-radius: 50px;
border-bottom-left-radius: 100px;

-webkit-border-bottom-right-radius: 50px;
-moz-border-bottom-right-radius: 50px;
border-bottom-right-radius: 100px;   
}

JS：

$('#bottom').toggle(
  function() {
    $('#content').slideDown();
  },
  function() {
    $('#content').slideUp();
  }
);

Answer 2

您可以将底部的圆角部分剪切为图像，并尝试以下方法：

/* CSS */
#dropDown {
  background: url(menuBottom.png) no-repeat bottom;
  padding-bottom: 40px; /* adjust based on the height of the bottom image */
}
#dropDown ul {
  border-color: orange;
  border-width: 0 5px;      
}

<!-- HTML -->
<nav id="dropDown">
  <ul>
    ...
  </ul>
</nav>

要动态显示/隐藏菜单，可以使用jQuery。

// When the page has loaded
$(document).ready(function() {
  // Hide the drop-down menu
  $('#dropDown ul').hide();

  $('#dropDown').hover(function() {
    // Show on mouse over
    $('#dropDown ul').show();
  }, function() {
    // Hide on mouse out
    $('#dropDown ul').hide();
  });
});

有关详细信息，A List Apart在http://www.alistapart.com/articles/taminglists/上有一篇关于将无序列表样式化为菜单的精彩文章。 您可能还想查看http://api.jquery.com/hover/ ，了解有关使用jQuery的悬停事件的详细信息。

Answer 3

EDITED（改进了整个代码......包括jQuery 1.7.1）

像这里提到的许多人一样，你可以使用图像作为背景。 使用border-radius，您可以保持InternetExplorer 8-访问者的外观。 我，我自己，花了几个月试图使用每个人的png-fix /插件等给IE8圆角，但最后，我放弃并使用了图像。

事实证明，在编码方面它是一种很少的压力，并且应用精灵会使事情变得更容易。

最底部（圆形部分）是整个图像（在我的情况下），侧面是同一图像的切口，高度为1px，并在中心清洁。

我申请“运动”的CSS：

<style type='text/css' media='screen'>
    #wrapper   { position:relative; width:800px; height:800px; margin:0 auto; display:block; z-index:1; }
    #docHeader { position:relative; margin:0; width:100%; height:60px; overflow:hidden; background-color:green; 
        color:orange; font-size:36px; text-align:center; line-height:60px; vertical-align:middle; z-index:2; }

    .nav {
        cursor:pointer;
    }
    .navContent {
        width:172px;
        height:0px;
        overflow:hidden;
        background: transparent url(content.png) repeat-y top left;
    }
    .navContent span {
        display:block;
        margin-left:8px;
        line-height:22px;
        font-size:14px;
        text-align:left;
    }
    .navTitle {
        width:172px;
        height:35px;
        text-align:center;
        line-height:35px;
        vertical-align:middle;
        color:green;
        font-size:24px;
        background: transparent url(bottom.png) no-repeat top left;
    }

    #docBody { position:relative; margin:0; width:100%; height:100%; overflow:auto; z-index:2; }

    #content { position:absolute; top:0; left:0; width:100%; min-height:600px; background:transparent; overflow:auto; z-index:3; }

</style>

javascript：

<script type='text/javascript' src='jquery-1.7.1.min.js'></script>
<script type='text/javascript'>

    jQuery( function () {

        $('div.nav').on( { 
            mouseenter : function () {
                var $this = $(this);
                $this.addClass('mouseHasEntered');
                if ($this.hasClass('mouseHasLeft')) $this.removeClass('mouseHasLeft');
                setTimeout( function () {
                    if ($this.hasClass('mouseHasEntered')) {
                        var iCount = $this.find('span').length * 24;
                        $this.find('.navContent').animate( { 'height' : iCount+'px' },1000 );
                    }
                },100);
            },
            mouseleave : function () {
                var $this = $(this);
                $this.addClass('mouseHasLeft');
                if ($this.hasClass('mouseHasEntered')) $this.removeClass('mouseHasEntered');
                setTimeout( function () {
                    if ($this.hasClass('mouseHasLeft')) {
                        $this.find('.navContent').animate( { 'height' : '0px' },1000 );
                    }
                },200);
            }
        });

    });

    $(document).ready( function () {
        setTimeout( function () { /// show the spinning ajax loader gif
            $('#content').load('roundMenu.content.html');
        },2000);
    });

</script>

事物的身体方面：

  <div id='wrapper' >
   <div id='docHeader' >The Header</div>

   <div class='nav' style='position:absolute; top:60px; left:0; z-index:5; ' >
    <div class='navContent' >
     <span>Go here</span>
     <span>Go there</span>
    </div>
    <div class='navTitle' >OPTIONS I</div>
   </div>

   <div class='nav' style='position:absolute; top:60px; left:209px; z-index:5; ' >
    <div class='navContent' >
     <span>Go here 2</span>
     <span>Go there 2 </span>
     <span>Go ever there </span>
    </div>
    <div class='navTitle' >OPTIONS II</div>
   </div>

   <div class='nav' style='position:absolute; top:60px; left:418px; z-index:5; ' >
    <div class='navContent' >
     <span>Go here 3</span>
     <span>Go there 3 </span>
     <span>Go ever there 2</span>
    </div>
    <div class='navTitle' >OPTIONS III</div>
   </div>

   <div class='nav' style='position:absolute; top:60px; left:628px; z-index:5; ' >
    <div class='navContent' >
     <span>Go here 4</span>
     <span>Go there 4 </span>
     <span>Go ever there 3</span>
     <span>Why not complicate</span>
    </div>
    <div class='navTitle' >OPTIONS IV</div>
   </div>

   <div id='docBody' >

    <div id='content' >
     <img src='ajax-Loader.gif' border='0' alt='0' style='position:relative; margin:45% 45%; ' />
    </div>

   </div>

  </div>

示例：http： //zequinha-bsb.int-domains.com/roundmenu.html