日期:2013-8-27 来源:GBin1.com
经过长时间研究移动响应布局,我花了很大功夫研究不同的UI设计。在页面上的主要亮点往往是网站主导航。用户需要快速访问到内容页面,而且这一点是最基本的,无论是在完整的显示器或较小的移动响应屏幕。
在本教程中,我要演示如何结合CSS3 media queries和jQuery管理滑动导航菜单。链接出现在前端,但下降为一个隐藏的菜单,调整后的大小低于600px。同时将出现一个小的下拉菜单,图标会切换打开和关闭命令。
设定文件
顶部区域包含文件的一小部分,我们用来创建效果。我从由谷歌托管的最新jQuery库中复制了常规样式表,所有自定义JS函数被存储在外部文件命名为menu.js。
<!doctype html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Responsive Sliding Navigation Demo</title> <meta name="author" content="Jake Rocheleau"> <link rel="shortcut icon" href="http://designshack.net/favicon.ico"> <link rel="icon" href="http://designshack.net/favicon.ico"> <link rel="stylesheet" type="text/css" media="all" href="styles.css"> <link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Boogaloo"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" language="javascript" charset="utf-8" src="menu.js"></script> </head>
大部分页面标记不是很重要,除了标题区域。我试图把一切都设定为固定的高度,但header不能用固定CSS属性,否则控制打开和关闭时页面将不会扩展滑动菜单。所以标题和导航链接在CSS中用line-height设置。
<header id="topnav"> <nav> <ul> <li><a href="#" class="sel">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Get in Touch</a></li> </ul> </nav> <a href="#" id="navbtn">Nav Menu</a> <h1><a href="#">Designee</a></h1> </header><!-- @end #topnav -->
页h1标题最适合最后一个元素,所以header将始终保持恒定高度。标题旁边有一个锚链接 ID #navbtn,包含了滑动菜单链接图标。当宽度低于一定阈值,这个CSS链接才会显示。
在CSS标记位置
通常情况下我不会用到jQuery。切换菜单的唯一问题是,我们无法在CSS中达到效果。jQuery的方法将适用于内联CSS样式,并覆盖默认样式。所以解决方案是使用CSS定位元素,并恰当使用JavaScript完成动画效果。
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { height: 101%; }.....
via 极客标签
相关推荐
本话题聚焦于一个具体的网页元素——“蓝色下拉滑动二级导航菜单”,这是一个纯CSS3实现的功能,无需依赖JavaScript,这对于优化网页性能和移动端适应性具有积极意义。 1. CSS3简介: CSS3是层叠样式表的最新版本...
在实际项目中,滑动导航栏可能还包括下拉菜单、响应式设计等复杂功能。例如,可以通过jQuery添加点击事件来显示和隐藏下拉菜单,同时确保在移动设备上导航栏能适应屏幕大小。 6. **测试与调试** 完成代码后,务必...
modernizr html5响应式网站滑动下拉导航菜单自适应屏幕 modernizr html5响应式网站滑动下拉导航菜单自适应屏幕 modernizr html5响应式网站滑动下拉导航菜单自适应屏幕
《jQuery响应式下拉导航菜单项》是一款专为现代网页设计打造的JavaScript特效,尤其适合应用于企业网站或商城网站的导航栏。此解决方案利用jQuery库的高效性能和灵活性,为用户提供了一个直观且易于操作的交互体验。...
总的来说,"jQuery响应式导航菜单"是一个实用的工具,它结合了jQuery的易用性和pgwmenu.min.js的专业性,提供了一种高效构建响应式导航菜单的方法。对于前端开发者来说,理解和掌握这种技术不仅能提升项目质量,还能...
总的来说,这个项目提供了一套完整的解决方案,帮助开发者在移动和桌面应用中构建响应式的、具有滑动效果的导航菜单。通过学习和使用这个示例,开发者可以提升自己的前端技能,特别是在响应式设计和移动优先的策略...
"jQuery下拉滑动切换导航条"是一个利用jQuery库实现的交互式导航菜单,适用于提升网站用户体验,使得用户在浏览网站时更加方便快捷。这个项目基于jQuery 1.8.3版本,一个广泛使用的JavaScript库,它简化了DOM操作、...
【jQuery Bootstrap侧边隐藏响应式下拉导航菜单栏】是一种常见的网页设计技术,它结合了jQuery和Bootstrap框架的优势,为网站提供了一种高效、灵活且适应不同设备屏幕大小的导航结构。Bootstrap是Twitter开发的一个...
JQuery,一个流行的JavaScript库,提供了丰富的功能来创建动态、交互式的网页元素,其中包括滑动下拉导航菜单。本篇文章将深入探讨如何利用jQuery实现这种功能。 一、jQuery基础 1. jQuery是什么:jQuery是一个轻...
"CSS页面滚动固定下拉导航菜单特效"是一种常见的交互设计技术,它增强了用户体验,特别是对于内容丰富的网站。这种特效使得用户在页面滚动时,导航菜单仍然可见,从而方便用户随时访问各个页面链接。 首先,我们来...
本项目“jQuery二级下拉滑动导航菜单”利用JavaScript库jQuery的高效特性和简洁API,创建了一个动态的、响应式的二级下拉菜单。这个菜单在鼠标经过一级菜单时会以滑动和渐隐的效果展示二级菜单,提高了用户体验和...
在本项目中,“jQuery阿里巴巴顶部导航栏下拉菜单.zip”是一个包含实现阿里巴巴风格的顶部导航栏及下拉菜单功能的代码资源。这个压缩包主要针对前端网页开发,特别是那些希望在自己的网站上创建类似阿里巴巴首页的...
6. **响应式设计**:为了确保在不同设备和屏幕尺寸上的兼容性,滑动导航菜单应具备响应式设计。这可能涉及到媒体查询(`media queries`),根据屏幕宽度调整菜单布局和样式。 7. **性能优化**:考虑到用户体验,...
本教程将深入探讨如何利用jQuery实现下拉滑动切换的导航条,提升用户体验。 1. **jQuery基础** 在了解下拉滑动切换导航条之前,首先需要掌握jQuery的基本概念和用法。jQuery通过简洁的API简化了JavaScript的使用,...
《jQuery红色下拉滑动导航菜单详解》 在网页设计中,导航菜单是不可或缺的元素,它引导用户轻松浏览网站的各个部分。本篇将详细解析"jQuery红色下拉滑动导航菜单"这一主题,帮助开发者更好地理解和实现这种常见的...
总的来说,"jQuery黄色下拉滑动导航菜单代码"是一个实用的网页设计工具,它展示了如何利用jQuery创建交互式的导航菜单。无论是初学者还是经验丰富的开发者,都可以从中学习到如何用JavaScript和jQuery提升网页的用户...
在本文中,我们将深入探讨“CSS3宽屏滑动下拉菜单导航特效”这一主题,这是一种利用现代CSS3特性实现的交互式菜单设计。 首先,CSS3(层叠样式表第三版)引入了许多新特性,极大地增强了网页的视觉表现力和动态效果...
"jQuery缓慢滑动Tab下拉导航"是一种交互式设计,它提供了高效的用户体验,特别是在有多个层级的菜单结构时。这个设计实现了当鼠标悬停在导航条上时,下拉菜单会缓缓展开,二级导航还能自动调整高度,以适应不同的...