- Desde
- 11 Jun 2014
- Mensajes
- 40
Hola muchachos de ForoBeta.
Pues bien llevo tiempo sin conectarme a la comunidad y la verdad es que ultimamente no eh programado mucho en sí, ya que bueno me eh puesto a divagar ( 1 semana ) y bueno ya estoy listo para proseguir y tenía ganas de hacer un DropDown básico obviamente se puede optimizar para un uso a mayor escala, pero bueno no tengo tiempo para currarmelo en ello y fue un simple capricho.
bien chicos aquí dejo el código utilizado en el mismo.
pues bien aquí os dejo la demo: DropDown: deicksexpress
y aquí la descarga: http://hispanodev.ml/dropdown.zip
Espero les sea de utilidad de alguna forma y pues un saludo
Pues bien llevo tiempo sin conectarme a la comunidad y la verdad es que ultimamente no eh programado mucho en sí, ya que bueno me eh puesto a divagar ( 1 semana ) y bueno ya estoy listo para proseguir y tenía ganas de hacer un DropDown básico obviamente se puede optimizar para un uso a mayor escala, pero bueno no tengo tiempo para currarmelo en ello y fue un simple capricho.
bien chicos aquí dejo el código utilizado en el mismo.
HTML:
<html lang="es">
<head>
<title>DropDown: deicksexpress</title>
<script src="./assets/js/libs/jquerylibs.js"></script>
<script src="./assets/js/dropdown.js"></script>
<link rel="stylesheet" type="text/css" href="./assets/css/index.css">
<meta charset="utf-8" />
</head>
<body>
<section id="content">
<div id="button">
<aside class="buttonwrapp">
Cuenta
</aside>
</div>
<div id="submenu" class="fade">
<item>Perfil</item>
<item>Ajustes</item>
<item>Privacidad</item>
<item>Apuntes</item>
<item>+ Otros</item>
</div>
</section>
</body>
</html>
Insertar CODE, HTML o PHP:
$(document).ready(function(){
$('#button').click(function(){
if($('#button').hasClass('activo')){
$('#button').removeClass('activo');
$('#submenu').removeClass('open');
$('#submenu').addClass('fade');
} else {
$('#button').addClass('activo');
$('#submenu').removeClass('fade');
$('#submenu').addClass('open');
}
});
});
Insertar CODE, HTML o PHP:
body {
background:#ecf0f1;
font-family:arial, helvetica,sans-serif;
margin:auto;
}
#content {
width:300px;
margin:auto;
}
#button:before {
content: "▸";
float:left;
padding-top:6px;
}
#button {
background:#1abc9c;
width:290px;
height:30px;
padding:5px 12px;
margin-top:20px;
border-radius:5px;
cursor:pointer;
color:#ecf0f1;
font-family:arial, helvetica,sans-serif;
font-size:14px;
font-weight:bold;
}
#button.activo:before {
content: "▾"
}
.buttonwrapp {
padding-top:7px;
text-align:center;
}
.button:hover {
background:#16a085;
-webkit-transition:0.5s;
}
#submenu {
background:#fff;
width:303px;
padding:5px;
border-radius:3px;
float:left;
margin-top:5px;
}
item {
background:#ecf0f1;
width:292px;
cursor:pointer;
padding:8px 5px;
float:left;
font-size:13px;
border-radius:4px;
font-family:arial, helvetica,sans-serif;
color:#34495e;
margin-bottom:3px;
}
item:hover {
font-weight:bold;
}
.open {
-webkit-transition:0.5s;
opacity:1;
}
.fade {
-webkit-transition:0.5s;
opacity:0;
position:absolute;
visibility:hidden;
}pues bien aquí os dejo la demo: DropDown: deicksexpress
y aquí la descarga: http://hispanodev.ml/dropdown.zip
Espero les sea de utilidad de alguna forma y pues un saludo
