Programa un menu para tu web

¡Que tal!


Hoy navegando en la web me eh encontrado con le menú salvaje de fileserver, para ser más exactos éste:
<!----------------------------------------------------------------------------------------->

<!----------------------------------------------------------------------------------------->
Y bueno,que les diré, me gusto su sencillez, además de ser agradable para casi cualquier usuario promedio.Entonces pensé,¿Si ellos pueden,porqué yo no? y me eh puesto a desarrollar tal menú con las tecnologías Jquery y con CSS .

Index.php

<script type="text/javascript" >
$(document).ready(function()
{

$(".account").click(function() /* si se da clic en el selector ".account" ejecutame la siguiente función. */
{
var X=$(this).attr('id'); /*creamos variable "X" en el atributo "id" del selector ".account". */
if(X==1) /* si X es igual 1... /*
{
$(".submenu").slideUp('slow'); /*animación SlideUp en "lento" */
$(this).attr('id', '0');  /* el atributo cambiará a 0 */
}
else /* si no */
{

$(".submenu").slideDown('slow'); /*animación SlideDown abajo*/
$(this).attr('id', '1');
}

});

//Mouse click on sub menu
$(".submenu").mouseup(function()
{
return false /* si el clic es fuera de los selectores */
});

//Mouse click on my account link
$(".account").mouseup(function()
{
return false
});


//Document Click
$(document).mouseup(function() /* ocultar si el clic es fuera de los selectores con "hide". */
{
$(".submenu").hide();
$(".account").attr('id', '');
});
});
</script>
[/color]
Ahora vamos con el CSS:

.dropdown
{ color: #555; margin: 3px 0 0 0; width: 240px; position: relative; top:0px; left:80%; height: 17px; text-align:left; } .submenu { background: #fff; position: absolute; top: 20px; left: -30px; z-index: 100; display: none; width: 10.8em; border: 1px solid #CCC; } .dropdown li a { color:black; color: #333; font: 75%/normal Arial, Helvetica, sans-serif; display: block; text-decoration: none; zoom: 1; padding: 6px 15px; cursor: pointer; text-decoration:none; } .dropdown li a:hover { background:#155FB0; color: #FFFFFF; text-decoration: none; } a.account { text-align: right; text-decoration: underline; cursor: pointer; color: #084482; margin: 0; padding-right: 1.1em; position:relative; top:-30%; background: url(icon_dropdown.gif) 100% .6em no-repeat;} .root { list-style:none; margin:0px; padding:0px; font: 75%/normal Arial, Helvetica, sans-serif; padding: 11px 0 0 0px; }
¡Atención!
el css se adapta a una web que ya tengo prevista, por lo cual deberán cambiar los valores relativos (%) por otros o simplemente cambiarlos a absolutos (px,emm).


 
Así debiese quedar relativamente :

Se agradece tu atención.
"No seré el mejor programador,pero hago mi esfuerzo, y eso,eso cuenta".

Programa un menu para tu web
0 Puntos Score: 0/10
Visitas: 1494 Favoritos: 6
4 Comentarios Programa un menu para tu web
Lo eh olvidado,para usarlo basta con :
<div class="dropdown">
<a class="account" >No te convences?clic aqu?
es muy crap ademas ese menu es muy viejo
Cita alverhost: Mostrar
Me alegra que sepas como programarlo,pero varias personas no,por eso hago "crap",saludos.
no esta tan mal  
Para dejar un comentario Registrate! o.. eres ya usuario? Accede!