正文
html5手机菜单,手机网页菜单
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
HTML5 移动端上 动态固定菜单栏的问题
!doctype html
html lang="en"
head
meta charset="UTF-8"
meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
meta http-equiv="X-UA-Compatible" content="ie=edge"
titleTEST/title
style
h1{
margin: 0;
}
body{
margin: 0;
height: 100%;
background-color: #f3f3f3;
}
.header {
padding: 15px 0;
background-color: #fff;
border-bottom: 1px solid #ccc;
text-align: center;
width: 100%;
}
.fiexd .header{
position: fixed;
top: 0;
}
.fiexd ul{
margin-top: 84px;
}
/style
/head
body
ul
li
h2列表 1/h2
/li
li
h2列表 2/h2
/li
li
h2列表 3/h2
/li
li
h2列表 4/h2
/li
li
h2列表 5/h2
/li
li
h2列表 6/h2
/li
li
h2列表 7/h2
/li
li
h2列表 8/h2
/li
/ul
div class="header"h1我是一个标题/h1/div
ul
li
h2列表 1/h2
/li
li
h2列表 2/h2
/li
li
h2列表 3/h2
/li
li
h2列表 4/h2
/li
li
h2列表 5/h2
/li
li
h2列表 6/h2
/li
li
h2列表 7/h2
/li
li
h2列表 8/h2
/li
li
h2列表 9/h2
/li
li
h2列表 10/h2
/li
li
h2列表 11/h2
/li
li
h2列表 12/h2
/li
li
h2列表 13/h2
/li
li
h2列表 14/h2
/li
li
h2列表 15/h2
/li
/ul
script
var header = document.getElementsByClassName('header')[0];
var body = document.body;
window.onscroll = function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop);
if(scrollTop 100) {
body.className = 'fiexd';
} else {
body.className = '';
}
}
/script
/body
/html
[img]相关问答
Q1: 怎么制作html5手机页面？
1、打开百度，在百度上搜索：易企秀，然后点击搜索，在搜索的结果中点击进入易企秀的官方网站。
2、进入后，先登录自己的账号，可以直接用QQ微信登录即可，登录后就可以开始制作自己的手机网页微场景了。
3、首先点击【我的场景】接着点击【制作场景】，接着会进入场景模板选择界面，里面有很多免费的模板。
4、可以在模板中心选择一个自己需要的点击，直接套用模板，也可以选择自己创建一个空白页面。
5、进入后就可以根据自己的需要，将模板里面的文字图片和音乐替换成自己需要的即可，如图所示。
6、还可以给自己的手机网页添加背景音乐，动画效果，跳转链接，特效组件等等。
Q2: html5做手机app开发时有没有好的侧滑菜单插件
1.思路：
其时有2个WebView，一个main是用来装主页面，一个menu是用来装菜单（为提高性能，菜单项是采用了预加载方式的，预加载时为了避免和主页面争夺资源，采用延时加载，例如：
//plusReady事件后，自动创建menu窗口；
mui.plusReady(function() {
main = plus.webview.currentWebview();
//setTimeout的目的是等待窗体动画结束后，再执行create webview操作，避免资源竞争，导致窗口动画不流畅；
setTimeout(function () {
//侧滑菜单默认隐藏，这样可以节省内存；
menu = mui.preload({
id: 'offcanvas-drag-right-plus-menu',
url: 'offcanvas-drag-right-plus-menu.html',
styles: {
left: 0,
width: '70%'
}
});
},300);
});
2. 所谓侧滑，就是控制菜单WebView的显示，使用它的left来定位左边位置；
3. 要打开新的webView，要注意webview的show方法使用：
void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );
参数含义：（1）是webview对象 （2）动画效果，从没显示过，一般用"none"，（3）动画过渡时间 （4）当指定Webview窗口显示动画执行完毕时触发回调函数，窗口无动画效果（如"none"动画效果）时也会触发此回调。（5）传递的参数；
4.显示的方法：
（1）按钮点击后，让menu直接show出来，并对main设置样式，比如
menu.show("none",0,function(){
main.setStyle({
left:"70%",
transition:{
duration:150
}
});
});
（2）关闭侧滑菜单，实际就是设置main的样式了，比如：
main.setStyle({
left: '0',
transition: {
duration: 150
}
});
另外注意窗体切换完成后要关掉menu
//等窗体动画结束后，隐藏菜单webview，节省资源；
setTimeout(function() {
menu.hide();
}, 200);
5.被打开的WebView的界面如何控制关闭侧滑菜单：
（1）先要找到主页面，main = plus.webview.currentWebview().opener();
（2）激发主页面的某个事件，例如：mui.fire(main,"menu:swipeleft");
Q3: html5移动端隐藏菜单怎么做
你可以给对应的标签设置display（显示方式）属性为none（不显示），或者也可以使用opacity（透明度）属性value值为0 。 打了这么多字，希望您能够采纳。祝您生活愉快！
Q4: html5 + css3 做的下拉菜单在部分手机浏览器中无法显示，请教高手！
亲，你好，很乐意为你解答问题，目前并不是所有手机浏览器都支持HTML5+CSS3的功能
所以并不是你使用了CSS3的制作方法，所有手机就会识别你的制作方法。
首先你要确认你的网站为了哪一部分的手机用户提供服务，
如果有问题，可以继续追问我。
Q5: html5开发的手机APP怎么做首页的菜单页面切换?
如果不想用传统的页面跳转，可以考虑使用一下前端的MVC框架，比如backbone.js比如Angular.js都可以实现你说的那种，上下不动只有中间的内容在变，其实加载的是不同的模板，然后用路由控制的，整个浏览器始终处在一个界面中，只是在不停的重新渲染内容，页面并没有跳转，这个应该就是你想要的了吧
