Menu con puntatore mobile

ciccioroky

Nuovo Utente
31 Lug 2012
25
0
1
Ciao a tutti.
Ho trovato uno script in jquery per creare un menu con un puntatore mobile.
Il problema che ha questo script ve lo faccio presente con un esempio:
sono con il cursore del mouse sul primo elemento della lista e giustamente il puntatore si trova nel primo elemento della lista. Ora mi sposto con il cursore del mouse sul quinto elemento lista ma il puntatore non si muove diretto verso l'elemento su cui ho il mouse ma fa una pausa sul secondo, terzo e quarto elemento lista prima di arrivare al quinto.
Vorrei che il puntatore andasse subito all'elemento lista selezionato invece che passarsi tutti gli elementi che incontra.

Il menu è una lista di questo tipo
Codice:
<div id="navigation">
	<ul class="lista_menu">
    	<div id="ingresso"></div>
        <li id="who-we-are" class="current"></li>
        <li id="graphic-design"></li>
        <li id="illustartion"></li>
        <li id="dress-art"></li>
        <li id="wedding"></li>
        <li id="shop"></li>
        <li id="store-showcase"></li>
    	<div id="coda"></div>
	</ul>
        <div id="lava">
			<div id="lava-cursor"></div>
		</div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="barra_menu/jquery.lava.js"></script>
<script type="text/javascript">
$(function() {

	$('#navigation').lava();

});
</script>

e lo scrpit che uso è questo

Codice:
(function($) {


	$.fn.lava = function(options) {
	
		var that = this;
		
		var settings = {
		
			container: '.lista_menu',
			cursor: '#lava-cursor',
			current: '.current',
			speed: 800
		
		};
		
		options = $.extend(settings, options);
		
		return that.each(function() {
		
			$(options.cursor).css('left', $(options.container).find(options.current).position().left).fadeIn(options.speed);
			
			$('li', $(options.container)).each(function() {
			
				var $li = $(this);
				
				$li.mouseover(function() {
				
					$(options.cursor).animate({
						left: $li.position().left
					}, options.speed);
				
				
				});
			
			
			});
		
		
		});
	
	
	};


})(jQuery);

Spero qualcuno possa aiutarmi.
Essendo alle prime armi con questo linguaggio non sono ferratissimo.

Grazie
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
ho provato l'esempio che hai postato seguendo questo articolo
ma non ho notato la pausa di cui parli
prova a postare anche il css cosi faccio delle prove direttamente sul tuo codice
HTML:
<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body {
                margin: 0 auto;
                padding: 2em 0;
            }
            #navigation {
                height: 3em;
                background: #f0f0f0;
                border-top: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
                position: relative;
            }
            #navigation ul {
                margin: 0.4em 0 0 0;
                padding: 0;
                list-style: none;
                height: 2.6em;
                font: 90% 'Open Sans', sans-serif;
            }
            #navigation li {
                float: left;
                height: 100%;
                display: block;
                margin-right: 2em;
                cursor: pointer;
            }
            #navigation a {
                float: left;
                width: 100%;
                height: 100%;
                color: #333;
                text-transform: uppercase;
                text-align: center;
                line-height: 2.6;
                text-decoration: none;
                display: block;
            }
            #navigation a:hover {
                color: #d34545;
            }
            #lava {
                width: 100%;
                height: 0.2em;
                background: #ccc;
                position: relative;
            }
            #lava-cursor {
                width: 5.4em;
                height: 100%;
                background: #d34545;
                display: none;
                position: relative;
            }
        </style>
    </head>
    <body>
        <div id="navigation">
            <div id="lava">
                <div id="lava-cursor"></div>
            </div>
            <ul class="lista_menu">
                <div id="ingresso"></div>
                <li id="who-we-are" class="current">who-we-are</li>
                <li id="graphic-design">graphic-design</li>
                <li id="illustartion">illustartion</li>
                <li id="dress-art">dress-art</li>
                <li id="wedding">wedding</li>
                <li id="shop">shop</li>
                <li id="store-showcase">store-showcase</li>
                <div id="coda"></div>
            </ul>
        </div>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            (function($) {
                $.fn.lava = function(options) {
                    var that = this;
                    var settings = {
                        container: '#navigation',
                        cursor: '#lava-cursor',
                        current: '.current',
                        speed: 800
                    };
                    options = $.extend(settings, options);
                    return that.each(function() {
                        if($(options.current, $(options.container)).length) {
                            $(options.cursor).css('left', $(options.container).find(options.current).position().left).fadeIn(options.speed);
                        } else {
                            $(options.cursor).fadeIn(options.speed);
                        }
                        $('li', $(options.container)).each(function() {
                            var $li = $(this);
                            $li.mouseover(function() {
                                $(options.cursor).stop(true, true).animate({
                                    left: $li.position().left
                                }, options.speed);
                            });
                            $li.mouseout(function() {
                                if($(options.current, $(options.container)).length) {
                                    $(options.cursor).stop(true, true).animate({
                                        left: $(options.current, $(options.container)).position().left
                                    }, options.speed);
                                }
                            });
                        });
                    });
                };
            })(jQuery);    
        </script>
        <script type="text/javascript">
            $(function() {
                $('#navigation').lava();
            });
        </script>
    </body>
