仿Google Nexus 7网站左侧滑出导航菜单

仿Google Nexus 7网站左侧滑出导航菜单
 点击预览  点击下载

Today I want to show you how to reconstruct the sidebar menu of the Google Nexus 7 page. It slides out with a really nice effect where some subitems get expanded as well. When hovering over a special menu icon, the sidebar icons will be revealed. When clicking on the icon, the whole sidebar menu will be shown. The first sidebar menu item is a search input which is styled the same way like the other menu items.

今天我想向你展示如何重建的谷歌Nexus 7工具条菜单。它滑出一个非常好的效果,得到了一些子项目以及。当鼠标悬停在一个特殊的菜单栏图标,图标将显示。当点击图标,整个工具条菜单将显示。第一栏的菜单项是一个搜索的输入,风格同样像其他菜单项。

We will reconstruct this menu using unordered, nested lists and some CSS transitions. We’ll use JavaScript to apply classes for the opening effects and handling the hover and click events. With the help of a media query, we’ll adjust the size to make sense for smaller devices.

我们将利用无序重建这个菜单,嵌套的列表和一些CSS过渡。我们将使用JavaScript应用类和处理悬停和点击活动开放的影响。随着媒体查询的帮助下,我们将调整大小以更小的设备有意义。

转载请注明:代码家园 » 仿Google Nexus 7网站左侧滑出导航菜单

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)