html左侧隐藏菜单栏,如何制作一个炫酷的隐藏侧边栏菜单

在网上经常可以看到一些效果非常酷的隐藏侧边栏菜单效果。隐藏侧边栏作为一种新的菜单布局方式已经被越来越多的人所接受,它给用户一种全新的体验。特别是在移动手机等小屏幕设备上,隐藏侧边栏就显得特别有用。它不会占用多余的空间,只有在需要的时候才显示出来。

隐藏侧边栏菜单经常被使用在移动手机和一些触摸屏设备上。隐藏侧边栏最大的好处是不占用空间,并且只使用少量的javascript和CSS就可以制作出一个隐藏侧边栏效果。

隐藏侧边栏菜单经常是以一个jQuery插件的形式出现,在这篇文章中,我们将使用CSS3 transition 和 animation以及少量的jQuery代码来制作一个效果非常酷的隐藏侧边栏特效。

html左侧隐藏菜单栏,如何制作一个炫酷的隐藏侧边栏菜单_第1张图片

HTML结构

隐藏侧边栏菜单的HTML结构和普通的菜单的HTML结构稍微有一点不同。我们要关注下面的是三元素:

Container:这是整个页面的包裹容器,它会将隐藏侧边栏菜单和其它页面元素全部包裹起来。

Canvas:这个div是包裹隐藏侧边栏和其它元素的二级容器。

Navigation:这个div是隐藏侧边栏的包裹容器。

基本的HTML结构如下:

下面是添加了菜单项和页面其它元素的代码:

MENU

  • HOME

  • ABOUT US

    • OUR TEAM

    • OUR SERVICES

  • PORTFOLIO

    • WEB DESIGN

    • GRAPHIC DESIGN

  • CONTACT

Off Canvas Sliding Navigation

Transition effect for off-canvas views with s

你可能感兴趣的:(html左侧隐藏菜单栏)