problema con ritardo dropdown

**alx17** · 06-12-2012, 18:31

Scusami ancora Ro team

Ho appena notato che l'effetto di discesa rallentata della tendina non si ha al primo caricamento della pagina, ma soltanto quando vi si passa con il mouse per la seconda volta.

Saresti così gentile da aiutarmi in quest'ultima correzione.

Ti ringrazio in anticipo.

alx17

**RoTeam** · 06-12-2012, 19:48

Originariamente inviato da alx17
Scusami ancora Ro team

Ho appena notato che l'effetto di discesa rallentata della tendina non si ha al primo caricamento della pagina, ma soltanto quando vi si passa con il mouse per la seconda volta.

Saresti così gentile da aiutarmi in quest'ultima correzione.

Ti ringrazio in anticipo.

alx17

A me funziona sempre anche al primo caricamento se ci vado sopra col mouse

, hai fatto qualche modifica o intendi altro?

Se hai fatto delle modifiche postale

**alx17** · 06-12-2012, 20:32

No nessuna modifica..., perlomeno non intenzionalmente.

Posto nuovamente il tutto con il tuo ultimo script.

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Prova con jQuery</title> <link type="text/css" rel="stylesheet" href="prova_style.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> </head> <body> <script type="text/jscript"> $(document).ready(function(){ $('#hormenu li').hover(function(){ var i = $(this).find('ul'); var hb = i.height(); i.stop(true); var h = i.css('height','auto').height(); i.css('height',hb); i.animate({'height':h},500); }, function(){ $(this).find('ul').stop(); $(this).find('ul').animate({'height':'0px'},500); }); }); </script> <div id="hormenu">  <ul>[*]Home <ul>[*]Homepage[*]a[*]b[*]c[*]d[*]e[/list][*]Offerte <ul>[*]a[*]b[*]c[/list][/list]</div> </body> </html>

Aspetto tue notizie..

alx17

**RoTeam** · 06-12-2012, 20:35

Originariamente inviato da alx17
No nessuna modifica..., perlomeno non intenzionalmente.

Posto nuovamente il tutto con il tuo ultimo script.

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Prova con jQuery</title> <link type="text/css" rel="stylesheet" href="prova_style.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> </head> <body> <script type="text/jscript"> $(document).ready(function(){ $('#hormenu li').hover(function(){ var i = $(this).find('ul'); var hb = i.height(); i.stop(true); var h = i.css('height','auto').height(); i.css('height',hb); i.animate({'height':h},500); }, function(){ $(this).find('ul').stop(); $(this).find('ul').animate({'height':'0px'},500); }); }); </script> <div id="hormenu">  <ul>[*]Home <ul>[*]Homepage[*]a[*]b[*]c[*]d[*]e[/list][*]Offerte <ul>[*]a[*]b[*]c[/list][/list]</div> </body> </html>

Aspetto tue notizie..

alx17

Io l'ho adattato al css postato sopra, quindi per una paginetta di questo genere

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Prova con jQuery</title>
<link rel="stylesheet" href="stile.css" type="text/css" media="screen" />
<link type="text/css" rel="stylesheet" href="prova_style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

<body>

<script type="text/javascript">
$(document).ready(function(){
    $('#hormenu li').hover(function(){
        var i = $(this).find('ul');
        var hb = i.height();
        i.stop(true);
        var h = i.css('height','auto').height();
        i.css('height',hb);
        i.animate({'height':h},500);
    }, function(){
        $(this).find('ul').stop();
         $(this).find('ul').animate({'height':'0px'},500);
    });
});
</script>


<div id="hormenu"> 

<ul> 
[*]Home
<ul> [*]Homepage[*]a[*]b[*]c[*]d[*]e[*]a[*]b[*]c[*]d[*]e[/list]
 
[*]Offerte
<ul> [*]a[*]b[*]c[/list]
 
[/list]

</div>

</body>
</html>

<style>
    /* inizio css hormenu*/

div#hormenu {
color : #FFFFFF;
font : bold 13px Arial, Verdana, Geneva, Helvetica, sans-serif;
width: 860px; 
float: left; 
margin-top: 15px; 
padding: 0;
background: #336600;
}

div#hormenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}

div#hormenu li {
width:286px;
float:left;
margin: 0;
padding: 0;
border-top: 1px solid silver;
border-bottom: 1px solid silver;
color:#FFFFFF;
}

