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

就像标题所说的，我有一个侧边栏菜单，当其中一个菜单项blog被点击时，我试图让它完全向上滑动并消失在视线之外。类似于我发现的这个JSFIDLE（更喜欢没有js的简单bc，我几乎不知道它，但如果这是唯一没有大的方法的话）：；除了“我的菜单”已打开，您将单击菜单中的某个项目将其向上滑动。我正试着让菜单慢慢往上滑。 菜单如下所示：

标志

• 家
• 博客
• 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>

---

我还有一些其他的代码在里面，比如搜索栏等等。但这基本上就是我试图在点击“博客”时慢慢积累起来的东西。感谢您的指导

简单的方法是使用jquery，我认为仅仅使用html和css是不可能的，看看你可以通过使用jquery的

.animate

和动画元素的位置来获得这种效果。在您的例子中，可以执行类似的操作，使用边距创建向上滑动动画。请注意，我在博客链接中添加了一个名为

blog

的类

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

---

看看这个。

你可以这样做

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>

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

---

我喜欢这个选项，但由于某些原因，当我添加它时，没有子菜单项出现。

项没有出现？没有出现，但我在它们之间有额外的ul类项目（例如公文包的子菜单），但我没有发布该部分，因为我想保持它的简短。你是说当你单击博客时它们消失了？如果是这样，那是因为您的其他菜单也使用“first”类，您可以稍微更改它。更好的方法是，将其用于顶部菜单class=“first close”，然后将jquery中的选择器更改为close而不是first。不，如果添加了javascript，当我单击子菜单时，它们不会出现。我无法在Dreamweaver或浏览器中实现这一点。它在JSFIDLE中运行良好，我这样调用它：$（'.first.blog'）。单击（函数（）{$（'#边栏'）。动画（{“marginTop”：“-=500px”//animate margin to create slide up animation}，1000）；//动画持续时间，以毫秒为单位）；没有关系！我想出来了。正确的格式应为/**相同的代码**/。没有src=ajax.googleapis。。。