Menų responsive che scompare
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');
});