div#hormenu a {
display: block;
padding: 5px;
color: #FFFFFF;
text-decoration: none;
text-shadow: 2px 2px 2px #333;
}

div#hormenu a:hover {
background-color: #336600;
color: #FFFFFF;
text-decoration: underline;
}

div#hormenu li ul {
    font : 12px Arial, Verdana, Geneva, Helvetica, sans-serif;
display: block;
position: absolute;
z-index:1;
padding: 0;
width:180px;
margin: 0 0 0 50px;
background: #336600;
border-bottom: 1px solid silver;
 height:0px;
}

div#hormenu li li {
border: none;
width: 180px;
}

div#hormenu li li a {padding: 2px 2px 2px 10px;}

/* fine css hormenu*/
</style>

O per lo meno a dei menu chiusi all'inizio e non aperti

**alx17** · 06-12-2012, 21:07

Ciao.

Scusami tanto ma in effetti non mi ero reso conto che avevi fatto delle piccole modifiche al codice css e quindi avevo copiato solo l'html con lo script che continuava a darmi quel problema.

Ora però ne sorge un altro (..e grazie in anticipo per la tua santa pazienza

)

Avendo il codice css in un file esterno, per comodità ho postato nei miei primi post solo la parte di questo riguardante il div hormenu (quello cioè del menù a tendina) e non quello del body.

Purtroppo il body prevede uno sfondo verde e, su tale sfondo, il menu navigazione al caricamento appare con i link visibili (almeno sul mo browser) quando invece dovrebbero apparire solo al passaggio del mouse). Questi poi spariscono quando ci si passa sopra per la prima volta.

Per chiarezza riposto l'html con i css annidati (anche del body).

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Prova con jQuery</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> </head> <body> <style>body { background : #2C7F02; color : #FFFFFF; font : 12px Arial, Verdana, Geneva, Helvetica, sans-serif; text-align : center; }</style> <script type="text/jscript"> $(document).ready(function(){ $('#hormenu li').hover(function(){ var i = $(this).find('ul'); var hb = i.height(); i.stop(true); var h = i.css('height','auto').height(); i.css('height',hb); i.animate({'height':h},500); }, function(){ $(this).find('ul').stop(); $(this).find('ul').animate({'height':'0px'},500); }); }); </script> <div id="hormenu">  <ul>[*]Home <ul>[*]Homepage[*]a[*]b[*]c[*]d[*]e[/list][*]Offerte <ul>[*]a[*]b[*]c[/list][/list]</div> <style> /* inizio css hormenu*/ div#hormenu { color : #FFFFFF; font : bold 13px Arial, Verdana, Geneva, Helvetica, sans-serif; width: 860px; float: left; margin-top: 15px; padding: 0; background: #336600; } div#hormenu ul { margin: 0; padding: 0; list-style-type: none; } div#hormenu li { width:286px; float:left; margin: 0; padding: 0; border-top: 1px solid silver; border-bottom: 1px solid silver; color:#FFFFFF; } div#hormenu a { display: block; padding: 5px; color: #FFFFFF; text-decoration: none; text-shadow: 2px 2px 2px #333; } div#hormenu a:hover { background-color: #336600; color: #FFFFFF; text-decoration: underline; } div#hormenu li ul { font : 12px Arial, Verdana, Geneva, Helvetica, sans-serif; display: block; position: absolute; z-index:1; padding: 0; width:180px; margin: 0 0 0 50px; background: #336600; border-bottom: 1px solid silver; height:0px; } div#hormenu li li { border: none; width: 180px; } div#hormenu li li a {padding: 2px 2px 2px 10px;} /* fine css hormenu*/ </style> </body> </html>

Grazie ancora per il tuo aiuto.

**RoTeam** · 06-12-2012, 21:14

codice:

div#hormenu li ul {  overflow:hidden; font : 12px Arial, Verdana, Geneva, Helvetica, sans-serif; display: block; position: absolute; z-index:1; padding: 0; width:180px; margin: 0 0 0 50px; background: #336600; border-bottom: 1px solid silver; height:0px; }

Aggiungi semplicemente overflow:hidden; sull'ul e non dovresti più avere quel bug

**alx17** · 06-12-2012, 21:24

Funziona alla perfezione..!!!
Scusami ma sono alle prime armi dei vari codici e a volte non è facile...ma c'è tanta voglia di imparare...

Grazie mille e ancora per il tuo preziosissimo aiuto..!!!!

alx17

Discussione: problema con ritardo dropdown

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio