75 messaggi dal 16 aprile 2008
Ciao,
ho il mio menu fatto in questo modo:

<!--navigation-->
<div class="top-nav">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<img alt="" src="../images/home/loghi/pqlogo_w.png" height="36" width="90">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-center cl-effect-15">
<li><a href="#about" class="scroll" data-hover="About">About</a></li>
<li><a href="#collect" class="scroll" data-hover="Collections">Collections</a></li>
<li><a href="#store" class="scroll" data-hover="Store"><img alt="" src="img.jpg"></a></li>
</ul>
</div>
</div>
</nav>
</div>
<!-- script-for sticky-nav -->
<script>
$(document).ready(function() {
var navoffeset=$(".top-nav").offset().top;
$(window).scroll(function(){
var scrollpos=$(window).scrollTop();
if(scrollpos >=navoffeset){
$(".top-nav").addClass("fixed");
}else{
$(".top-nav").removeClass("fixed");
}
});

});
</script>
<!-- /script-for sticky-nav --><!--navigation-->

Dove come ultima voce ho inserito per necessità, un logo "img.jpg".

E' il toggle menu che utilizzo per la versione mobile del sito.
Selezioni un'opzione, scrolla fino alla sezione impostata e si chiude il menu.
Ecco, quando clicco su le altre opzioni, ok, scrolla e via.
Se clicco su quella "Store" non si muove e tanto meno chiude il menu.

Perché?

Grazie,
Gianni
11.886 messaggi dal 09 febbraio 2002
Contributi
Ciao Gianni,
nella pagina deve esistere una <div> (o altro elemento) che abbia l'attributo id="store". Verifica che ci sia, altrimenti lo scroll non potrà avvenire.

Enjoy learning and just keep making
75 messaggi dal 16 aprile 2008
Ciao Moreno,
scusami ma ti ho dato informazioni errate!!
In realtà lo scroll lo fa bene fino al punto indicato #store ma non mi chiude il menu. Con le altre opzioni sì con questa, che ha l'immagine, no!

Ti spiego, spero, meglio:
1. clicco sulle 3 lineette del toggle menu
2. si apre e seleziono l'opzione
3. scorre fino a quella sezione
4. il menu si chiude automaticamente

Quando, invece, clicco sull'opzione con l'immagine: scrolla, mi porta fino alla sezione ma non si chiude il menu!

Se inserisco qualcosa in data-hover del <a> (esempio data-hover=".....") allora se riesco a cliccare sopra la comparsa di quei puntini, il menu scompare!
Se non metto nulla, quindi data-hover="", allora se clicco su un punto esterno all'immagine (in alto a sinitra ad esempio) il menu si chiude.

Ma non si chiude se ci clicco esattamente sopra!

Non capisco il motivo.
Credo che si risolverebbe tutto se potessi inserire l'immagine nel data-hover ma non so come fare!?

Grazie
Gianni
11.886 messaggi dal 09 febbraio 2002
Contributi
Ciao Gianni,
al solito, posta il link alla pagina in cui si possa osservare quel comportamento (non ricordo il nome del dominio), oppure riproduci la situazione su jsfiddle.

ciao

Enjoy learning and just keep making
75 messaggi dal 16 aprile 2008
Certo,
ecco qua il codice:

<div class="top-nav">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<img alt="" src="../images/home/loghi/pqlogo_w.png" height="36" width="90">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-center cl-effect-15">
<li><a href="#about" class="scroll" data-hover="About">About</a></li>
<li><a href="#collect" class="scroll" data-hover="Collections">Collections</a></li>
<li><a href="#ronarad" class="scroll" data-hover="Ron Arad">Ron Arad</a></li>
<li><a href="#tech" class="scroll" data-hover="Technology">Technology</a></li>
<li><a href="#pqandu" class="scroll" data-hover=""><img src="../images/home/pqandu/peu.png" width="50px"></a></li>
<li><a href="#store" class="scroll" data-hover="Store">Store</a></li>
</ul>
<div class="clearfix"> </div>
</div>
</div>
</nav>
</div>

Se non si capisce qui è la pagina: http://www.pqeyewear.com/mobile/index-new.html
Se provi a cliccare su PQ & U vedrai che scrolla ma non si chiude.

Grazie,
Gianni
75 messaggi dal 16 aprile 2008
...se, invece, in data-hover ci metto, ad esempio "Gianni" il menu funziona perfettamente; mi scrolla e si chiude: www.pqeyewear.com/mobile/index-new-2.html
11.886 messaggi dal 09 febbraio 2002
Contributi
Ciao Gianni,
il problema è questo: se l'elemento in cui si origina il click è il tag <a>, allora tutto funziona normalmente. Se invece il click si origina dal tag <img>, allora no. Non so identificare la causa ma è sicuramente colpa di un'istruzione javascript (bootstrap o altro componente che sta impedendo la propagazione del click).

Una soluzione che puoi adottare è quella di rendere invisibile l'immagine nei confronti degli eventi del mouse (non intendo invisibile agli occhi dell'utente). In questo modo l'origine del click sarà il suo tag <a> contenitore.

Vai così:
<img src="../images/home/pqandu/peu.png" style="pointer-events: none; width:50px;">


Questa è la compatibilità della regola pointer-events, la puoi usare fintanto che non si trova l'origine del problema.
http://caniuse.com/#feat=pointer-events

ciao,
Moreno

Enjoy learning and just keep making
75 messaggi dal 16 aprile 2008
Grande Moreno,
grazie mille.
Così funziona!!
L'unica cosa è che nelle pagine interne il click non gira (o io non sono in grado di farlo funzionare):

<li><a href="index.html#pqandu" class="scroll" data-hover=""><img src="../images/home/pqandu/peu.png" style="pointer-events: none; width:50px;"></a></li>

o anche se metto href="www.xxxx.com"

Sicuramente, cerchiamo di risolvere alla fonte ma per ora, causa solita urgenza, sarebbe bene risolvere anche così.

Grazie ancora,
Gianni.

Torna al forum | Feed RSS

ASPItalia.com non è responsabile per il contenuto dei messaggi presenti su questo servizio, non avendo nessun controllo sui messaggi postati nei propri forum, che rappresentano l'espressione del pensiero degli autori.