Javascript 如何创建此下拉框_Javascript_Html_Jquery_Css

Javascript 如何创建此下拉框

javascript html jquery css

Javascript 如何创建此下拉框,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我正在尝试创建一个下拉框，它可以向下滑动，并在向下滑动时保留底部图像，其中包含内容。我一直在寻找专门用于此的脚本，但我找不到任何脚本。也许有人能在这方面给我一个先机或指引。或者有人有我可以使用的脚本吗我的目标是：创建一个向下滑动的菜单，在单击时向下和向上滑动，但保留这种外观您可以将底部的圆形部分切割为图像，然后尝试以下操作： /* CSS */ #dropDown { background: url(menuBottom.png) no-repeat bottom; padding-

我正在尝试创建一个下拉框，它可以向下滑动，并在向下滑动时保留底部图像，其中包含内容。我一直在寻找专门用于此的脚本，但我找不到任何脚本。也许有人能在这方面给我一个先机或指引。或者有人有我可以使用的脚本吗

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

您可以将底部的圆形部分切割为图像，然后尝试以下操作：

/* 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>

要了解更多信息，ListApart有一篇关于将无序列表样式化为菜单的文章。您可能还想查看有关使用jQuery的悬停事件的详细信息。

您可以将底部的圆形部分剪切为图像，然后尝试以下操作：

/* 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>

要了解更多信息，ListApart有一篇关于将无序列表样式化为菜单的文章。您可能还想查看有关使用jQuery的悬停事件的详细信息。

以下是您使用jQuery描述的一个简单的幻灯片内容：你可以用你的底图替换我的底图，我的底图是用css制作的，带有边框半径

HTML:

JS:

以下是您使用jQuery描述的内容的简单幻灯片：你可以用你的底图替换我的底图，我的底图是用css制作的，带有边框半径

HTML:

JS:

编辑完善了整个代码。。。包括jQuery 1.7.1

就像这里提到的很多一样，您可以使用图像作为背景。使用边界半径，你可以让你的InternetExplorer有8个访客，但没有好看的外观。一、我自己花了几个月的时间试图使用每个人的png补丁/插件等来实现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>

示例：