Blog Borchani Studios

Animated Drop Down Menu with jQuery es un bonito menú desplegable basado en jQuery y Css.Ocupa muy poco lugar y a la vez lograra llamar la atención de los usuarios. Tiene un gran parecido al menu de NETTUTS como a todos los de la red de Envato.

Ver Demo – Descarga

Uso:

1.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>

2. 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;}

3. Nuestro menu:

HTML:

<img src=”images/navigate.png” width=”184″ height=”32″ class=”menu_head” />
<ul class=”menu_body”>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Portfolio</a></li>
<li><a href=”#”>Clients</a></li>
<li><a href=”#”>Blog</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,

Espero les sirva

Saludos, Joel