来自苹果网站的移动导航菜单

问题描述：

如何从移动设备的新苹果网站构建动画。为了描述效果，基本上用户可以点击左上角的菜单，然后两条平行线将变成一个“x”，它显示先前隐藏的导航，可以向右滑动显示更多内容。 http://www.apple.com/de/ - 在我的镀铬设备工具上查看。来自苹果网站的移动导航菜单

$('.header-top input').on('click', function() { 
 
    if ($(this).val() == '=') { 
 
     $(this).val('x'); 
 
     $('.header-bot').hide(); 
 
    } else { 
 
     $(this).val('='); 
 
     $('.header-bot').show(); 
 
    } 
 
})

body { 
 
    margin:auto; 
 
    background: #f2f2f2; 
 
} 
 
.header { 
 
    position:relative; 
 
    background-color: #fff; 
 
    font-size:2em; 
 
    height: 50px; 
 
} 
 
.header-top { 
 
    height: 50px; 
 
} 
 
.header-top input { 
 
    float:left; 
 
    font-size:inherit; 
 
    padding:0; 
 
    border-style:none; 
 
    background-color:transparent; 
 
    height: 50px; 
 
    outline: none; 
 
    margin-left: 15px; 
 
    cursor: pointer; 
 
} 
 
.header-bot { 
 
    position:absolute; 
 
    white-space:nowrap; 
 
    width:100%; 
 
    overflow:auto; 
 
    height: 50px; 
 
    background-color: #fff; 
 
    border-top: 1px solid #f2f2f2; 
 
} 
 
.header-bot li { 
 
    margin-left:1em; 
 
    float: left; 
 
    text-decoration:none; 
 
    color: #999; 
 
    list-style: none; 
 
    cursor: pointer; 
 
    font-family: sans-serif; 
 
    font-size: 14px; 
 
    line-height: 50px; 
 
} 
 
.header-bot li:hover { 
 
    color: #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="header"> 
 
     <div class="header-top"> 
 
      <input type="button" value="="> 
 
     </div> 
 
     <div class="header-bot"> 
 
      <li>google</li> 
 
      <li>yahoo</li> 
 
      <li>msn</li> 
 
      <li>codingforums</li> 
 
      <li>jsfiddle</li> 
 
      <li>google</li> 
 
      <li>yahoo</li> 
 
      <li>msn</li> 
 
      <li>codingforums</li> 
 
      <li>jsfiddle</li> 
 
      <li>google</li> 
 
      <li>yahoo</li> 
 
      <li>msn</li> 
 
      <li>codingforums</li> 
 
      <li>jsfiddle</li> 
 
     </div> 
 
    </div> 
 
</body>

答

试试这个：demo 这个演示只在Firefox甚至苹果网站的工作无法在Chrome和safari.i测试提供在Firefox这个功能...

$('.header-bot').hide(); \t 
 
$('#gh-svg-icons').on('click', function() { 
 
\t var flag= $(this).attr('aria-expanded'); 
 
\t //alert(flag); 
 
\t if(flag=='true') 
 
\t { 
 
\t \t $(this).addClass('gh-svg-wrapper_click'); 
 
\t \t 
 
\t \t $("#svg_first").attr("class", "gh-svg gh-svg-top"); 
 
\t \t $('#svg_third').attr('class','gh-svg-rect'); 
 
\t \t $("#svg_second").attr("class", "gh-svg gh-svg-bottom"); 
 
\t \t 
 
\t \t 
 
\t \t $(this).attr('aria-expanded','false'); 
 
\t \t 
 
\t \t $('.header-bot').show(); 
 
\t } 
 
\t else 
 
\t { 
 
\t \t $(this).removeClass('gh-svg-wrapper_click'); 
 
\t \t $("#svg_first").attr("class", "gh-svg"); 
 
\t \t $('#svg_third').attr('class','gh-svg-rect gh_svg_rect_top'); 
 
\t \t $("#svg_second").attr("class", "gh-svg"); 
 
\t \t 
 
\t \t $(this).attr('aria-expanded','true'); 
 
\t \t $('.header-bot').hide(); 
 
\t } 
 
    
 
});

.gh-svg { 
 
\t font-size: 18px; 
 
\t left: 0; 
 
\t position: absolute !important; 
 
\t top: 0; 
 
\t -webkit-transform: translateZ(0px) rotate(0deg); 
 
\t -moz-transform: translateZ(0px) rotate(0deg); 
 
\t -o-transform: translateZ(0px) rotate(0deg); 
 
\t -ms-transform: translateZ(0px) rotate(0deg); 
 
\t 
 
\t -webkit-transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0s; 
 
\t -moz-transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0s; 
 
\t -o-transition: transform 0.25s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0s; 
 

 
} 
 
.gh-svg-wrapper { 
 
\t display: block; 
 
\t height: 2.66667em; 
 
\t outline: medium none; 
 
\t position: absolute; 
 
\t -webkit-transform: translateZ(0px) rotate(0deg); 
 
\t -moz-transform: translateZ(0px) rotate(0deg); 
 
\t -o-transform: translateZ(0px) rotate(0deg); 
 
\t -ms-transform: translateZ(0px) rotate(0deg); \t 
 
\t 
 
\t -webkit-transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0s; 
 
\t -moz-transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0s; 
 
\t -o-transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0s; 
 

 
\t width: 2.66667em; 
 
} 
 
button { 
 
\t background-color: transparent; 
 
\t border: 0 none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
.gh-svg-wrapper_click { 
 
\t -webkit-transform: translateZ(0px) rotate(90deg); 
 
\t -moz-transform: translateZ(0px) rotate(90deg); 
 
\t -o-transform: translateZ(0px) rotate(90deg); 
 
\t -ms-transform: translateZ(0px) rotate(90deg); 
 

 
\t -webkit-transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0s; 
 
\t -moz-transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0s; 
 
\t -o-transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0s; 
 
\t transition: transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0s; 
 

 
} 
 
.gh-svg-rect-top, .gh-svg-rect-bottom { 
 
\t -webkit-transform: translate3d(0px, 0px, 0px); 
 
\t -moz-transform: translate3d(0px, 0px, 0px); 
 
\t -o-transform: translate3d(0px, 0px, 0px); 
 
\t -ms-transform: translate3d(0px, 0px, 0px); 
 
\t 
 

 
} 
 
.gh_svg_rect_top { 
 
\t -webkit-transform: translate3d(0px, -8px, 0px); 
 
\t -moz-transform: translate3d(0px, -8px, 0px); 
 
\t -o-transform: translate3d(0px, -8px, 0px); 
 
\t -ms-transform: translate3d(0px, -8px, 0px); 
 
\t 
 

 
} 
 

 
.gh-svg-top { 
 
\t -webkit-transform: translateZ(0px) rotate(45deg); 
 
\t -moz-transform: translateZ(0px) rotate(45deg); 
 
\t -o-transform: translateZ(0px) rotate(45deg); 
 
\t -ms-transform: translateZ(0px) rotate(45deg); 
 
\t 
 
\t 
 
} 
 
.gh-svg-bottom { 
 
\t -webkit-transform: translateZ(0px) rotate(-45deg); 
 
\t -moz-transform: translateZ(0px) rotate(-45deg); 
 
\t -o-transform: translateZ(0px) rotate(-45deg); 
 
\t -ms-transform: translateZ(0px) rotate(-45deg); 
 

 
} 
 
.header-top input { 
 
    float:left; 
 
    font-size:inherit; 
 
    padding:0; 
 
    border-style:none; 
 
    background-color:transparent; 
 
    height: 50px; 
 
    outline: none; 
 
    margin-left: 15px; 
 
    cursor: pointer; 
 
} 
 
.header-bot { 
 
    position:absolute; 
 
    white-space:nowrap; 
 
    width:100%; 
 
    overflow:auto; 
 
    height: 50px; 
 
    background-color: #fff; 
 
    border-top: 1px solid #f2f2f2; 
 
} 
 
.header-bot li { 
 
    margin-left:1em; 
 
    float: left; 
 
    text-decoration:none; 
 
    color: #999; 
 
    list-style: none; 
 
    cursor: pointer; 
 
    font-family: sans-serif; 
 
    font-size: 14px; 
 
    line-height: 50px; 
 
} 
 
.header-bot li:hover { 
 
    color: #000; 
 
} 
 
.header-top { 
 
    height: 37px; 
 
} 
 
.header-top input { 
 
    float:left; 
 
    font-size:inherit; 
 
    padding:0; 
 
    border-style:none; 
 
    background-color:transparent; 
 
    height: 50px; 
 
    outline: none; 
 
    margin-left: 15px; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="header-top"> 
 
<button class="gh-svg-wrapper " id="gh-svg-icons" aria-expanded="true"> 
 
\t <svg id="svg_first" x="0px" y="0px" width="100%" viewBox="0 0 96 96" class="gh-svg " enable-background="new 0 0 96 96"> 
 
<rect id="svg_third" width="32" height="4" x="32" y="46" class="gh_svg_rect_top gh-svg-rect "/> 
 
</svg> <svg id="svg_second" x="0px" y="0px" width="100%" viewBox="0 0 96 96" class="gh-svg " enable-background="new 0 0 96 96"> 
 
<rect width="32" height="4" x="32" y="46" class="gh-svg-rect "/> 
 
</svg> </button> 
 
     </div> 
 

 
<div class="header-bot"> 
 
      <li>google</li> 
 
      <li>yahoo</li> 
 
      <li>msn</li> 
 
      <li>codingforums</li> 
 
      <li>jsfiddle</li> 
 
      <li>google</li> 
 
      <li>yahoo</li> 
 
      <li>msn</li> 
 
      <li>codingforums</li> 
 
      <li>jsfiddle</li> 
 
      <li>google</li> 
 
      <li>yahoo</li> 
 
      <li>msn</li> 
 
      <li>codingforums</li> 
 
      <li>jsfiddle</li> 
 
     </div>

我想用我的w ebsite。我检查了它在苹果上的工作原理，但我真的不明白这一点。这在firefox上效果很好，但不适用于safari，而苹果版本则适用于我使用的safari。任何更新的版本？会很有帮助。谢谢 – 2014-11-28 08:33:20

请检查http://sarasoueidan.com/blog/navicon-transformicons/ – vrajesh 2014-11-30 10:28:32

好图标。我想我会用那些。谢谢。 – 2014-11-30 10:36:17

来自苹果网站的移动导航菜单

相关推荐