Ciao a tutti, come da titolo, ho un problema con il menù:
voglio creare un menù che rimanga fisso quando scrollo la pagina e fin qui tutto ok, poi voglio che tale menù sia responsivo e anche qui va bene, il problema nasce quando metto insieme le due cose.
A schermo intero funziona tutto, ma se ridimensiono la finestra del browser, con il men� che si adatta in automatico (quindi acquisisce le classiche sembianze di un menù mobile, con le striscette orizzonatali che si espande al click), nel momento in cui scrollo la pagina ed arrivo al punto in cui la barra del men� si blocca, questo, oltre a bloccarsi, si espande senza click ed anche il contenuto (le singole voci) risulta enormemente distanziato.
Da quel che ho visto, ciò che da problemi è la positione:fixed che aggiungo al menù quando scrollo la pagina, ma non posso toglierla, altrimenti il menù non si bloccherebbe in cima.
Questo il codice javascript per il blocco del menù:
Questo il codice JQuery per la trasformazione del menù mobile:
Questo il CSS:
Questa la classe aggiunta da javascript allo scroll della pagina:
Questo il codice HTML del men�:
Spero di essere stato chiaro nello spiegare il problema e che ci sia qualcuno che sappia darmi una soluzione. Grazie in anticipo.
voglio creare un menù che rimanga fisso quando scrollo la pagina e fin qui tutto ok, poi voglio che tale menù sia responsivo e anche qui va bene, il problema nasce quando metto insieme le due cose.
A schermo intero funziona tutto, ma se ridimensiono la finestra del browser, con il men� che si adatta in automatico (quindi acquisisce le classiche sembianze di un menù mobile, con le striscette orizzonatali che si espande al click), nel momento in cui scrollo la pagina ed arrivo al punto in cui la barra del men� si blocca, questo, oltre a bloccarsi, si espande senza click ed anche il contenuto (le singole voci) risulta enormemente distanziato.
Da quel che ho visto, ciò che da problemi è la positione:fixed che aggiungo al menù quando scrollo la pagina, ma non posso toglierla, altrimenti il menù non si bloccherebbe in cima.
Questo il codice javascript per il blocco del menù:
Codice:
$(document).ready(function() {
var menu = $("#menuM");
var posizione = menu.position();
$(window).scroll(function() {
if ($(window).scrollTop() >= posizione.top) {
menu.addClass("fissa");
} else {
menu.removeClass("fissa");
}})});
Codice:
var ww = jQuery(window).width();
jQuery(document).ready(function() {
jQuery("nav li a").each(function() {
if (jQuery(this).next().length > 0) {
jQuery(this).addClass("parent");
};
})
jQuery("#btn-menu").click(function(e) {
e.preventDefault();
jQuery(this).toggleClass("active");
jQuery("nav ul").slideToggle('fast');
});
adjustMenu();
jQuery('.remove').click(function(e) {
jQuery('nav').css('top','0');
});
})
jQuery(window).bind('resize orientationchange', function() {
ww = jQuery(window).width();
adjustMenu();
});
var adjustMenu = function() {
if (ww < 768) {
jQuery("nav").css("display", "block");
jQuery("#btn-menu a").css("display", "block");
jQuery("#btn-utente a").css("display", "block");
if (!jQuery("nav a").hasClass("active")) {
jQuery("nav ul").hide();
}
} else {
jQuery("#btn-menu a").css("display", "none");
jQuery("#btn-utente a").css("display", "none");
jQuery("nav").show();
jQuery("nav ul").show();
jQuery("nav li").removeClass("hover");
jQuery("nav a").unbind('click');
jQuery("nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
jQuery(this).toggleClass('hover');
});
}
}
Codice:
.menu{
text-align:center;
vertical-align:middle;
height:3em;
padding: 0;
font: 1.08em Arial, Helvetica, sans-serif;
position:relative;
}
.menu li {
background: none;
float:left;
list-style: none;
height: 100%;
}
ul.menu {
margin: auto;
padding: 0;
height: 100%;
width:65em;
}
ul.menu li {
float:left;
list-style: none;
height: 100%;
}
ul.menu li.hover,
ul.menu li:hover {
position: relative;
z-index: 599;
}
ul.menu li a {
padding: 0.7em 1.1em 0 1.1em;
color: #fff;
text-decoration:none;
display:inline-block;
}
ul.nav-sub {
visibility: hidden;
position: absolute;
padding:0;
margin-left:0;
text-align:left;
top:2.8em;
z-index: 598;
background: #000000;
}
ul.nav-sub li {
height: 1.6875em;
width:10.3125em;
border:0;
margin-top:0.0625em;
list-style: none;
background: none;
}
ul.nav-sub li a {
display:block;
padding: 0.375em 0.3125em 0.375em 0.3125em;
font: 0.9em Arial, Helvetica, sans-serif;
font-variant:small-caps;
text-align:left;
}
#btn-menu{
padding: 0;
margin: 0;
margin-top:0.625em !important;
float:left;
margin-left: 1%;
height:1.5625em;
display:inline-block;
}
#btn-utente{
padding: 0;
margin: 0;
margin-top:0.625em !important;
margin-left: 85%;
height:1.5625em;
display:inline-block;
}
#menu-principale li{
float: none;
display:block;
position: relative;
text-align: left;
}
.nav-sub {
padding:0;
margin:0;
background: #111 none repeat scroll 0 0;
width:100%;
position:relative;
top:3.75em;
}
Codice:
.fissa {
position: fixed;
top:0px;
z-index:999;
}
Codice:
<nav id="menuM">
<div id="btn-menu">
<a href="#"><img src="img/mobile.png"></a>
</div>
<div id="btn-utente">
<a class="popup-link" href="#"><img src="img/utente.png"></a>
</div>
<ul class="menu" id="menu-principale">
<li><a href="Index.php">Home</a></li>
<li><a href="javascript:void(0)">A</a>
<ul class="nav-sub">
<li><a href="1.php">1</a></li>
<li><a href="2.php">2</a></li>
<li><a href="3.php">3</a></li>
<li><a href="4.php">4</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">B</a>
<ul class="nav-sub">
<li><a href="1.php">1</a></li>
<li><a href="2.php">2</a></li>
<li><a href="3.php">3</a></li>
<li><a href="4.php">4</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">C</a>
<ul class="nav-sub">
<li><a href="1.php">1</a></li>
<li><a href="2.php">2</a></li>
<li><a href="3.php">3</a></li>
<li><a href="4.php">4</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">D</a>
<ul class="nav-sub">
<li><a href="1.php">1</a></li>
<li><a href="2.php">2</a></li>
<li><a href="3.php">3</a></li>
<li><a href="4.php">4</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">E</a>
<ul class="nav-sub">
<li><a href="1.php">1</a></li>
<li><a href="2.php">2</a></li>
<li><a href="3.php">3</a></li>
<li><a href="4.php">4</a></li>
</ul>
</li>
<li><a href="g.php">F</a></li>
<li><a href="g.php">G</a></li>
</ul>
</nav>
Ultima modifica di un moderatore: