修复了 Div 在移动浏览器中消失的问题
Fixed Div disappears in mobile browsers
在我工作的网站上,有一个固定的菜单 div,当屏幕宽度小于 769px 时显示。
单击顶部栏时会切换固定 div(并添加菜单打开 class)。
.header nav {
position: fixed;
left: -330px;
top: 75px;
background: #87cc33;
width: 330px;
bottom: 0;
z-index: 1000;
overflow:auto;
/* Transitions */
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.menu.menu-open {
left: 0px;
}
这在桌面浏览器中运行良好,但当我使用移动浏览器(或 Chrome 使用设备模式)时,我会遇到一些奇怪的行为。
在移动端,有 2 个问题:
1) 当页面内容可滚动时,菜单消失。但是,菜单切换仍然有效 - 如果我尝试在 Chrome 上使用开发人员工具在设备模式下打开菜单,它不会打开,但如果我禁用设备模式,菜单会打开。
2) 如果页面内容足够短以至于没有滚动,则菜单以设备模式显示。但是,如果设备屏幕小到导致菜单滚动,那么菜单又会消失。
将导航元素移到 header div 之外,并将 css .header nav
更改为 .menu
并将 .header nav ul
更改为 .menu ul
http://jsfiddle.net/seanmurrin/yg0b053s/
$(document).ready(function()
{
/****** Full Size JQuery ************/
/****** Mobile Size JQuery ************/
// Show sidebar
$(".header-image").click(function() {
$('.menu').toggleClass("menu-open");
$('.header').toggleClass("menu-open");
});
// Show submenu
$(".nav-lvl-1 li").click(function() {
$(this).find("ul").toggleClass("sub-menu-open-mobile");
$(this).find("a").toggleClass("sub-menu-open-mobile");
});
});
* {
font-family: Arial, Helvetica, sans-serif;
color: #333333;
}
/* Container CSS Attributes*/
h1 {
//color: #333333;
text-align: center;
margin: 0px;
padding: 0px;
}
/* Container CSS Attributes*/
h2 {
color: white;
text-align: center;
margin: 0px;
padding: 0px;
}
/* Highlight background color */
::selection {
background: #6ab014; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #6ab014; /* Gecko Browsers */
}
/**********************************
Containers
**********************************/
/* Container CSS Attributes*/
.container {
position: relative;
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
margin:0;
}
.h2-container {
background-color: #6ab014;
}
/********* Side Menu **********/
.menu {
Display:none;
}
/**********************************************************************/
/********* Start CSS for less than or equal to 768px screen ***********/
@media only screen and (max-width:768px){
.header-upper, .footer-external{
display:none;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #6ab014;
z-index: 100001;
height: 75px;
overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
text-align: center;
background-image: url("/images/mobile_expand.svg");
background-repeat: no-repeat;
}
.header.menu-open {
background-image: url("/images/mobile_retract.svg");
}
.header .header-image img{
content:url("/images/logo_mobile.svg");
height: 50px;
width: 160px;
margin-top: 12px;
}
/********* Disable link to open sub-menu **********/
.header .header-image a {
pointer-events: none;
cursor: pointer;
}
/* Stop header from overlapping container */
.container {
position: relative;
margin-top: 75px;
width: 100%;
}
.main {
position: block;
width: 90%;
max-width: 80em;
margin: 0 auto;
}
/********* Side Menu **********/
.menu {
position: fixed;
display:block;
left: -330px;
top: 75px;
background: #87cc33;
width: 330px;
bottom: 0;
z-index: 1000;
overflow:auto;
/* Transitions */
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.menu ul
{
padding: 0;
margin: 0;
list-style-type: none;
}
/* Make menu above others */
.menu {
z-index:100;
}
/* Open menu CSS */
.menu.menu-open {
left: 0px;
}
/********* Navigation Sub-menus **********/
.menu .nav-lvl-2.sub-menu-open-mobile{
/* Max-height may have to change with more sublinks */
max-height: 1000px;
display: block;
opacity: 1;
}
.menu .nav-lvl-2 {
background: #a5e25b;
max-height: 0px;
display: none;
opacity: 0;
/* Transitions */
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
.menu .nav-lvl-2 a {
border-bottom: 1px solid #fff;
}
/********* Disable links to open sub-menu **********/
.has-sub-menu {
pointer-events: none;
cursor: pointer;
}
.menu li:hover {
cursor: pointer;
}
/********* Link CSS **********/
.menu a{
display: block;
color: #fff;
font-size: 1.1em;
font-weight: 300;
border-bottom: 1px solid #a5e25b;
padding: 1em;
text-decoration: none;
}
/******* Mobile dropdown arrow - down *********/
a.has-sub-menu:not(.sub-menu-open-mobile):before {
position: absolute;
content: "";
left: 290px;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 11px solid #fff;
margin-top: 7px;
}
/******* Mobile dropdown arrow - up *********/
a.has-sub-menu.sub-menu-open-mobile:before {
position: absolute;
content: "";
left: 290px;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 11px solid #fff;
margin-top: 7px;
}
/******* dropdown link css *********/
a.has-sub-menu:hover:before,
a.has-sub-menu:focus:before,
a.has-sub-menu:active:before {
border-color: transparent #730800;
}
a.has-sub-menu:hover:after,
a.has-sub-menu:focus:after,
a.has-sub-menu:active:after {
border-color: #730800;
}
/* Stop header from overlapping container */
.container.first {
margin-top: 75px;
}
}
/********* End CSS for less than or equal to 480px screen ***********/
<!DOCTYPE html>
<body>
<div class="header">
<div class="header-inner">
<h1 class="header-image"><a href="/"><img src="/images/logo.svg" /></a></h1>
</div>
</div>
<nav class="menu">
<ul class="nav-lvl-1">
<li><a href="/">Home</a></li>
<li><a class="has-sub-menu" href="/Platform/">Platform</a>
<ul class="nav-lvl-2">
<li><a href="http://google.com/">test1</a></li>
<li><a href="http://google.com/">test2</a></li>
<li><a href="http://google.com/">test3</a></li>
<li><a href="http://google.com/">test4</a></li>
</ul>
</li>
<li><a class="has-sub-menu" href="/modules/">Modules</a>
<ul class="nav-lvl-2">
<li><a href="http://google.com/">test1</a></li>
<li><a href="http://google.com/">test2</a></li>
<li><a href="http://google.com/">test3</a></li>
<li><a href="http://google.com/">test4</a></li>
<li><a href="http://google.com/">test5</a></li>
<li><a href="http://google.com/">test6</a></li>
<li><a href="http://google.com/">test7</a></li>
<li><a href="http://google.com/">test8</a></li>
<li><a href="http://google.com/">test9</a></li>
<li><a href="http://google.com/">test10</a></li>
<li><a href="http://google.com/">test11</a></li>
<li><a href="http://google.com/">test12</a></li>
</ul>
</li>
<li><a href="http://google.com/nav">Hosting</a></li>
<li><a class="has-sub-menu" href="http://google.com/nav">Resources</a>
<ul class="nav-lvl-2">
<li><a href="http://google.com/">test1</a></li>
<li><a href="http://google.com/">test2</a></li>
<li><a href="http://google.com/">test3</a></li>
<li><a href="http://google.com/">test4</a></li>
<li><a href="http://google.com/">test5</a></li>
</ul>
</li>
<li><a class="has-sub-menu" href="/contact/">Contact Us</a>
<ul class="nav-lvl-2">
<li><a href="http://google.com/">test1</a></li>
<li><a href="http://google.com/">test2</a></li>
<li><a href="http://google.com/">test3</a></li>
</ul>
</li>
</ul>
</nav>
<!-- Begin Container -->
<div class="container h2-container">
<div class="main">
<h2>
H2 Title
</h2>
</div>
</div>
<!-- Begin Container -->
<div class="container">
<div class="main">
</div>
</div>
<!-- End Container -->
<!-- Begin Container -->
<div class="container">
<div class="main">
This is content.
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
</div>
</div>
<!-- Begin Container -->
<div class="container">
<div class="main">
This is content. This is the last container.
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
Final content in the document.
</div>
</div>
<!-- End Container -->
在我工作的网站上,有一个固定的菜单 div,当屏幕宽度小于 769px 时显示。
单击顶部栏时会切换固定 div(并添加菜单打开 class)。
.header nav {
position: fixed;
left: -330px;
top: 75px;
background: #87cc33;
width: 330px;
bottom: 0;
z-index: 1000;
overflow:auto;
/* Transitions */
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.menu.menu-open {
left: 0px;
}
这在桌面浏览器中运行良好,但当我使用移动浏览器(或 Chrome 使用设备模式)时,我会遇到一些奇怪的行为。
在移动端,有 2 个问题:
1) 当页面内容可滚动时,菜单消失。但是,菜单切换仍然有效 - 如果我尝试在 Chrome 上使用开发人员工具在设备模式下打开菜单,它不会打开,但如果我禁用设备模式,菜单会打开。
2) 如果页面内容足够短以至于没有滚动,则菜单以设备模式显示。但是,如果设备屏幕小到导致菜单滚动,那么菜单又会消失。
将导航元素移到 header div 之外,并将 css .header nav
更改为 .menu
并将 .header nav ul
更改为 .menu ul
http://jsfiddle.net/seanmurrin/yg0b053s/
$(document).ready(function()
{
/****** Full Size JQuery ************/
/****** Mobile Size JQuery ************/
// Show sidebar
$(".header-image").click(function() {
$('.menu').toggleClass("menu-open");
$('.header').toggleClass("menu-open");
});
// Show submenu
$(".nav-lvl-1 li").click(function() {
$(this).find("ul").toggleClass("sub-menu-open-mobile");
$(this).find("a").toggleClass("sub-menu-open-mobile");
});
});
* {
font-family: Arial, Helvetica, sans-serif;
color: #333333;
}
/* Container CSS Attributes*/
h1 {
//color: #333333;
text-align: center;
margin: 0px;
padding: 0px;
}
/* Container CSS Attributes*/
h2 {
color: white;
text-align: center;
margin: 0px;
padding: 0px;
}
/* Highlight background color */
::selection {
background: #6ab014; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #6ab014; /* Gecko Browsers */
}
/**********************************
Containers
**********************************/
/* Container CSS Attributes*/
.container {
position: relative;
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
margin:0;
}
.h2-container {
background-color: #6ab014;
}
/********* Side Menu **********/
.menu {
Display:none;
}
/**********************************************************************/
/********* Start CSS for less than or equal to 768px screen ***********/
@media only screen and (max-width:768px){
.header-upper, .footer-external{
display:none;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #6ab014;
z-index: 100001;
height: 75px;
overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
text-align: center;
background-image: url("/images/mobile_expand.svg");
background-repeat: no-repeat;
}
.header.menu-open {
background-image: url("/images/mobile_retract.svg");
}
.header .header-image img{
content:url("/images/logo_mobile.svg");
height: 50px;
width: 160px;
margin-top: 12px;
}
/********* Disable link to open sub-menu **********/
.header .header-image a {
pointer-events: none;
cursor: pointer;
}
/* Stop header from overlapping container */
.container {
position: relative;
margin-top: 75px;
width: 100%;
}
.main {
position: block;
width: 90%;
max-width: 80em;
margin: 0 auto;
}
/********* Side Menu **********/
.menu {
position: fixed;
display:block;
left: -330px;
top: 75px;
background: #87cc33;
width: 330px;
bottom: 0;
z-index: 1000;
overflow:auto;
/* Transitions */
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.menu ul
{
padding: 0;
margin: 0;
list-style-type: none;
}
/* Make menu above others */
.menu {
z-index:100;
}
/* Open menu CSS */
.menu.menu-open {
left: 0px;
}
/********* Navigation Sub-menus **********/
.menu .nav-lvl-2.sub-menu-open-mobile{
/* Max-height may have to change with more sublinks */
max-height: 1000px;
display: block;
opacity: 1;
}
.menu .nav-lvl-2 {
background: #a5e25b;
max-height: 0px;
display: none;
opacity: 0;
/* Transitions */
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
.menu .nav-lvl-2 a {
border-bottom: 1px solid #fff;
}
/********* Disable links to open sub-menu **********/
.has-sub-menu {
pointer-events: none;
cursor: pointer;
}
.menu li:hover {
cursor: pointer;
}
/********* Link CSS **********/
.menu a{
display: block;
color: #fff;
font-size: 1.1em;
font-weight: 300;
border-bottom: 1px solid #a5e25b;
padding: 1em;
text-decoration: none;
}
/******* Mobile dropdown arrow - down *********/
a.has-sub-menu:not(.sub-menu-open-mobile):before {
position: absolute;
content: "";
left: 290px;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 11px solid #fff;
margin-top: 7px;
}
/******* Mobile dropdown arrow - up *********/
a.has-sub-menu.sub-menu-open-mobile:before {
position: absolute;
content: "";
left: 290px;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 11px solid #fff;
margin-top: 7px;
}
/******* dropdown link css *********/
a.has-sub-menu:hover:before,
a.has-sub-menu:focus:before,
a.has-sub-menu:active:before {
border-color: transparent #730800;
}
a.has-sub-menu:hover:after,
a.has-sub-menu:focus:after,
a.has-sub-menu:active:after {
border-color: #730800;
}
/* Stop header from overlapping container */
.container.first {
margin-top: 75px;
}
}
/********* End CSS for less than or equal to 480px screen ***********/
<!DOCTYPE html>
<body>
<div class="header">
<div class="header-inner">
<h1 class="header-image"><a href="/"><img src="/images/logo.svg" /></a></h1>
</div>
</div>
<nav class="menu">
<ul class="nav-lvl-1">
<li><a href="/">Home</a></li>
<li><a class="has-sub-menu" href="/Platform/">Platform</a>
<ul class="nav-lvl-2">
<li><a href="http://google.com/">test1</a></li>
<li><a href="http://google.com/">test2</a></li>
<li><a href="http://google.com/">test3</a></li>
<li><a href="http://google.com/">test4</a></li>
</ul>
</li>
<li><a class="has-sub-menu" href="/modules/">Modules</a>
<ul class="nav-lvl-2">
<li><a href="http://google.com/">test1</a></li>
<li><a href="http://google.com/">test2</a></li>
<li><a href="http://google.com/">test3</a></li>
<li><a href="http://google.com/">test4</a></li>
<li><a href="http://google.com/">test5</a></li>
<li><a href="http://google.com/">test6</a></li>
<li><a href="http://google.com/">test7</a></li>
<li><a href="http://google.com/">test8</a></li>
<li><a href="http://google.com/">test9</a></li>
<li><a href="http://google.com/">test10</a></li>
<li><a href="http://google.com/">test11</a></li>
<li><a href="http://google.com/">test12</a></li>
</ul>
</li>
<li><a href="http://google.com/nav">Hosting</a></li>
<li><a class="has-sub-menu" href="http://google.com/nav">Resources</a>
<ul class="nav-lvl-2">
<li><a href="http://google.com/">test1</a></li>
<li><a href="http://google.com/">test2</a></li>
<li><a href="http://google.com/">test3</a></li>
<li><a href="http://google.com/">test4</a></li>
<li><a href="http://google.com/">test5</a></li>
</ul>
</li>
<li><a class="has-sub-menu" href="/contact/">Contact Us</a>
<ul class="nav-lvl-2">
<li><a href="http://google.com/">test1</a></li>
<li><a href="http://google.com/">test2</a></li>
<li><a href="http://google.com/">test3</a></li>
</ul>
</li>
</ul>
</nav>
<!-- Begin Container -->
<div class="container h2-container">
<div class="main">
<h2>
H2 Title
</h2>
</div>
</div>
<!-- Begin Container -->
<div class="container">
<div class="main">
</div>
</div>
<!-- End Container -->
<!-- Begin Container -->
<div class="container">
<div class="main">
This is content.
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
</div>
</div>
<!-- Begin Container -->
<div class="container">
<div class="main">
This is content. This is the last container.
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
This is content
<br><br><br>
Final content in the document.
</div>
</div>
<!-- End Container -->