[Javascript] [HTML] menù responsive fisso

wolfland

Nuovo Utente
14 Lug 2015
12
0
1
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ù:
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");
}})});
Questo il codice JQuery per la trasformazione del menù mobile:
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');
 });
}
}
Questo il CSS:
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;
}
Questa la classe aggiunta da javascript allo scroll della pagina:
Codice:
.fissa {
position: fixed;
top:0px;
z-index:999;
}
Questo il codice HTML del men�:
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>
Spero di essere stato chiaro nello spiegare il problema e che ci sia qualcuno che sappia darmi una soluzione. Grazie in anticipo.
 
Ultima modifica di un moderatore:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.369
338
83
La posizione fissa e il responsive di regola non vanno daccordo!
Ti sposto in JS
[MOD]
Da regolamento del forum, come tutti noi sei tenuto ad usare il tag
code.gif
quando posti del codice, oppure la funzione codice dalla barra degli strumenti
box inserisci 2.png.JPG

Inoltre ti prego di leggere attentamente il regolamento generale del forum e quello di sezione dove posti
Grazie
Per questa volta te lo sistemo io ma mi raccomando per il futuro
 

wolfland

Nuovo Utente
14 Lug 2015
12
0
1
Chiedo scusa, hai ragione, avrei dovuto usare i tag code... ero indeciso dove postare l'argomento se in CSS o in JS. Comunque molti siti riescono a visualizzare il menù fisso responsive senza problemi, per questo ho pensato a qualche errore nel mio codice o un approccio diverso. Qualche dritta?
 
Discussioni simili
Autore Titolo Forum Risposte Data
M [HTML/JAVASCRIPT] Problema Blocco Menù HTML e CSS 0
G menù a tendina con HTML e Javascript Javascript 3
F Creare elementi html con javascript Javascript 0
Shyson Meglio Javascript o HTML? Javascript 4
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
Domenico_Falco1 [Javascript] [HTML] Campi form con sfondo imposto dal browser Javascript 5
Giacomo Boccherini [Javascript] [HTML] Hover Javascript 1
T [Javascript] Richiamare un file.js (iframe) in html Javascript 1
Emix [Javascript] Somma con array input HTML Javascript 1
S [Javascript] [HTML] App incorpora pagina web - Come impedirlo? Javascript 0
K [Javascript] [HTML] Invertire colori alternati in tabella Javascript 3
D [Javascript] [HTML] Inserire slash dopo 3 numeri Javascript 5
M [Javascript] [HTML] link interno Javascript 1
N [Javascript] [HTML] Scelta di una select e compilazione automatica delle restanti Javascript 0
V [Javascript] [HTML] Attivazione nuovi campi di input Javascript 2
D [Javascript] [HTML] Evidenziare testo di una text Javascript 1
D [Javascript] [HTML] Insertimento audio Javascript 8
S [Javascript] [HTML] creare stringhe di riferimento da riutilizzare Javascript 5
C [Javascript] [HTML] È possibile "puntare" un iframe? Javascript 14
M [Javascript] [HTML] come aumentare il valore di una progress bar quando si preme un bottone Javascript 1
W [Javascript] Eseguire script residente nel sistema da html remota Javascript 0
Marcox360 Tris con HTML e JavaScript Javascript 0
C [Javascript] [HTML] Problemi: Overlay, Banner, Menu Javascript 4
A [Javascript] NodeJs e HTML Javascript 2
D [Javascript] [HTML] Countdown su Mobirise di 24 ore relative per ogni utente. Javascript 4
C [Javascript] cambio dinamico riferimento elemento html Javascript 2
V Passaggio codice html a javascript Javascript 8
A [Javascript] [HTML] RISOLTO...Allungare un box all'apertura della pagina No Mouse over Javascript 9
A [Javascript] Passare variabile tra pagine html diverse Javascript 13
Monz94 [Javascript] [HTML] Creare Checkbox o Radio con Immagini Javascript 0
S [Javascript] [HTML] problema nella stampa degli elementi della pagina Javascript 3
zammaeng [Javascript] [HTML] globo 3D Javascript 5
trattorino [Javascript] [HTML] risultato imput dentro text area Javascript 2
trattorino [Javascript] [PHP] due righe su sorgente html Javascript 3
C [Javascript] HTML form attributes: combining charset with enctype HTML e CSS 4
R [Javascript] [HTML] [PHP] Javascript 2
U [Javascript] [HTML] doppio click Javascript 18
S [Javascript] Slider html: Mostrare immagini su 4 colonne Javascript 20
A [Javascript] [HTML] Gestire una pagina esterna con 2 iframe Javascript 4
S [Javascript] Sostituire elemento HTML preso randomicamente dentro array Javascript 1
D [Javascript] Come creare un equalizzatore HTML collegato a files audio Javascript 1
asevenx [Javascript] [HTML] personalizzare stili input select Javascript 5
romeocharly errore del codice html con javascript durante ottimizzazione websitex5 Javascript 7
R Javascript e html - estrazione EXIF da jpg con link per geolocalizzazione google maps Javascript 0
A [CERCO] cerco esperto di codici HTML e JavaScript per lavorare ad 1 applicazione Offerte e Richieste di Lavoro e/o Collaborazione 1
U Far partire una funzione JavaScript premendo bottone in html Javascript 7
Devil-94 Javascript: script che permetta di inserire immagini in un certo elemento html. Javascript 2
I Pubblicare un sito realizzato con html, css e javascript Webdesign e Grafica 13

Discussioni simili