.click 菜单图标滑入菜单

Posted 2023-05-08

【中文标题】.click 菜单图标滑入菜单

【英文标题】：.click menu icon to slide in menu

【发布时间】：2013-06-04 18:34:19

【问题描述】：

我正在尝试实现类似的菜单效果，如 etchapps website.

这是尽可能接近的：jsFiddle

$("#openMenu").click(function() 
    var menu = $("#menu");
    if ($(menu).is(":visible")) 
        $(menu).animate(
            width: 0
        , 1000, function() 
            $(menu).hide();
        );
   else 
     $(menu).show().animate(
       width: 200
      , 1000); 
   
);

请帮我把这些物品组合起来达到我想要的效果，谢谢！

【问题讨论】：

你的要求是什么

检查这个小提琴jsfiddle.net/Sa6av/12

【参考方案1】：

示例站点使用 CSS transitions 代替 javascript 来获得所需的效果。看看this jsFiddle。它应该指向正确的方向。

html：

<div id="menu">
  <img src="http://m.liveperson.com/themes/images/menu-icon-hd-36-off.png" />
  <nav>
    <a href="home.html">Home</a>
    <a href="work.html">Work</a>
    <a href="contact.html">Contact</a>
    <a href="about.html">About</a>
  </nav>
</div>

CSS：

#menu img 
  cursor: pointer; 
  display: block;
  float: left;
  z-index: 2;
  transition: transform .25s linear;
  -moz-transition: -moz-transform .25s linear;
  -webkit-transition: -webkit-transform .25s linear;
  -o-transition: -o-transform .25s linear;

#menu nav 
  display: inline-block;
  position: relative;
  height: 36px;
  z-index: 1;
  transition: all .25s linear;
  -moz-transition: all .25s linear;
  -webkit-transition: all .25s linear;
  -o-transition: all .25s linear;

#menu.active nav 
  left: -20em;
  opacity: 0;

#menu.active img 
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);

JavaScript：

$("#menu img").click(function() 
    $("#menu").toggleClass("active");
);

【讨论】：

菜单是否可以不显示在方形图标后面？谢谢！

【参考方案2】：

我知道你的问题提到了 jQuery，但是当我们处理事物的显示方式时，最好尽可能使用 CSS。

这是一个工作版本的演示，您需要在 IE 中检查它，但我很确定它会没事的。在 IE8 中，它会切换菜单而不是滑入（搜索“优雅降级”以找出原因）

HTML

我整理了您的 html 以使其遵循更多最佳实践。

CSS

我让它使用在移动设备上具有硬件支持的过渡（更流畅的动画）

JS

简化为仅切换一个类，另请参见 CSS :target 选择器。

$(".navbar button").click(function() 
    var menu = $("ul").toggleClass('active');
);

http://jsfiddle.net/ymsHb/1/

希望有帮助！

【讨论】：

由于某种原因它适用于 jsFiddle 但不适用于我的实际页面，我的代码是（我是网页设计的新手！）：

由于某种原因它适用于 jsFiddle 但不适用于我的实际页面，我的代码是（我是网页设计的新手！）：jsfiddle.net/ymsHb/12

@user2406220 给你 :) 我只是让 CSS 和 javascript 选择器更具体一点jsfiddle.net/ymsHb/13

我正在使用 chrome，它仍然只是显示菜单图标，没有做任何事情，但它可以在 jsFiddle 中使用。我有点迷茫

检查 CSS 和 JS 是否不会干扰您网站的其他部分，您需要查看一下有什么冲突的地方。尝试暂时从您的网站中删除内容，直到它起作用:)

【参考方案3】：

使用这个 jQuery 插件：http://code.google.com/p/jqueryrotate/wiki/Documentation，我修改了你的小提琴。在这个修改过的小提琴中，我添加了一个外部 js 文件 http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js

要使用这个插件，只需在脚本标签中添加所需的js。