html:
Código HTML:
<body> <div id="contenedor" class="limpiar"> <div id="header" class="limpiar"> <!-- Inicia el form Oculto--> <div id="formOculto" class="limpiar"> <div id="contenidoCajafo"> <h1>Bienvenido a <strong>HomelesZ</strong></h1> <p>La web que te entiende!</p> <p>Aun no eres un <b>Homelesz?</b> Pues que esperas <b><a href="registro.php">Registrate!</a></b></p> </div> <div id="loginBox"> <label for="nick">HomelesZ id:</label><br/> <input type="text" name="nick" id="nick" /><br/> <label for="passwd">Password:</label><br/> <input type="password" name="passwd" id="passwd" /><br/> <button type="button" id="entrar">Entrar!</button> </div> <div id="quienesSomos"> <p><a href="somos.php">Quienes Somos?-</a></p> </div> </div> <!-- Termina el Form Oculto --> <!-- Inicia el toolbar--> <div id="toolbar"> <div id="banner"> <p><img id="banner1" src="img/logo.png" alt="HomelesZ" title="Home"/></p> </div> <div id="funciones"> <ul> <li id="registrar"><p>Unete a los HomelesZ</p></li> <p id="separador">|</p> <li id="logear"><p>Entrar</p></li> </ul> </div> </div> <!-- Termina el Toolbar--> </div> <div id="contenido"> </div> <div id="footer"> </div> </div>
Código:
y el Js:#contenedor{
position:relative;
width:100%;
}
#formOculto{
display:none;
background:#1e1e1e;
height:200px;
}
#contenidoCajafo{
margin:15px;
float:left;
text-align:center;
}
#contenidoCajafo h1{
text-align:center;
color:#ad0d0d;
font-size:36px;
font-weight:bold;
font-family:Geneva, sans-serif;
}
#contenidoCajafo p{
margin:15px;
font-size:20px;
text-align:right;
color:#cdd3e9;
}
#contenidoCajafo a{
text-decoration:none;
}
#loginBox{
position:absolute;
left:70%;
color:#cdd3e9;
font-weight:bold;
font-size:17px;
margin-top:25px;
padding:10px;
float:left;
text-align:center;
width:200px;
border: 3px solid #ad0d0d;
border-radius: 0px 0px 15px 15px;
}
#quienesSomos{
position:absolute;
top:165px;
left:20%;
font-size:20px;
color:#BD1311;
}
#quienesSomos a{
color:#BD1311;
text-decoration:underline;
}
#toolbar{
height:50px;
background:#ad0d0d;
border-bottom:3px solid #000;
}
#banner{
margin:5px;
margin-left:25px;
float:left;
}
#funciones{
float:left;
position:absolute;
left:70%;
}
#funciones li{
padding:5px;
font-size:18px;
font-weight:bold;
float:left;
margin:5px;
margin-top:10px;
border:1px solid #000;
color:#cdd3e9;
border-radius:3px;
background:#1e1e1e;
}
#separador{
float:left;
margin:5px;
margin-top:12px;
background:none;
border:none;
color:#000;
font-size:25px;
}
Código PHP:
var todo = $(document);
todo.ready(function hoverBanner() {
var banner = $("#banner1").hover(function entra(){
banner.attr("src","img/logoHover.png");
banner.css("cursor","pointer");
},function sale(){
banner.attr("src","img/logo.png");
})
});
todo.ready(function clickLogo() {
var banner = $("#banner1").click(function redirige(){
$(location).attr("href","index.html");
});
});
todo.ready(function hoverBtn() {
var btn = $("#funciones li").hover(function entra(){
btn = $(this);
btn.css("color","#1E1E1E");
btn.css("background","#CDD3E9");
btn.css("cursor","pointer");
},function sale(){
btn.css("color","#CDD3E9");
btn.css("background","#1E1E1E");
});
});
todo.ready(function clickRegistro() {
var btn = $("#registrar").click(function clickBtn(){
$(location).attr("href","registro.php");
});
});
todo.ready(function clickLogin(){
var btn = $("#logear").click(function mostrarOculto(){
var oculto = $("#formOculto").slideToggle("fast");
});
});
