Esta sección te permite ver todos los mensajes escritos por este usuario. Ten en cuenta que sólo puedes ver los mensajes escritos en zonas a las que tienes acceso en este momento.
Cita de: T. Collins en 25 Noviembre 2014, 01:21 AM
http://www.html5rocks.com/en/tutorials/masking/adobe/ o si no con php.
![:-\](https://forum.elhacker.net/Smileys/navidad/undecided.gif ":-\")
$(document).ready(function(){
var contador = 0;
$('#desplazar').click(function efecto(){
if (contador/2==0){
$('#c_menu').animate({'left':0+'%'});
$("#c_menu").css({ height:"auto" });
$("#divmenu").css({ position:"absolute" });
contador+=1;
}
else{
$('#c_menu').animate({'left':-100+'%'});
$("#c_menu").css({ height:"300px" });
$("#divmenu").css({ position:"fixed" });
contador+=-1;
}
});
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es">
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
html a img{border:none;}
img {
border: none;
}
html{
padding:0;
margin:0;
}
body{
padding:0;
margin:0px;
background:#e8f9f9;
font-family: 'Open Sans', sans-serif;
}
#divmenu{
width:100%;
height:65px;
border-top:#6fceed solid 4px;
position:fixed;
z-index:9999;
margin:0px auto;
background: #FFF;
}
#blanco{
width:100%;
height:65px;
}
#todo{
width: 636px;
height: 63px;
float: left;
border: red solid 0px;
}
#c_menu{
width: 636px;
height: 63px;
float: left;
}
#logo{
width:232px;
height:63px;
float:left;
margin-left:10px;
}
#logo img{
width:228px;
height:63px;
}
#menu{
list-style: none;
height: 53px;
margin: 0;
float: left;
text-align: left;
padding: 0;
}
#menu li{
float:left;
display:block;
border-bottom:#fff solid 0px;
}
#menu li a{
display: block;
padding: 20px 0px;
margin: 0;
border: purple solid 0px;
text-decoration: none;
text-align: center;
color: #0078ca ;
font-family: 'Open Sans', sans-serif;
width: 110px;
font-size:16px;
}
#menu li:hover {
background:#6fceed;
color:#FFF !important;
}
#menu li a:hover {
border-bottom:#ECECEC solid 1px;
background:#6fceed;
color:#FFF;
}
#menu li a:hover, #menu .submenu li:hover a{
border-bottom:#ECECEC solid 1px;
background:#6fceed;
color:#FFF;
}
#menu li a:active {
background:#6fceed;
color:#FFF;
}
#menu .submenu{
width:110px;
display:none;
z-index:99999;
position:absolute;
margin:0px;
padding:0px;
background:#fff;
}
#menu .submenu li{
text-align:center;
display:block;
width:110px;
margin:0px auto;
border-bottom:#ECECEC solid 1px;
}
#menu .submenu li a{
display:block;
padding: 20px 0px;
border:purple solid 0px;
text-decoration: none;
text-align:center;
color:#6fceed;
font-family: 'Open Sans', sans-serif;
width:110px;
font-size:10pt;
}
#menu .submenu li a:hover {
color:white;
background: #0078ca;
}
#menu li:hover > .submenu {
display:block;
}
#contenido_principal{
width:900px;
margin:0 auto;
background:#000;
}
#contenido_principal img{
width:900px;
}
/***********************************RESPONSIVE*****************************************=**********************/
#menu_responsive {
margin: 0px 0px 0px;
display: none;
padding: 8px 5px 2px;
text-align: center;
width: 106px;
font-family: 'Open Sans', sans-serif;
font-size: 0.8em;
}
@media (max-width: 1034px) {
#c_menu{ left:none !important;}
#contenido_principal{width:100%;}
#contenido_principal img{width:100%;}
}
@media (max-width: 860px) {
#divmenu{ width:100%; height:146px;}
#logo{ float: none;position:relative; margin:0 auto; }
#todo{ float: none; position:relative; margin:0 auto; }
#c_menu{ float: none;position:relative; margin:0 auto; left:none !important;}
}
@media (max-width: 457px) {
#menu_responsive{display:block; }
#divmenu{ width:100%; height:67px;}
#logo {width:250px;float:right;border:red solid 0px;}
#logo img{width:250px;float:right;}
#todo{width:100%}
#c_menu{
background:#8ad1ef;
color: /*#0078ca*/ #FFF ;
width:100%;
min-height:200px;
overflow:auto;
position:absolute;
left:-100%;
z-index:9999;
}
#menu li a{
width: 100%;
background: #0078ca;
color: /*#0078ca*/ #FFF ;
}
#menu li {
width: 100%;
background: #0078ca;
color: /*#0078ca*/ #FFF ;
}
#menu .submenu{
width: 100%;
display:block;
position:relative;
background:#8ad1ef;
color: #FFF ;
}
#menu .submenu li{
width: 100%;
background:#8ad1ef;
color: #FFF ;
}
#menu .submenu li a{
width:100%;
background:#8ad1ef;
color: #FFF ;
}
#menu{
width:100%;
height:auto;
}
}
</style>
</head>
<body>
<div id="divmenu">
<div id="logo">
<img src="http://www.vectortemplates.com/raster/batman-logo-big.gif">
</div>
<script>
$(document).ready(function(){
var contador = 0;
$('#desplazar').click(function efecto(){
if (contador/2==0){
$('#c_menu').animate({'left':0+'%'});
$("#c_menu").css({ height:"auto" });
contador+=1;
}
else{
$('#c_menu').animate({'left':-100+'%'});
$("#c_menu").css({ height:"300px" });
contador+=-1;
}
});
});
</script>
<div id="todo">
<div id="menu_responsive" onclick=""><a href="#" id="desplazar"><img src="http://www.vectortemplates.com/raster/batman-logo-big.gif" width="20">Menu</a></div>
<div id="c_menu" >
<ul id="menu">
<li><a href="#" target="_blank">Menu P 1</a>
<ul class="submenu">
<li><a href="#">submenu 1</a></li>
</ul>
</li>
<li><a href="#">Menu P 2</a>
<ul class="submenu">
<li><a href="#">submenu 2</a></li>
<li><a href="#">submenu 2.1</a></li>
</ul>
</li>
<li><a href="#">Menu P 3</a>
<ul class="submenu">
<li><a href="#">submenu 3</a></li>
<li><a href="#">submenu 3.1</a></li>
<li><a href="#">submenu 3.2</a></li>
<li><a href="#">submenu 3.3</a></li>
<li><a href="#">submenu 3.4</a></li>
<li><a href="#">submenu 3.5</a></li>
<li><a href="#">submenu 3.6</a></li>
</ul>
</li>
<li><a href="#">Menu P 4</a>
<ul class="submenu">
<li ><a href="#">submenu 4</a></li>
<li><a href="#">submenu 4.1</a></li>
<li ><a href="#">submenu 4.1</a></li>
<li ><a href="#">submenu 4.1</a></li>
<li ><a href="#">submenu 4.1</a></li>
<li><a href="#">submenu 4.1</a></li>
<li ><a href="#">submenu 4.1</a></li>
<li ><a href="#">submenu 4.1</a></li>
</ul>
</li>
<li><a href="#">Menu P 5</a>
</li>
</ul>
</div>
</div>
</div>
<div id="blanco"></div>
<div id="contenido_principal">
<img src="http://www.vectortemplates.com/raster/batman-logo-big.gif">
</div>
</body>
</html>