APPUNTI: luglio 2014

all'interno di $function
/*menu drop down >>>*/
$('#menu li ul').css({
display: "none",
left: "auto"
});
$('#menu li').hover(function() {
$(this)
.find('ul')
.stop(true, true)
.slideDown('slow', 'easeOutBounce');
}, function() {
$(this)
.find('ul')
.stop(true,true)
.hide();
});
/*<<<<<menu drop down*/

su un foglio di stile
#barMenu {
position: relative;
height:30px;
top: 5px;
background-image: url(./img/sfondoBarMenu.png);
background-repeat:repeat-x;
background-position: 0px -34px;
}

#menu {
position: absolute;
top: 0px;
left: 0;
}

#menu, #menu ul {
padding: 0;
margin: 0;
list-style: none;

}

#menu > li > a{
text-align:center;
text-decoration: none;
}

#menu li {
float: left;

}

#menu a {
display: block;
padding: 5px;
width: 130px;
border-style:solid;
border-width: 1px 1px 1px 1px ;
text-decoration: none;
}

#menu li ul {
position: absolute;
left: -999em;
width: 140px;

}

#menu li:hover ul, #menu li ul:hover {
left:auto;

}

#menu > li:hover {
background: #333;
box-shadow: 0px 0px 15px #ffffff;
}

#menu li ul li {
background: #333;

}
#menu li ul li:hover {
background: #eee;
color: #f00;
box-shadow: 0px 0px 15px #ffffff;
}

su html


<div id="barMenu">

<nav role="navigation">
<ul id="menu">
<li><a href="http://www.usc-calcroci.it/index.php?pageId=home">HOME</a>
</li><li><a href="http://www.usc-calcroci.it/#">LA SQUADRA</a><ul style="left: auto; display: none;"><li><a href="http://www.usc-calcroci.it/index.php?pageId=direttivo">DIRETTIVO</a></li>
<li><a href="http://www.usc-calcroci.it/index.php?pageId=atleti14&tipo=php">ATLETI</a></li>
<li><a href="http://www.usc-calcroci.it/index.php?pageId=storia">STORIA</a></li>
<li><a href="http://www.usc-calcroci.it/index.php?pageId=contatti">CONTATTI</a></li>
<li><a href="http://www.usc-calcroci.it/index.php?pageId=sponsor">SOSTENITORI</a></li>
</ul></li><li><a href="http://www.usc-calcroci.it/#">STAGIONE 14</a><ul style="left: auto; display: none;"><li><a href="http://www.usc-calcroci.it/documenti/2014/stagione2014.pdf" target="_blank">STATUTO</a></li>
<li><a href="http://www.usc-calcroci.it/documenti/2014/modulo_di_iscrizione_2014.pdf" target="_blank">ISCRIZIONE</a></li>
<li><a href="http://www.usc-calcroci.it/documenti/2014/Vestiario2014.pdf" target="_blank">VESTIARIO</a></li>
<li><a href="http://www.usc-calcroci.it/index.php?pageId=clasSoc2013&tipo=php">CLASSIFICA SOCIALE</a></li>
</ul></li><li><a href="http://www.usc-calcroci.it/#">MANIFESTAZIONI</a><ul style="left: auto; display: none;"><li><a href="http://www.usc-calcroci.it/index.php?pageId=calendario14&tipo=php">CALENDARIO 2014</a></li>
<li><a href="http://www.usc-calcroci.it/index.php?pageId=calendario14Tab&tipo=php">CALENDARIO 14 TAB</a></li>
<li><a href="http://www.usc-calcroci.it/index.php?pageId=trofei14&tipo=php">TROFEI 2014</a></li>
<li><a href="http://www.usc-calcroci.it/tuttiTempi14/">RISULTATI</a></li>
</ul></li><li><a href="http://www.usc-calcroci.it/#">UTILITY</a><ul style="left: auto; display: none;"><li><a href="http://www.usc-calcroci.it/index.php?pageId=photoGallery2012&tipo=php">PHOTOGALLERY</a></li>
<li><a href="http://www.usc-calcroci.it/index.php?pageId=forum&tipo=php&tForum=Pubblica">FORUM</a></li>
<li><a href="http://www.usc-calcroci.it/index.php?pageId=forum&tipo=php&tForum=NEWS">NEWS</a></li>
<li><a href="http://www.usc-calcroci.it/index.php?pageId=meteo">METEO</a></li>
<li><a href="http://www.usc-calcroci.it/index.php?pageId=linkUtili&tipo=php">LINK UTILI</a></li>
<li><a href="https://www.facebook.com/pages/Calcroci-mtb/745781225437620" target="_blank">FACEBOOK</a></li>
</ul></li><li><a href="http://www.usc-calcroci.it/#">AREA RISERVATA</a><ul style="left: auto; display: none;"><li><a href="http://www.usc-calcroci.it/index.php?pageId=vediPosta">POSTA</a></li>
<li><a href="http://www.usc-calcroci.it/index.php?pageId=login&tipo=php">LOGIN</a></li>
</ul> </li></ul>
</nav>
</div>

venerdì 18 luglio 2014

menu drop down