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:
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>
 
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%;
}
 
con firefox da pagina bianca
i link alle immagini devono essere sbagliati
cmq gli do un occhiata, lascialo online
 
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...;-)
 
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 ;)
 
[RISOLTO] Menu con puntatore mobile

ti ringrazio tantissimo.
Funziona tutto alla perfezione.
Grazie davvero!!!!! Posso passare alla prossima fase di questo lavoro.
Big!!!!
 
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