DY点线面

  • 首页
  • blog
  • 设计导航
  • 下载
  • 吾爱淘
  • 关于
致力于设计干货分享
  1. 首页
  2. 代码
  3. 正文

21个网页汉堡包菜单动画灵感

2015年7月28日 1363点热度 0人点赞 0条评论

随着移动平台浏览量的增长越来越多,网站为了适应移动平台的浏览体验,大部分响应式网页都喜欢采用汉堡包菜单这种形式来展示网站的导航,然而如果都是一种汉堡包菜单风格,那实在太没新意了,今天设计达人网小编为大家整理21个汉堡包导航案例,或许会给你带来些设计灵感哦!

下面来自小编亲自录制的GIF,实际效果请点击“查看演示”链接,案例中,还有菜单的实现代码,前端开发工程师可以去学习他们实现方式,Enjoy!

 

Hamburger Menu (with cheese)

hamburger-menu-01

查看演示

The ultimate hamburger menu

hamburger-menu-02

查看演示

Atomic Hamburger Menu CSS

hamburger-menu-03

查看演示

Menu toggle svg animation

hamburger-menu-06

查看演示

Star Wars Toggle Icon Animation

hamburger-menu-05

查看演示

Animated Burger/Menu Icon

hamburger-menu-04

查看演示

Material Design Menu

录制时帧数少了,请点击链接看实际DEMO演示效果。

hamburger-menu-07

查看演示

Drawn Hamburger Transition

hamburger-menu-08

查看演示

Animating CSS-Only Hamburger Menu Icons

hamburger-menu-09

查看演示

The minimal hamburger menu with fullscreen navigation

hamburger-menu-10

查看演示

Frosty Nav Toggle Effect

点击展示菜单后,背景会变模糊,特效不错

hamburger-menu-11

查看演示

Hamburger icon with Morphing Menu

hamburger-menu-12

查看演示

Hamburger Menu to Book Menu

hamburger-menu-15

查看演示

Gooey Menu

hamburger-menu-14

查看演示

The Hamburger Menu

hamburger-menu-13

查看演示

Pure CSS Fullscreen Navigation Menu

hamburger-menu-16查看演示

Pure CSS off-canvas menu with flexbox

hamburger-menu-17

查看演示

Jumping Hamburger Menu Icon

hamburger-menu-18

查看演示

Open Close

hamburger-menu-19

查看演示

Hamburger Icon CSS3 ONLY Animation

hamburger-menu-20

查看演示

Menu Toggle button with flat menu

hamburger-menu-21

查看演示

 

来自:设计达人

标签: 汉堡菜单
最后更新:2015年7月28日

D. Young

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

您需要 登录 之后才可以评论

D. Young

这个人很懒,什么都没留下

文章目录
  • Hamburger Menu (with cheese)
  • The ultimate hamburger menu
  • Atomic Hamburger Menu CSS
  • Menu toggle svg animation
  • Star Wars Toggle Icon Animation
  • Animated Burger/Menu Icon
  • Material Design Menu
  • Drawn Hamburger Transition
  • Animating CSS-Only Hamburger Menu Icons
  • The minimal hamburger menu with fullscreen navigation
  • Frosty Nav Toggle Effect
  • Hamburger icon with Morphing Menu
  • Hamburger Menu to Book Menu
  • Gooey Menu
  • The Hamburger Menu
  • Pure CSS Fullscreen Navigation Menu
  • Pure CSS off-canvas menu with flexbox
  • Jumping Hamburger Menu Icon
  • Open Close
  • Hamburger Icon CSS3 ONLY Animation
  • Menu Toggle button with flat menu

COPYRIGHT © 2022 dyartstyle.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

鲁ICP备15008799号-1