Question

在我正在处理的网站上，有一个固定div的菜单，显示屏幕宽度小于769px时。

单击顶部栏时切换固定div（并添加菜单打开类）。

.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）时，我会遇到一些奇怪的行为。

在移动设备中，有两个问题：

1）当页面内容可滚动时，菜单消失。但是，菜单切换仍然有效 - 如果我尝试使用Chrome上的开发者工具在设备模式下打开菜单，它将无法打开，但如果我禁用设备模式，则菜单已打开。

http://jsfiddle.net/yrc2bfn4/

2）如果页面内容足够短以便没有滚动，则菜单显示在设备模式中。但是，如果设备屏幕足够小，导致菜单滚动，则菜单会再次消失。

http://jsfiddle.net/q63cke2u/

Answer 1

将导航元素移到标题div之外，并将css Select(kvp => kvp.Value.Value)更改为.header nav，将.menu更改为.header nav ul

http://jsfiddle.net/seanmurrin/yg0b053s/

.menu ul

$(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 ***********/

固定Div在移动浏览器中消失

1 个答案: