Buongiorno a tutto il forum, ho un problema che non riesco a risolvere da solo e che si è presentato dopo l'installazione di un certificato SSL e la migrazione quindi da HTTP a HTTPS. Quando il sito viene visualizzato da dispositivo mobile l'icona del menu non viene più mostrata e il menu stesso compare sempre aperto, come se si fosse già cliccato su quell'icona per espanderlo. Il problema si presenta nelle pagine online, se le apro in locale il menu funziona correttamente. Prima della migrazione a HTTPS tutto funzionava alla perfezione. Vi allego i codici HTML, CSS e JS, spero che possiate darmi un suggerimento sul da farsi perchè non ho proprio idea di dove potrebbe risiedere l problema. Vi ringrazio in anticipo per l'aiuto fornito.
HTML:
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li><a href="contatti.html">Contatti</a></li>
</ul>
CSS:
ul.nav {
margin: 0;
padding: 0;
text-align:center;
}
ul.nav li {
list-style-type: none;
margin-bottom: 5px;
}
ul.nav a {
display: block;
color: #CCC;
text-decoration: none;
padding: 12px 12px;
font-size: 1.10em;
border: 1px solid;
background-color: #600000;
box-shadow: inset 0px 16px 2px rgba(255,255,255,.05), 0px 0px 5px rgba(0,0,0,.5);
border-color: #FFF;
-webkit-transition: all linear .35s .1s;
transition: all linear .35s .1s;
border-radius: 5px;
}
ul.nav a:hover, ul.nav a:focus {
color: #FFFFFF;
background-color: rgba(51,51,51,0.75);
outline: 0;
}
.toggleMenu {
display: none;
background: #900000;
padding: 10px 15px;
color: #fff !important;
}
@media only screen and (min-width: 0px) and (max-width: 699px) {
body {margin: 0px;}
.content-wrapper, .masthead, .footer {border-radius: 0px; }
.content-wrapper {width: auto; margin: 0px;}
.sidebar, .sidebar2, .main-content {
width: auto !important;
float: none !important;
position: static !important;
}
.content {
padding: 10px 10px !important;
border: none !important;
height: auto !important;
max-height: 888678px;
}
}
@media only screen and (min-width: 700px) and (max-width: 1000px) {
.content-wrapper {width: auto; margin: 0px 10px;}
.content {padding: 20px !important;}
}
JS:
var ww = document.body.clientWidth;
$(document).ready(function() {
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
adjustMenu();
})
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
var adjustMenu = function() {
if (ww < 699) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$(".nav li").unbind('mouseenter mouseleave');
$(".nav li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
}
else if (ww >= 699) {
$(".toggleMenu").css("display", "none");
$(".nav").show();
$(".nav li").removeClass("hover");
$(".nav li a").unbind('click');
$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
// must be attached to li so that mouseleave is not triggered when hover over submenu
$(this).toggleClass('hover');
});
}
}
Rispondi quotando
