index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
</head>
<body>
<link href="style/basic.css" type="text/css" rel="stylesheet"/>
<link href="style/menu.css" type="text/css" rel="stylesheet"/>
<div id="header" class="header relative">
<div class="showMenu absolute"><a href="javascript:void(0)"></a></div>
<div class="logo absolute"></div>
<a href="/" target="_blank" class="topTell absolute goHome"></a>
<div id="popMenu" class="popMenu">
<div class="menulists">
<div class="menulist">
<h3>标题</h3>
<ul class="menuItems clearfix">
<li> <a href="###">列表分类</a> <a href="###">列表分类</a> <a href="###">列表分类</a> <a href="###">列表分类</a></li>
<li> <a href="###">列表分类</a> <a href="###">列表分类</a> <a href="###">列表分类</a> <a href="###">列表分类</a></li>
<li> <a href="###">列表分类</a> <a href="###">列表分类</a> <a href="###">列表分类</a> <a href="###">列表分类</a></li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</body>
</html>
basic.css
/* CSS Document */
html{ -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
body,ul,p,h1,h2,h3,h4,h5,h6,dl,dt,dd{margin:0;padding:0;}
em{ font-style:normal}
ul{ list-style:none;}
img{ max-width:100%; max-height:100%; vertical-align: middle;}
i{ font-style:normal;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
.wrapper{margin:0 auto;background-color:#F8F8F8;padding:1px 0;}
.wrapper_bgW{margin:0 auto;background-color:#fff;padding:1px 0; font-family:"微软雅黑";}
.wrapper_bgG{margin:0 auto;background-color:#cdf0e5;padding:1px 0;}
.wrapper_bgB{margin:0 auto;background-color:#20a6d9;padding:0; border:solid #fff; border-width:1px 0;}
.no-bd{border:none;}
.PupNav_wrap{ height:100%; width:100%; z-index:7000;position:fixed; right:-100%; top:3.15em;transition:all 0.5s ease-out 0s; }
.Pchome_PupNav{width:80%; background:#F8F8F8; float:right;box-shadow:0 0 2em gray;}
.PupNav_wrapTo{ right:0;}
.downNav{ z-index:5000;}
body{ text-align:left; font-family:"Helvetica"; color:#838383; min-width:320px; background-color:#f6f6f6; background-repeat:repeat; background-position:50% 0;}
li{list-style:none;}
a{ color:#838383; text-decoration:none; }
a:visited{ text-decoration:none; }
a:hover{ color:#ba2636; text-decoration:none; }
a:active{ color:#ba2636; }
p{ color:#838383; font-size:1em; line-height:1.5em;}
.bd{border:#E7E7E7 solid 1px;}
.clearfix:after{clear:both;height:0;overflow:hidden;display:block;visibility:hidden;content:".";}
.center{ text-align:center;}
.left{ float:left;}
.right{ float:right;}
.relative{position:relative;}
.absolute{position:absolute;}
.disNone{display:none;}
menu.css
/* CSS Document */
#header{width: 100%; min-width: 320px; height: 90px; background-color: #008883; position: relative;}
.showMenu{right: 3%; top: 50%; display: block; width: 48px; height: 28px; margin-top: -14px; z-index: 1001; font:1em/1.5em "Microsoft YaHei"; color:#fff;}
.showMenu a{display: block; width: 48px; height: 28px; position: relative; outline: none;}
.showMenu a:before, .showMenu a:after{content: ''; position: absolute; left: 0; top: 50%; height: 8px; width: 100%; z-index: -1; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; background-color: #fff; margin-top: -4px;}
.showMenu a:before{-moz-transform: translateY(-10px); -o-transform: translateY(-10px); -ms-transform: translateY(-10px); -webkit-transform: translateY(-10px); transform: translateY(-10px);}
.showMenu a:after{-moz-transform: translateY(10px); -o-transform: translateY(10px); -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px);}
.hideMenu a:before{-moz-transform: rotate(90deg) rotate(45deg); -o-transform: rotate(90deg) rotate(45deg); -ms-transform: rotate(90deg) rotate(45deg); -webkit-transform: rotate(90deg) rotate(45deg); transform: rotate(90deg) rotate(45deg);}
.hideMenu a:after{-moz-transform: rotate(90deg) rotate(-45deg); -o-transform: rotate(90deg) rotate(-45deg); -ms-transform: rotate(90deg) rotate(-45deg); -webkit-transform: rotate(90deg) rotate(-45deg); transform: rotate(90deg) rotate(-45deg);}
.logo{left: 50%; top: 50%; display: block; width: 383px; height: 60px; margin-left: -191px; margin-top: -30px; background: url(../images/logo.png) no-repeat;}
.logo_ls{left: 50%; top: 50%; display: block; width: 383px; height: 60px; margin-left: -191px; margin-top: -30px; background: url(../images/logo_ls.png) no-repeat;}
.topTell{left: 3%; top: 50%; display: block; width: 40px; height: 40px; margin-right: -20px; margin-top: -20px; background: url(../images/header_goHome.png) no-repeat;}
.shake{-webkit-animation:shake 0.2s ease-in-out 6 alternate; -moz-animation:shake 0.2s ease-in-out 6 alternate; -o-animation:shake 0.2s ease-in-out 6 alternate; animation:shake 0.2s ease-in-out 6 alternate;}
@-webkit-keyframes shake{
0%{-moz-transform:rotate(8deg); -webkit-transform:rotate(8deg); transform:rotate(8deg);}
100%{-moz-transform:rotate(-8deg); -webkit-transform:rotate(-8deg); transform:rotate(-8deg);}
}
@-moz-keyframes shake{
0%{-moz-transform:rotate(8deg); -webkit-transform:rotate(8deg); transform:rotate(8deg);}
100%{-moz-transform:rotate(-8deg); -webkit-transform:rotate(-8deg); transform:rotate(-8deg);}
}
@-o-keyframes shake{
0%{-moz-transform:rotate(8deg); -webkit-transform:rotate(8deg); transform:rotate(8deg);}
100%{-moz-transform:rotate(-8deg); -webkit-transform:rotate(-8deg); transform:rotate(-8deg);}
}
@keyframes shake{
0%{-moz-transform:rotate(8deg); -webkit-transform:rotate(8deg); transform:rotate(8deg);}
100%{-moz-transform:rotate(-8deg); -webkit-transform:rotate(-8deg); transform:rotate(-8deg);}
}
.menulist{width:100%;}
.menulist h3{wdith:100%; height:70px; font-size:30px; color:#fff; font-weight:500; padding-top:20px; padding-left:22px; padding-bottom:0;}
.menulist h3 a{ display:block;}
.menulist ul{width:100%; border-bottom:1px solid #6a7380;}
.menulist ul li{width:100%; float:left; height:78px; overflow:hidden; line-height:78px; font-size:26px; text-align:center; color:#9097a0; border-top:1px solid #6a7380;}
.menulist ul li a{display:block; float:left; height:78px; color:#9097a0; border-right:1px solid #6a7380; border-right:1px solid #6a7380;}
.menulist ul li a:nth-child(4n){border-right:none}
.popMenu{display:none;}
.menulists{position:absolute; width:100%;}
@media screen and (min-width:320px) and (max-width:900px){
#header{height: 45px;}
.showMenu{width: 24px; height: 14px; margin-top: -7px; -moz-background-size:100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; font:1em/1.5em "Microsoft YaHei";}
.showMenu a{width: 24px; height: 14px;}
.showMenu a{display: block; width: 24px; height: 14px; position: relative;}
.showMenu a:before, .showMenu a:after{content: ''; position: absolute; left: 0; top: 50%; height: 4px; width: 100%; z-index: -1; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; background-color: #fff; margin-top: -2px;}
.showMenu a:before{-moz-transform: translateY(-5px); -o-transform: translateY(-5px); -ms-transform: translateY(-5px); -webkit-transform: translateY(-5px); transform: translateY(-5px);}
.showMenu a:after{-moz-transform: translateY(5px); -o-transform: translateY(5px); -ms-transform: translateY(5px); -webkit-transform: translateY(5px); transform: translateY(5px);}
.hideMenu a:before{-moz-transform: rotate(90deg) rotate(45deg); -o-transform: rotate(90deg) rotate(45deg); -ms-transform: rotate(90deg) rotate(45deg); -webkit-transform: rotate(90deg) rotate(45deg); transform: rotate(90deg) rotate(45deg);}
.hideMenu a:after{-moz-transform: rotate(90deg) rotate(-45deg); -o-transform: rotate(90deg) rotate(-45deg); -ms-transform: rotate(90deg) rotate(-45deg); -webkit-transform: rotate(90deg) rotate(-45deg); transform: rotate(90deg) rotate(-45deg);}
.logo{width: 191px; height: 30px; margin-left: -95px; margin-top: -15px; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%;}
.topTell{width: 20px; height: 20px; margin-top: -10px; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%;}
.menulist h3{height:30px; font-size:15px; padding-left:11px; padding-top:10px; padding-bottom:0}
.menulist ul li{height:39px; font-size:13px; line-height:39px;}
}
menu.js
// JavaScript Document
$(function(){
var screenHeight,screenWidth,popMenuHeight,oneHeight,quarter, bFlag = true,preventDefault;
preventDefault=function(e){e.preventDefault();};
var popMenu = {
openMenu:function(){
screenHeight =$(window).height();
screenWidth = $(window).width();
headerHeight = $("#header").outerHeight();
popMenuHeight = screenHeight -headerHeight ;
oneHeight = $("#popMenu").find("li").height();
quarter = parseInt(screenWidth/4,10);
$("#popMenu").find("li").css({width:screenWidth+'px'});
$("#popMenu").find("li a").css({width:quarter-1+'px',height:oneHeight-1+'px'});
$("#popMenu").css({width:'100%',height:popMenuHeight+'px',position:'absolute',left:0,top:headerHeight+'px',zIndex:1000,overflow:'hidden',backgroundColor:'rgba(49,58,70,0.98)'});
},
init:function(){
popMenu.openMenu();
if(bFlag){
$("#popMenu").hide();
$("#popMenu").slideDown(600);
bFlag = false;
$("body").css({overflow:"hidden"})
if(document.addEventListener){
document.addEventListener('touchmove',preventDefault,false);
}else{
document.attachEvent('ontouchmove',preventDefault);
}
}else{
$("#popMenu").slideUp('fast');
bFlag = true;
$("body").css({overflow:"auto"})
document.removeEventListener('touchmove',preventDefault,false);
if(document.removeEventListener){
document.removeEventListener('touchmove',preventDefault,false);
}else {
document.attachEvent('ontouchmove',preventDefault);
}
}
},
reset:function(){
popMenu.openMenu();
}
};
$(".showMenu").on("click",function(){
$(this).toggleClass('hideMenu');
popMenu.init();
popMenu.reset();
});
});
效果图：
相关推荐
本资源“html5手机版右侧导航菜单栏滑动代码.zip”就是一个实例，展示了如何利用HTML5、CSS3以及JavaScript实现一个绿色的手机右侧滑动导航菜单。下面我们将详细探讨其中涉及的关键知识点。 首先，HTML5是现代网页...
在本主题中，我们将探讨9款使用HTML5技术实现的炫酷导航菜单，这些菜单通过其独特的设计和交互效果，极大地提升了网站的视觉吸引力和用户体验。 1. **响应式设计**：在现代网页设计中，响应式布局是必不可少的。...
### 解决安卓嵌套H5软键盘遮挡问题及导航栏遮挡问题 在移动应用开发过程中，尤其是在处理H5页面时，经常会遇到一个让人头疼的问题：软键盘弹出后遮挡了输入框或者页面被华为、小米等手机底部的导航栏遮挡。这个问题...
2. **汉堡菜单**：在小屏幕设备上，为了节省空间，导航栏可能隐藏在一个图标（汉堡菜单）后面，点击后展开全部链接。这种设计考虑了移动优先的策略。 3. **固定定位**：很多导航栏会设置为固定在顶部或底部，即使...
html5响应式导航菜单模板源码，动态效果的头部导航菜单，一定适合你，代码上手简单，代码独立，可以直接使用。也可直接预览效果。别再犹豫了，一起加入这个源码的世界吧！博主提供各种支持，欢迎合作共赢。 效果...
3. **汉堡菜单**：在小屏幕设备上，由于空间有限，通常会采用汉堡菜单（三横线图标）来隐藏导航项。点击汉堡图标后，导航链接会以下拉列表的形式展开，节省屏幕空间。 4. **触摸事件**：在移动端，除了鼠标点击，还...
在网页设计中，导航菜单是不可或缺的部分，它帮助用户快速浏览和访问网站的不同部分。"jQuery响应式导航菜单"是一个专为实现这一目的而设计的解决方案。这个项目使用了两个核心JavaScript库：jQuery 1.8.3和pgwmenu....
这些脚本负责实现触屏版导航菜单的动态效果，例如响应用户的触摸事件，实现菜单的动画过渡，以及可能的触控反馈。可能使用了jQuery或者其他轻量级的JavaScript库来简化代码和增强性能。 3. **fonts**：这个文件夹...
【微信底部导航栏菜单】是移动端应用中常见的一种设计元素，它位于屏幕的最下方，通常包含几个主要功能的快捷入口，便于用户在不同页面间快速切换。在本项目中，我们得到了一套与微信底部导航栏高度相似的源代码，这...
在这个主题中，我们将深入探讨如何使用mPass JSApi来控制H5页面的导航栏样式和内容。 首先，我们需要理解mPass JSApi的基本概念。mPass JSApi是一组接口，这些接口由原生应用程序提供，使得H5页面可以通过...
首先，导航菜单是任何网站或应用的重要组成部分，特别是在手机端，由于屏幕尺寸限制，良好的导航设计尤为重要。HTML5的`<nav>`元素专门用于定义导航链接，这使得构建结构化的导航菜单变得简单。在手机顶部的导航菜单...
html5移动端分类筛选下拉导航菜单代码 html5移动端分类筛选下拉导航菜单代码 html5移动端分类筛选下拉导航菜单代码 html5移动端分类筛选下拉导航菜单代码 html5移动端分类筛选下拉导航菜单代码
在这个场景中，我们关注的是一个基于"jQuery + Bootstrap"的示例项目，它实现了左侧菜单栏控制右侧页面内容切换的功能，并且结合了Bootstrap的弹框展示。下面我们将深入探讨这个项目的核心技术和实现细节。 首先，...
4. **全屏导航菜单**: 全屏导航菜单是手机网页设计中常见的一种设计模式，尤其适用于内容丰富的网站。这种菜单在用户点击后会占据整个屏幕，提供清晰的导航选项，改善了小屏幕设备上的用户体验。 5. **响应式设计**...
在这个导航栏特效中，可能应用了这些属性来创建动态的导航切换和图标变换。 压缩包中的文件"codesc.net"可能是源代码文件，包含HTML结构、CSS样式和可能的JavaScript代码。HTML部分会定义导航栏的布局和链接，CSS...
此外，考虑到项目标签是"JS特效-菜单导航"，这表明可能还使用了一些JavaScript库或者框架，如jQuery或者Vue.js，它们提供了更便捷的方式来处理DOM操作和动画效果。例如，jQuery的`.animate()`方法可以轻松创建复杂的...
6款网页侧边栏HTML5手机导航菜单，这种风格的菜单用在电脑上也挺个性，类似牙刷式菜单，鼠标放在牙刷上，会显示出菜单，这种菜单非常适合移动设备，手机/PAD等使用，节约屏幕空间，现在微信、QQ上都可见到这种菜单...
这种导航菜单在小屏幕设备上特别有用，因为它允许用户在一个紧凑的空间内浏览多个导航选项，而不必在有限的屏幕上显示所有链接。 HTML5是超文本标记语言的最新版本，引入了许多新特性，如语义化标签（如、、等）、...
2. **响应式设计**：随着移动设备的普及，导航栏需要适应不同屏幕尺寸，例如通过折叠菜单来节省空间。 3. **位置一致性**：导航栏应始终位于相同的位置，让用户形成习惯。 4. **色彩和对比**：使用与背景色有足够...