Ho creato un menù a tendina con questo codice:
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="AlterVista - Editor HTML"/>
<title></title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<nav id="myNav">
<ul>
<li><a href="/home.html" title="HOME">HOME</a></li>
<li><a href="/mappa_sito2.html" title="MAPPA DEL SITO">mappa del sito</a>
</li>
<li><a href="/contatti.html" title="CONTATTI">contatti</a></li>
<li><a href="/chi_siamo.html" title="CHI SIAMO">chi siamo</a></li>
<li><a href="/I-NOSTRI_PRODOTTI/" title="I NOSTRI PRODOTTI">i nostri prodotti</a>
<ul>
<li><a href="/I-NOSTRI_PRODOTTI/fruttasecca.html" title="FRUTTA SECCA">frutta secca</a></li>
<li><a href="/I-NOSTRI_PRODOTTI/olio_extra_vergine/index.html" title="OLIO EXTRA VERGINE">olio extra vergine </a></li>
</li>
</ul>
<li><a href="/lasquadra.html" title="LA SQUADRA">la squadra</a></li>
<li><a href="/notizie_piante/" title="PIANTE E DINTORNI">piante e dintorni </a>
<ul>
<li><a href="/notizie_piante/piante/index.html" title="PIANTE">piante</a> </li>
<li><a href="/notizie_piante/VARIETA_DELLA_FRUTTA/index.html" title="VARIETÀ DELLA FRUTTA ">varietà della frutta</a></li>
<li><a href="/notizie_piante/malattie_delle_piante/malattie.html" title="MALATTIE DELLE PIANTE">malattie delle piante</a></li>
<li><a href="/notizie_piante/insetti/" title="INSETTI PER LO PIÙ DANNOSI PER LE PIANTE ">insetti per lo più dannosi per le piante </a></li>
</ul>
<li><a href="/annunci/" title="ANNUNCI">annunci</a>
<ul>
<li><a href="/annunci/annunci_vari/ANNUNCI_VARI.html" title="ANNUNCI VARI">annunci vari</a> </li>
<li><a href="/annunci/ANNUNCI_TERRENI/ANNUNCI_TERRENI.html" title="ANNUNCI TERRENI">annunci terreni</a></li>
<li><a href="/annunci/ANNUNCI_MEZZI_AGRICOLI/annunci_mezzi_agricoli.html" title="ANNUNCI MEZZI AGRICOLI">annunci mezzi agricoli</a></li>
</ul> </li>
<li><a href="/gallery/index.php" target="_blank" title="GALLERIA IMMAGINI">galleria immagini</a></li>
</ul>
</nav>
<div class="content">
<p>
</div>
<style type="text/css">
nav { display:block; margin:0 auto 20px; border:1px solid #222; position:relative; background-color:#6a6a6a; font:16px Tahoma, Sans-serif; }
nav ul { padding:0; margin:0; }
nav li { position:relative; float:left; list-style-type:none; }
nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
nav li a { display:block; padding:10px 20px; border-left:1px solid #999; border-right:1px solid #222; color:#eee; text-decoration:none; }
nav li a:focus { outline:none; text-decoration:underline; }
nav li:first-child a { border-left:none; }
nav li.last a { border-right:none; }
nav a span { display:block; float:right; margin-left:5px; }
nav ul ul { display:none; width:100%; position:absolute; left:0; background:#6a6a6a; }
nav ul ul li { float:none; }
nav ul ul a { padding:5px 10px; border-left:none; border-right:none; font-size:14px; }
nav ul ul a:hover { background-color:#555; }
.borderradius nav { -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; }
.cssgradients nav { background-image:-moz-linear-gradient(0% 22px 90deg, #222, #999); background-image:-webkit-gradient(linear, 0% 0%, 0% 70%, from(#999), to(#222)); }
.boxshadow.rgba nav { -moz-box-shadow:2px 2px 2px rgba(0,0,0,.75); -webkit-box-shadow:2px 2px 2px rgba(0,0,0,.75); box-shadow:2px 2px 2px rgba(0,0,0,.75); }
.cssgradients nav li:hover { background-image:-moz-linear-gradient(0% 100px 90deg, #999, #222); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#555)); }
.borderradius nav ul ul { -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; }
.boxshadow.rgba nav ul ul { background-color:rgba(0,0,0,0.8); -moz-box-shadow:2px 2px 2px rgba(0,0,0,.8); -webkit-box-shadow:2px 2px 2px rgba(0,0,0,.8); box-shadow:2px 2px 2px rgba(0,0,0,.8); }
.rgba nav ul ul li { border-left:1px solid rgba(0,0,0,0.1); border-right:1px solid rgba(0,0,0,0.1); }
.rgba nav ul ul a:hover { background-color:rgba(85,85,85,.9); }
.borderradius.rgba nav ul ul li.last { border-left:1px solid rgba(0,0,0,0.1); border-bottom:1px solid rgba(0,0,0,0.1); -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; }
.csstransforms ul a span { -moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg); }
</style>
<script type= text/javascript >
jQuery(document).on("ready", function () {
var nav = $( "#myNav" );
nav.find("li").each(function () {
if ($(this).find("ul").length > 0) {
$("").text("^"). appendTo($(this).children(":first")); $(this).on("mouseenter", function () { $(this).find("ul"). stop(true, true). slideDown( ); }); $(this).on("mouseleave", function () { $(this).find("ul"). stop(true, true). slideUp( ); }); } }); });
</script >
</body>
</html>
che funziona benissimo ma quando lo inserisco in un file html con questo codice:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$.get("/COMPONENDI/menu/menu.html", function(response) {
$("#menu").html(response);
});
});
</script>
<div id="menu"></div>
La tendina che dovrebbe uscire col passaggio del mouse non esce.
PERCHÉ?
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="AlterVista - Editor HTML"/>
<title></title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<nav id="myNav">
<ul>
<li><a href="/home.html" title="HOME">HOME</a></li>
<li><a href="/mappa_sito2.html" title="MAPPA DEL SITO">mappa del sito</a>
</li>
<li><a href="/contatti.html" title="CONTATTI">contatti</a></li>
<li><a href="/chi_siamo.html" title="CHI SIAMO">chi siamo</a></li>
<li><a href="/I-NOSTRI_PRODOTTI/" title="I NOSTRI PRODOTTI">i nostri prodotti</a>
<ul>
<li><a href="/I-NOSTRI_PRODOTTI/fruttasecca.html" title="FRUTTA SECCA">frutta secca</a></li>
<li><a href="/I-NOSTRI_PRODOTTI/olio_extra_vergine/index.html" title="OLIO EXTRA VERGINE">olio extra vergine </a></li>
</li>
</ul>
<li><a href="/lasquadra.html" title="LA SQUADRA">la squadra</a></li>
<li><a href="/notizie_piante/" title="PIANTE E DINTORNI">piante e dintorni </a>
<ul>
<li><a href="/notizie_piante/piante/index.html" title="PIANTE">piante</a> </li>
<li><a href="/notizie_piante/VARIETA_DELLA_FRUTTA/index.html" title="VARIETÀ DELLA FRUTTA ">varietà della frutta</a></li>
<li><a href="/notizie_piante/malattie_delle_piante/malattie.html" title="MALATTIE DELLE PIANTE">malattie delle piante</a></li>
<li><a href="/notizie_piante/insetti/" title="INSETTI PER LO PIÙ DANNOSI PER LE PIANTE ">insetti per lo più dannosi per le piante </a></li>
</ul>
<li><a href="/annunci/" title="ANNUNCI">annunci</a>
<ul>
<li><a href="/annunci/annunci_vari/ANNUNCI_VARI.html" title="ANNUNCI VARI">annunci vari</a> </li>
<li><a href="/annunci/ANNUNCI_TERRENI/ANNUNCI_TERRENI.html" title="ANNUNCI TERRENI">annunci terreni</a></li>
<li><a href="/annunci/ANNUNCI_MEZZI_AGRICOLI/annunci_mezzi_agricoli.html" title="ANNUNCI MEZZI AGRICOLI">annunci mezzi agricoli</a></li>
</ul> </li>
<li><a href="/gallery/index.php" target="_blank" title="GALLERIA IMMAGINI">galleria immagini</a></li>
</ul>
</nav>
<div class="content">
<p>
</div>
<style type="text/css">
nav { display:block; margin:0 auto 20px; border:1px solid #222; position:relative; background-color:#6a6a6a; font:16px Tahoma, Sans-serif; }
nav ul { padding:0; margin:0; }
nav li { position:relative; float:left; list-style-type:none; }
nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
nav li a { display:block; padding:10px 20px; border-left:1px solid #999; border-right:1px solid #222; color:#eee; text-decoration:none; }
nav li a:focus { outline:none; text-decoration:underline; }
nav li:first-child a { border-left:none; }
nav li.last a { border-right:none; }
nav a span { display:block; float:right; margin-left:5px; }
nav ul ul { display:none; width:100%; position:absolute; left:0; background:#6a6a6a; }
nav ul ul li { float:none; }
nav ul ul a { padding:5px 10px; border-left:none; border-right:none; font-size:14px; }
nav ul ul a:hover { background-color:#555; }
.borderradius nav { -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; }
.cssgradients nav { background-image:-moz-linear-gradient(0% 22px 90deg, #222, #999); background-image:-webkit-gradient(linear, 0% 0%, 0% 70%, from(#999), to(#222)); }
.boxshadow.rgba nav { -moz-box-shadow:2px 2px 2px rgba(0,0,0,.75); -webkit-box-shadow:2px 2px 2px rgba(0,0,0,.75); box-shadow:2px 2px 2px rgba(0,0,0,.75); }
.cssgradients nav li:hover { background-image:-moz-linear-gradient(0% 100px 90deg, #999, #222); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#555)); }
.borderradius nav ul ul { -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; }
.boxshadow.rgba nav ul ul { background-color:rgba(0,0,0,0.8); -moz-box-shadow:2px 2px 2px rgba(0,0,0,.8); -webkit-box-shadow:2px 2px 2px rgba(0,0,0,.8); box-shadow:2px 2px 2px rgba(0,0,0,.8); }
.rgba nav ul ul li { border-left:1px solid rgba(0,0,0,0.1); border-right:1px solid rgba(0,0,0,0.1); }
.rgba nav ul ul a:hover { background-color:rgba(85,85,85,.9); }
.borderradius.rgba nav ul ul li.last { border-left:1px solid rgba(0,0,0,0.1); border-bottom:1px solid rgba(0,0,0,0.1); -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; }
.csstransforms ul a span { -moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg); }
</style>
<script type= text/javascript >
jQuery(document).on("ready", function () {
var nav = $( "#myNav" );
nav.find("li").each(function () {
if ($(this).find("ul").length > 0) {
$("").text("^"). appendTo($(this).children(":first")); $(this).on("mouseenter", function () { $(this).find("ul"). stop(true, true). slideDown( ); }); $(this).on("mouseleave", function () { $(this).find("ul"). stop(true, true). slideUp( ); }); } }); });
</script >
</body>
</html>
che funziona benissimo ma quando lo inserisco in un file html con questo codice:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$.get("/COMPONENDI/menu/menu.html", function(response) {
$("#menu").html(response);
});
});
</script>
<div id="menu"></div>
La tendina che dovrebbe uscire col passaggio del mouse non esce.
PERCHÉ?
