首页

关于

如何构建下拉滑动式响应导航菜单

如何构建下拉滑动式响应导航菜单

在线演示 在线下载

经过长时间研究移动响应布局,我花了很大功夫研究不同的UI设计。在页面上的主要亮点往往是网站主导航。用户需要快速访问到内容页面,而且这一点是最基本的,无论是在完整的显示器或较小的移动响应屏幕。

在本教程中,我要演示如何结合CSS3 media queries和jQuery管理滑动导航菜单。链接出现在前端,但下降为一个隐藏的菜单,调整后的大小低于600px。同时将出现一个小的下拉菜单,图标会切换打开和关闭命令。

演示及下载源代码

设定文件

顶部区域包含文件的一小部分,我们用来创建效果。我从由谷歌托管的最新 jQuery库中复制了常规样式表,所有自定义JS函数被存储在外部文件命名为menu.js。

<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type"…

标签: 导航菜单, css3, javascript, 响应式菜单, html, css

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.