</html>
 

ciccioroky

Nuovo Utente
31 Lug 2012
25
0
1
csss

Ciao e grazie mille per il tuo aiuto.
E' proprio quello l'esempio che ho modificato secondo le mie esigenze.
Puoi vedere un demo del mio lavoro http://www.tmat.eu/SITI/prove/barra_menu/

e poi questo è il css
Codice:
img a {
	border:0px;
}

#navigation {
	padding:0px;
	margin:0px;
	position:absolute;
	width:50%;
	height:23%;
	top:42%;
	left:25%;
	z-index:99999999999999999999999;
	/*width:1200px;
	height:231px;*/
}

#navigation ul {
	padding:0px;
	margin:0px;
	position:relative;
	list-style: none;
	width:100%;
	height:100%;
	z-index:10;
}

#lava-cursor {
	top:0px;
	position:absolute;
	height:72%;
	width:11%;
	left:16%;
	z-index:0;
}
	
#ingresso, 
#who-we-are, 
#graphic-design, 
#illustartion, 
#dress-art, 
#wedding, 
#shop, 
#store-showcase, 
#coda {
	position:relative;
	float:left;
	/*height:159px;*/
	top:15px;
	height:47%;
	z-index:10;
}
#ingresso {
	width:16%;
}
#who-we-are {
	width:13%;
}
#graphic-design {
	width:10%;
}
#illustartion {
	width:13%;
}
#dress-art {
	width:12%;
}
#wedding {
	width:10%;
}
#shop {
	width:10%;
}
#store-showcase {
	width:11%;
}
#coda {
	width:4%;
}
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
con firefox da pagina bianca
i link alle immagini devono essere sbagliati
cmq gli do un occhiata, lascialo online
 

ciccioroky

Nuovo Utente
31 Lug 2012
25
0
1
avevo scordato di modificare i link alle immagini.
Se ti posizioni ad esempio sul secondo elemento il puntatore rosso sarà sul secondo elemento ma se poi, continuando a tenere il mouse sempre all'interno dei "confini" della lista ul, vai sul quarto elemento lista il puntatore si ferma prima sul terzo e poi passa al quarto.
facci caso...;-)
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Si ho notato

in jquery tutte le animazioni vengono messe in coda ed eseguite una dopo l'altra e nel tuo script ad ogni mouseover sul tag li di fatto crei un animazione che si accoda
La soluzione è intervenire sulla coda degli effetti

dopo un furioso mal di testa sono arrivato a questa soluzione:

modifica nel file jquery.lava.js queste righe

Codice:
$li.mouseover(function() {
     $(options.cursor).animate({
          left: $li.position().left
}, options.speed);
				
});

aggiungendo
Codice:
$(options.cursor).queue("fx",[]);
che serve a svuotare la coda

Codice:
$li.mouseover(function() {
     $(options.cursor).queue("fx",[]);
     $(options.cursor).animate({
          left: $li.position().left
}, options.speed);
				
});

e speriamo che funzioni ;)
 

ciccioroky

Nuovo Utente
31 Lug 2012
25
0
1
[RISOLTO] Menu con puntatore mobile

