Salve, ho creato un menu in jquery dove c' è una classe (tab) che segue in orizzontale il mouse lungo il menu.... Dopo che ho finito la grafica ed è tutto perfetto ho messo un bel dropdown in CSS3 (farlo in jquery era troppo complicato xD) solo che ora c' è un bel problema... in pratica se io metto <li class="attivo">Forum il forum si vede nella tab che puoi seguirà il mouse ma se non clicchi niente ritornerà su forum. Ho provato a vedere nel menu.js e c' è una funzione per fare questo.... Qual e il problema? Il problema è che se io passo il mouse nei link che stanno nel dropdown il tab ritorna su forum o si allunga (dipende da quanto è in fondo il dropdown lungo il menu) quando vorrei che quando il mouse è sul dropdown il tab rimane fermo nella classe che contiene il dropdown... potreste darmi una mano?
Ecco i codici:
HTML code:
CSS code:codice:<head> <link href="css/style.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="jquery.js"></script> </head> <body> <div id="container"> <ul id="nav"> <li class="attivo">Blog <li class="sub">Forum <ul>[*]Statistiche di oggi[*]Topic di oggi[*]Topic recenti[/list][*]Staff <ul>[*]Fai parte dello staff[*]Contatta lo staff[/list][*]Top 20 Giochi[*]Disclaimer[*]Donazione[/list]</div> provaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript" src="js/jquery.spasticNav.js"></script> <script type="text/javascript"> $('#nav').spasticNav(); </script> </body> </html>
Javascript code:codice:#container { width: 100%; margin: auto auto; } ul, li { margin: 0; } #blob { background: url(../blob_bg.png) top left repeat-x; position: absolute; z-index: 1; top: 0; -moz-border-radius-topleft: 8px; -moz-border-radius-topright:8px; -webkit-border-top-left-radius:8px; -webkit-border-top-right-radius:8px; border-top-left-radius:8px; border-top-right-radius:8px; border-left: 1px solid #00516f; border-right: 1px solid #00516f; border-top: 1px solid #00516f; } #nav { position: relative; background: #fff; float: left; border-bottom: 4px solid #00516f; height: 35px; } #nav li { float: left; list-style: none; font-size: 13px; height: 34px; } #nav li a { color: #aaa; z-index: 2; position: relative; cursor: pointer; float: left; font-family: helvetica, arial, sans-serif; text-decoration: none; padding-left: 30px; padding-right: 30px; line-height: 35px; width: 100%; font-weight: bold; display: block; } #nav li a:hover { color: #fff; text-shadow: #00516F 0px -1px 0px; font-weight: bold; } .attivo { color: #ffffff; font-weight: bold; } #nav li:hover { position: relative } #nav li.sub:hover > a { border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; } #nav li ul { background: #fff; margin-top: 1px; display: none; } #nav li:hover ul { display: block; position: absolute; } #nav li ul { background: rgba(255,255,255,0.9); padding: 10px 5px; top: 34px; -moz-box-shadow: 0px 0px 8px #191919; -webkit-box-shadow: 0px 0px 8px #191919; box-shadow: 0px 0px 8px #191919; border-radius: 0px 15px 15px 15px; -moz-border-radius: 0px 15px 15px 15px; -webkit-border-radius: 0px 5px 5px 5px; } #nav li ul li a, #nav li ul li a:hover { background: transparent; color: #000; width: 150px; font-size: 0.95em; font-weight: normal; } #nav li ul li a:hover { text-decoration: underline; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; text-shadow: none; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; }
Più i file javascript in allegato i quali jquery.js, jquery.min.js e jquery-ui.min.jscodice:(function($) { $.fn.spasticNav = function(options) { options = $.extend({ overlap : 0, speed : 500, reset : 10, color : '#007fae', easing : 'easeOutExpo' }, options); return this.each(function() { var nav = $(this), currentPageItem = $('.attivo', nav), blob, reset; $('<li id="blob">').css({ width : currentPageItem.outerWidth(), height : currentPageItem.outerHeight() + options.overlap, left : currentPageItem.position().left, top : currentPageItem.position().top - options.overlap / 2, backgroundColor : options.color }).appendTo(this); blob = $('#blob', nav); $('li:not(#blob)', nav).hover(function() { // mouse over clearTimeout(reset); blob.animate( { left : $(this).position().left, width : $(this).width() }, { duration : options.speed, easing : options.easing, queue : false } ); }, function() { // mouse out reset = setTimeout(function() { blob.animate({ width : currentPageItem.outerWidth(), left : currentPageItem.position().left }, options.speed) }, options.reset); }); }); // end each blob = $('#blob', nav); $('#nav li ul', nav).hover(function() { // mouse over clearTimeout(reset); blob.animate( { left : $(this).position().left, width : $(this).width() }, { duration : options.speed, easing : options.easing, queue : false } ); }, function() { // mouse out reset = setTimeout(function() { blob.animate({ width : currentPageItem.outerWidth(), left : currentPageItem.position().left }, options.speed) }, options.reset); }); }; })(jQuery);
Rispondi quotando