Menù responsive che scompare

**miki92** · 02-09-2014, 11.12.29

Buongiorno ragazzi,
ho il seguente codice che oramai uso da anni per il mio menù responsive. Oggi facendo un copia ed incolla dalla vecchia alla nuova grafica ho notato che il menù ad un determinato breakpoint scompare e non riesco ad uscirne fuori.

Sarà la stanchezza ma proprio non riesco a capire. Mi riuscite ad aiutare?

Codice HTML:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Senza nome 1</title>
<script src="jquery-2.1.1.min.js"></script>
<script src="main.js"></script>
<style>
#menu, #menu ul{
	list-style:none;
	margin:0;
	padding:0;
}
#menu{
	background:#84001e;	
	background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc3MjAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0E5MDMyOSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzg0MDAxRSIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzcyMCkiIC8+Cjwvc3ZnPg==);
	border-radius:5px;
	box-shadow:0 1px 1px #777;
	clear:both;
	margin:0 auto;
	margin-bottom:12px;
	width:99.7%;
}
#menu:before, #menu:after{
	content:"";
	display:table;
}
#menu:after{
	clear:both;
}
#menu li{
	border-right:1px #222 solid;
	float:left;
	position:relative;
}
#menu a{
	color:#fff;
	border:0;
	float:left;
	font:bold 12px Arial, Helvetica;
	padding:12px 30px;
	text-decoration:none;
	text-shadow:1px 1px 0 #000;
}
#menu li:hover > a{
	color:#fafafa;
}
#menu ul{
	background:#84001e;	
	background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc3MjAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0E5MDMyOSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzg0MDAxRSIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzcyMCkiIC8+Cjwvc3ZnPg==);
	border-radius:3px;
	box-shadow:0 -1px 0 rgba(255,255,255,.3);	
	left:0;
	margin:20px 0 0 0;
	opacity: 0;
	position:absolute;
	top:38px;
	transition:all .2s ease-in-out;  
	visibility:hidden;
	z-index:1;    
}
#menu li:hover > ul{
	margin:0;
	opacity:1;
	visibility:visible;
}
#menu ul ul{
	box-shadow:-1px 0 0 rgba(255,255,255,.3);		
	left:150px;
	margin:0 0 0 20px;
	top:0;
}
#menu ul li{
	display:block;
	border:0;
	box-shadow:0 1px 0 #111, 0 2px 0 #666;
	float:none;
}
#menu ul li:last-child{   
	box-shadow:none;    
}
#menu ul a{    
	display:block;
	float:none;
	padding:10px;
	text-transform:none;
	white-space:nowrap;
	width:130px;
}
#menu a:hover{
	background-color:#0186BA;
	background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImczMjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzA0QUNFQyIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzAxODZCQSIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzMyNCkiIC8+Cjwvc3ZnPg==);
}
#menu li:first-child a:hover{
	border-radius:5px 0 0 5px;
}
#menu ul li:first-child > a{
	border-radius:3px 3px 0 0;
}
#menu ul li:first-child > a:after{
	border-bottom:6px #222 solid;
	border-left:6px transparent solid;
	border-right:6px transparent solid;
	content:"";
	left:40px;
	top:-6px;
	position:absolute;
}
#menu ul ul li:first-child a:after{
	border-bottom:6px transparent solid;
	border-left:0;	
	border-right: 6px #3b3b3b solid;
	border-top: 6px transparent solid;
	left:-6px;
	margin-top:-6px;
	top:50%;
}
#menu ul li:first-child a:hover:after{
	border-bottom-color:#04acec; 
}
#menu ul ul li:first-child a:hover:after{
	border-right-color:#0299d3; 
	border-bottom-color:transparent; 	
}
#menu ul li:last-child > a{
	border-radius:0 0 3px 3px;
}
#menu-responsive{
	display:none;
}
.no-transition{
	display:none;  		
	opacity:1;
	transition:none;
	visibility:visible;
}
#menu li:hover > .no-transition{
	display:block;
}
/*****************************************************************************************************************************************/
@media screen and (max-width:600px){
	#menu-mobile{
		clear:both;
		position:relative;
	}
	#menu-mobile *{
		box-sizing:border-box;
	}
	#menu-responsive{
		background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center #84001E;
		border-radius:6px;
		color:#FAFAFA;
		cursor:pointer;
		display:block;
		height:40px;
		line-height:40px;
		padding:0 0 0 35px;
	}
	#menu{
		box-shadow:none;
		display:none;
		margin:0;
		padding:10px;
		position:absolute;
		top:40px;
		width:100%;
		z-index:1;
	}
	#menu:after{
		border-bottom:8px #444 solid;
		border-left:8px transparent solid;
		border-right:8px transparent solid;
		content:"";
		left:25px;
		position:absolute;
		top:-8px;
	}
	#menu ul{
		background:none;
		box-shadow:none;
		margin:0;
		opacity:1;
		position:static;
		visibility:visible;
	}
	#menu ul ul{
		box-shadow:none;
		margin:0 0 0 20px!important;
	}
	#menu li{
		border:0;
		box-shadow:none;
		display:block;
		float:none;
		margin:5px;
		position:static;
	}
	#menu ul li{
		box-shadow:none;
		margin-left:20px;
	}
	#menu a{
		color:#999;
		display:block;
		float:none;
		padding:0;
	}
	#menu a:hover{
		color:#FAFAFA;
	}
	#menu ul a{
		padding:0;
		width:auto;
	}
	#menu a:hover{
		background:none;
	}
	#menu ul li:first-child a:after, #menu ul ul li:first-child a:after{
		border:0;
	}
}
@media screen and (min-width:600px){
	#menu{
		display:block!important;
	}
	.readmore{
		text-align:center;
	}
}

</style>
</head>

<body>
		<nav id="menu-mobile">
			<ul id="menu">
				<li><a href="/">Home Page</a></li>
				<li><a href="http://blog.michelangeloscotto.net">Blog</a></li>
				<li><a href="http://www.michelangeloscotto.net/chi-sono.php">Chi 
				Sono</a></li>
				<li><a href="http://www.michelangeloscotto.net/portfolio/portfolio.php">
				Portfolio</a></li>
				<!--<li><a href="http://michelangeloscotto.net">Whois Tool</a></li>-->
				<li><a href="http://www.michelangeloscotto.net/helpdesk.php">
				Assistenza Remota</a></li>
				<li><a href="http://www.michelangeloscotto.net/contatti.php">
				Contattaci</a></li>
			</ul>
		</nav>
</body>

</html>

Questo è il JS:

Codice:

// Menu
$(function(){
 if($.browser.msie && $.browser.version.substr(0,1) < 7){
    $('li').has('ul').mouseover(function(){
	 $(this).children('ul').css('visibility','visible');
	}).mouseout(function(){
	 $(this).children('ul').css('visibility','hidden');
	})
 }

 $('#menu-mobile').prepend('<div id="menu-responsive">Menu</div>');		
 $("#menu-responsive").on("click", function(){
  $("#menu").slideToggle();
 });

 var isiPad = navigator.userAgent.match(/iPad/i) != null;
 if (isiPad) $('#menu ul').addClass('no-transition');      
});

04-09-2014, 09.23.13

Hola, penso che il problema sia nelle ultime 10 righe di css, quando imposti la media query su min-width: 600px, se va sotto i 600 scopare tutto, quindi modificando da così

Codice PHP:


@media screen and (min-width:600px){
    #menu{
        display:block!important;
    }
    .readmore{
        text-align:center;
    }
}

a cosi

Codice PHP:


@media screen and (min-width:100px){
    #menu{
        display:block!important;
    }
    .readmore{
        text-align:center;
    }
}

Dovrebbe fungere, fammi sapere se hai risolto e se ho capito bene il problema ;)
byeee

**miki92** · 04-09-2014, 09.35.07

In realtà il problema viene solo ovviato, perchè continua a non funzionare.
Purtroppo dopo anni che uso questo menù devo abbandonarlo perchè ho scoperto che il problema è legato a jQuery. Se uso una versione maggiore delle 1.9.1 non funziona più correttamente come deve ed adesso ho deciso di utilizzare un menù in puro css3.

Grazie ugualmente del tuo aiuto.

Discussione: Menù responsive che scompare

LinkBack

Strumenti discussione

Display

Menù responsive che scompare

Regole di scrittura