ti ringrazio tantissimo.
Funziona tutto alla perfezione.
Grazie davvero!!!!! Posso passare alla prossima fase di questo lavoro.
Big!!!!
 

ciccioroky

Nuovo Utente
31 Lug 2012
25
0
1
Sfondo div che cambia con animazione

Ciao!
Riapro questo post per aggiungere una funzione al mio menù:
Vorrei che quando mi posizioni sull'elemento li, la background-image di un div cambi a seconda della mia posizione.
Esempio:
Il menù ha 6 elementi li, ad ogni elemento corrisponde una jpg.
Se mi posizione sull'elemento 2 il div mostrerà 2.jpg ecc.

Ho già provato con css3 ma non è affatto dinamico e poi ci sono dei problemi con posizionamento di altri div.
Vorrei farla in Jquery in modo da avere tutto piu fluido e magari anche con effetto dissolvenza.

Grazie grazie ancora
 
Discussioni simili
Autore Titolo Forum Risposte Data
T problemi con dati menu a tendina HTML e CSS 2
D menu con submenu orizzontale HTML e CSS 0
P Sub menu con Collapse. Javascript 0
F Dropdown menu con tabella PHP 33
M Inviare variabili da menu a tendina a pagina php con post PHP 6
M [PHP] Selezione da menu a discesa con 2 variabili PHP 0
M [PHP] Creare un menu a tendina con pdo PHP 18
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
P [HTML] Problema con menu orizzontale a tendina per sito web HTML e CSS 17
U [PHP] Selezione con menu a tendina e recupero selezione PHP 5
A [HTML] Menu con effetto slide down HTML e CSS 0
D Sono disperato: Menu select dinamici con Ajax e PHP PHP 1
D Sono disperato: Menu select dinamici con Ajax e PHP Ajax 2
V [PHP] Menu a tendina con popolamento dati da un db PHP 6
K Problema ancore in pagine diverse con menu fixed HTML e CSS 6
J Bootstrap dropdown menu non funziona con jquery-1.8.2??? jQuery 5
G problema con menu spry dreamweaver Webdesign e Grafica 5
C Link menu che appaiono con onclick Javascript 2
Carlito's Menu con tendina a comparsa al mouseover HTML e CSS 1
asevenx menu a tendina multilivello solo con css HTML e CSS 1
J Menu a tendina con bootstrap 3 HTML e CSS 3
A Menu orizzontale con tendina orizzontale HTML e CSS 10
M sottomenu stessa altezza di menu con voce attiva evidenziata Javascript 3
L Problema onClick con un menu a tendina Javascript 3
A Realizzare un mega menu con css HTML e CSS 2
C Creazione Menu dinamico con Checkbox PHP 0
M menu espandibile con i css con sottolivelli HTML e CSS 2
U Estrazione dati da un db con un menu selezione in cascata PHP 6
R Eliminazione tag da menu a tendina creato con dati prelevati da tabella Mysql PHP 3
andre9004 Dropdown menu con .hover() jQuery 2
L Selezione da database con DropDown Menu e visualizzazione PHP 10
F Problema con Menu Javascript HTML e CSS 1
F problema menu a tendina con explorer HTML e CSS 2
Frank10 Problemino con il menu fisso in fondo pagina ed il solito, explorer HTML e CSS 10
D Menu con immagine a stile DropDown jQuery 0
neo996sps Modifica query PHP con menu a tendina PHP 1
P Menu verticale con subvoci HTML e CSS 1
B Problema di inserimento "menu con css" in pagina web "con tabelle" HTML e CSS 5
F Php Mysql - visualizzare record per anno con menu a tendina PHP 4
I problema con un menu javascript Javascript 4
F Drop Down Menu compatibile con internet explorer HTML e CSS 0
L gestione menu a tendina con cartella PHP 17
J FORM: Menu a tendina con tantissime occorrenze HTML e CSS 0
V url voce menu con parentesi [ ] wordpress WordPress 0
P Menu a discesa con estrazione dati da datbase mysql PHP 21
B menu joomla funzionano solo con IE Joomla 3
A menu con css HTML e CSS 1
T problema con il menu di un blog PHP 3
R Menu' con movieclip e scrolling Flash 0
J menu dinamico a tendina con database PHP 13

Discussioni simili