Question

就像标题所说的那样，我有一个侧边栏菜单，当我点击其中一个菜单项博客时，我正试图完全滑动并远离视线。类似于我发现的这个jsfiddle（最好没有js，简直就是bc我几乎不知道它，但如果那是唯一没有大的方法）：fiddle;除了我的菜单已经打开，您将点击菜单中的项目将其向上滑动。我想让菜单慢慢滑起来。菜单如下所示：

标志

家
博客
的Instagram
约
存储
组合
接触

我尝试的所有内容都会改变侧边栏的整体布局，这是我不想要的。这是我的一些代码：

<div id="sidebar"> 
        <div id="navigation">
          <div id="logo">
          <img src="Logos/headerlogo.jpg" width="208" height="80" longdesc="Logos/headerlogo.jpg">
        </div>
    <hr size=1 width=179 align=left style="margin-left:17px; margin-bottom:20px">
<div class="menu">
    <ul class="first" >
    <li> <a href="" title="" runat="server">Home</a></li>
    <li> <a href="" title="" runat="server">Blog</a></li>
    <li> <a href="" title="" runat="server">Instagram</a></li>
    <li> <a href="" title="" runat="server">About</a></li>
    <li> <a href="" title="" runat="server">Store</a></li>
    <li> <a href="" title="" runat="server">Portfolio</a></li>
    <li> <a href="" title="" runat="server">Contact</a></li>
    </ul>
</div>

我在其中有一些其他代码，比如搜索栏等等，但这基本上是我在点击“博客”时要慢慢卷起来的。任何指导表示赞赏！

Answer 1

简单的方法就是使用jquery，我认为用html和css是不可能的，看看http://api.jquery.com/slideup/

Answer 2

您可以使用jQuery＆＃39; .animate并动画元素的位置来获得此效果。在你的情况下，你可以做这样的事情，使用边距来创建滑动动画。请注意，我在博客链接中添加了一个名为blog的课程。

$('.first .blog').click(function(){
    $('#sidebar').animate({
        "marginTop": "-=500px"       //animate margin to create slide up animation  
    }, 1000);                        //duration of animation, in milliseconds
});

查看此JSFiddle。

Answer 3

你可以这样做。

FIDDLE

HTML：

<div id="sidebar">
    <div id="navigation">
        <div id="logo">
            <img src="https://www.google.com/images/srpr/logo11w.png" width="208" height="80" longdesc="Logos/headerlogo.jpg">
        </div>
        <hr size=1 width=179 align=left style="margin-left:17px; margin-bottom:20px">
        <div class="menu">
            <div class="menu">
                <ul class="first">
                    <li> <a href="#" title="" runat="server">Home</a>
                    </li>
                    <li> <a class="blog" href="#" title="" runat="server">Blog</a>
                    </li>
                    <li> <a href="#" title="" runat="server">Instagram</a>
                    </li>
                    <li> <a href="#" title="" runat="server">About</a>
                    </li>
                    <li> <a href="#" title="" runat="server">Store</a>
                    </li>
                    <li> <a href="#" title="" runat="server">Portfolio</a>
                    </li>
                    <li> <a href="#" title="" runat="server">Contact</a>
                    </li>
                </ul>
            </div>

Javascript：

$(".blog").on("click", function () {
    var slide = $(this).closest(".first");
    $(slide).slideToggle("slow");
});

HTML / CSS如何在单击菜单项时使菜单向上滑动？

标志

3 个答案: