移动web顶部导航栏的制作小心得

最新推荐文章于 2024-07-30 13:02:28 发布
最新推荐文章于 2024-07-30 13:02:28 发布
阅读量8.6k 收藏 7
点赞数 1
分类专栏： 移动web 文章标签： 顶部导航栏 scroll插件 固定顶部
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_29673403/article/details/53195760
版权
本文探讨了移动Web中顶部导航栏点击穿透现象的产生原因，并提出三种解决方案：1) 使用动画效果避免点击目标消失；2) 利用pointer-events CSS属性阻止穿透；3) 引入fastclick库消除300ms延迟和点击穿透。通过这些方法，可以优化用户在移动设备上的交互体验。
摘要由CSDN通过智能技术生成
之前一直涉及到的都是PC端的Web，现在要做微信公众号的时候，发现很多PC端的效果在手机上做起来是有一定的差别，要做很多兼容和调整的东西。现在来谈一谈这些天做顶部固定导航栏的小心得。
因为博客貌似会解析文本中写的html代码，影响代码展示效果，所以为了方便，很多时候代码可能使用的是截图，给大家造成不便，聊表歉意。
1.关于顶部固定导航栏
效果图如下：

实现代码如下：






整体框架图如下图所示：

现在让我们来看看css是怎么写的吧：
最低0.47元/天 解锁文章
浅曦忆
关注
专栏目录
Web-拾贝
oscar999的专栏
03-10 1万+
JavaScript MVC框架PK：Angular、Backbone、CanJS与Emberhttp://www.csdn.net/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember一个好的js method 方法查询的网站， 有browser兼容的介绍http://help.dottoro.co...
ps学习笔记
qq_46328481的博客
02-24 432
Adobe Photoshop是Adobe Systems开发和发行的图像处理软件，主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。PS有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。支持的系统有Windows、安卓与Mac OS， Linux操作系统用户可以通过使用Wine来运行Adobe Photoshop。 功能介绍 Photoshop的专...
CSS导航条制作心得
xiaoyuaixiaomao的博客
11-18 1610
今天学习了导航条的制作，感觉收获很大！学习了一段时间的css和html。之前都是在慕课网上面看视频学习的，感觉收获不是特别大，有一点慢，效率不高。学东西还是得边做边学变想，学习编程最好能够不断地实践，毕竟实践出真知。学习了这个作者的文章http://www.missyuan.com/thread-438839-1-1.html        1.导航条放于div容器中-------ui和li来写
关于使用bootstrap创建导航栏的一些学习心得（dropdown二级菜单）
layuecr的博客
08-27 3996
我在学习《Build a Personal Portfolio Webpage》这个的项目时，在做导航栏的时候卡了有一两天，问题出在我想我的适应于(max-width：768px)的导航栏出现二级菜单。下面的图片是我想达到的效果。         但是在做的时候却出现了问题，bootstrap自带的就是如第一张图的效果，我仿照freeCodeCamp给的例子，想做成这
微信小程序 - 自定义头部导航栏开发
最新发布
觉醒法师的专栏
07-30 3327
默认情况下，‌小程序的顶部导航栏由系统自动生成，‌允许修改一些基本样式如背景色、‌文字颜色等。‌然而，‌如果需要实现更复杂的样式，‌如自定义图标、‌背景等，‌或者需要适配不同手机屏幕的高度和样式，‌就需要自定义顶部导航栏。‌ 小程序自定义头部导航栏的开发主要涉及系统顶部状态栏和导航栏标题区域，‌自定义顶部导航栏的好处包括提高用户体验、‌增加页面交互性等。‌创建一个自定义导航栏组件，‌包含导航栏的样式和交互逻辑，‌并在需要使用导航栏的页面中引入自定义导航栏组件。‌
【AmazeUI】手机版页面的顶部导航条Header与侧边导航栏offCanvas
编程记录，亲测有效
05-08 5996
顶部导航条如果你细心留意下现在的页面，实在是太常见了。这个组件在手机端的页面中，同样可以借助AmazeUI这个前端框架实现。与此同时，可以在导航栏的最右方加一个触发侧边导航栏offCanvas。不要再使用BootStrap那种，一旦点击就大幅度下拉的导航了，反正我个人觉得很蛋疼的。一个导航活活地占据了页面大量位置。这个侧边导航栏offCanvas曾经是php方面的WorkPress的优秀设计来的。
移动端图形化报表界面设计_移动端几种常见的界面设计布局
weixin_39927144的博客
12-20 1058
在日常产品交互设计中，有时候总会对界面的排版和布局的选择上很纠结，界面的排版布局直接影响了用户体验，选择一个合适的排版是值得持续打磨的事情。这里我画了几种移动端常见的页面布局和他们的各自特点：1，列表式布局2，陈列式布局3，九宫格式布局4，选项卡式布局5，轮播图式布局6，伸展式布局7，抽屉式布局8，弹出框式布局9，横向拓展式布局10、多面板式布局1，列表式布局70172CBC-B2FA-4920-...
自己实现web响应式导航菜单效果（兼容PC移动端）
CodingNoob
10-17 2607
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>响应式菜单切换效果</title> <link rel="stylesheet" href="./css/menu.css" /> </head> &...
Bootstrap（基础）
lixiaohong2012的博客
06-30 2278
bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码：<script src="https://oss.maxcdn
非常漂亮实用的系统左侧导航菜单
11-09
非常漂亮实用的系统左侧导航菜单
非常漂亮的导航菜单(html)
07-03
非常漂亮的导航菜单(html)，鼠标放上去又滑动效果
web html做菜单,Web元素设计之导航菜单
weixin_28691441的博客
06-16 2292
1. 横向导航菜单导航菜单实际上相当于一个列表，自然地，我们可以选择HTML中的列表元素ul来进行实现：HTML ↓：首页探索观察解密关于ul本身是一个块级元素，其中包含的列表项li同样也是块级元素。所以要实现横向菜单，我们需要使用到浮动，使得列表项li在同一行依次排列。此外，无序列表ul默认会在每个列表项前带一个小圆点，我们需要通过list-style将其取消掉。还有关键的一点就是，我们通过超链...
25个Web开发中的移动端响应式菜单练习案例
web前端开发
10-17 804
英文 | https://javascript.plainenglish.io/25-mobile-responsive-menus-in-web-development-7debe153...
Web前端从入门到放弃（ 固定顶部菜单）
Du_Ke_Can的博客
10-10 2503
固定顶部菜单 当鼠标滚动到200px时，出现固定在顶部的菜单 *{ margin: 0; padding: 0; border: none; } #box{ width: 950px; height: 4135px; background: #9BD7F8; margin: 0 auto;
DAY004-CSS基础
qq_45579661的博客
08-03 381
1.思维导图 2.作业+练习 可参考 a.导航栏+hover b.侧边栏+hover 例： <!DOCTYPEhtml> <htmllang="zh-CN"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"conten...
html网页中吸顶栏效果,HTML+CSS入门 HTML吸顶效果详解
weixin_29898529的博客
06-03 726
本篇教程介绍了HTML+CSS入门 HTML吸顶效果详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<一、HTMLHTML中需要给div一个idhtml>二、CSS#head{background-color:#989898;width:100%;height:100px;margin-top:100px;}#head[data-fixed="fixed...
H5+状态栏透明(沉浸式)/全屏/设置颜色 整理
weixin_34248487的博客
08-24 6074
H5+对web APP状态栏设置整理： 开发工具：HBuilder 直接新建移动APP项目测试方法为HBuilder的ios真机测试 1、沉浸式状态栏 如果页面顶部是图片，一般会把状态栏变成透明。 首先可以检测下当前环境是否支持沉浸式状态栏，检测语句： //是否支持沉浸式状态栏 alert(plus.navigator.isImmerse...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值