Animated Drop Down Menu with jQuery, un bonito menú desplegable basado en jQuery y Css. Muy práctico para ubicarlo en la sección superior de nuestro header, ya que ocupa muy poco lugar y a su vez lograra llamar la atención de los usuarios. Me recuerda mucho al menú de NETTUTS como a todos los de la red de Envato.
Ver Demo – Descarga
Uso
Realizar las llamadas correspondientes desde nuestro encabezado < head>
JavaScript:
-
<script type=“text/javascript” src=“jsfiles/jquery.js”></script>
-
<script type=“text/javascript”>
-
$(document).ready(function () {
-
$(“ul.menu_body li:even”).addClass(“alt”);
-
$(‘img.menu_head’).click(function () {
-
$(‘ul.menu_body’).slideToggle(‘medium’);
-
});
-
$(‘ul.menu_body li a’).mouseover(function () {
-
$(this).animate({ fontSize: “14px”, paddingLeft: “20px” }, 50 );
-
});
-
$(‘ul.menu_body li a’).mouseout(function () {
-
$(this).animate({ fontSize: “12px”, paddingLeft: “10px” }, 50 );
-
});
-
});
-
</script>
agregar estilo
CSS:
-
ul, li{margin:0; padding:0; list-style:none;}
-
.menu_head{border:1px solid #998675;}
-
.menu_body {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}
-
.menu_body li{background:#493e3b;}
-
.menu_body li.alt{background:#362f2d;}
-
.menu_body li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;}
-
.menu_body li a:hover{padding:15px 10px; font-weight:bold;}
nuestro Menu
HTML:
-
<img src=“images/navigate.png” width=“184″ height=“32″ class=“menu_head” />
-
-
<li><a href=“#”>About Us
</a></li>
-
<li><a href=“#”>Portfolio
</a></li>
-
<li><a href=“#”>Clients
</a></li>
-
-
<li><a href=“#”>Support Forums
</a></li>
-
<li><a href=“#”>Gallery
</a></li>
-
<li><a href=“#”>Contact Us
</a></li>
-
</ul>
Mas Info Animated Drop Down Menu with jQuery,
