Página principal:
Código PHP:
<html>
<Head>
</head>
<body>
<div id="pagina">
<header>
<div id="cabecera">
<?php include("extructura/cabecera.php"); ?>
</div>
</header>
<nav>
<div id="menu">
<?php include("extructura/menu.php"); ?>
</div>
</nav>
<main>
<article>
<div id="contenido">
<div id="contenido1">
<?php include("extructura/contenido.php"); ?>
</div>
</div>
</article>
</main>
<footer>
<div id="pie">
<div id="pie1">
<?php include("extructura/pie.php"); ?>
</div>
</div>
</footer>
</div>
</body>
</html>
Pie, donde se muestra la capa flotante al pasar le ratón:
Código PHP:
<div id="condiciones"></div>
<div onmouseover="showdiv(event, 'Se permite cualquier explotación de la obra, incluyendo una finalidad comercial, así como la creación de obras derivadas, la distribución de las cuales también está permitida sin ninguna restricción.<br><br>En cualquier explotación de la obra autorizada por la licencia hará falta reconocer la autoría.');" onMouseOut="hiddenDiv()">
<span class="licencia">b<br>
C</span><br>
</div>
El menú que aparecerá al darle a un texto o o imagen, me gustaría que saliera de izquierda a derecha en el lateral izquierdo, como en las apps de android
Código PHP:
<div class="menu">
<ul>
<li>
<a href="example.html">Menu</a>
<ul>
<li>
<a href="example.html">Link</a>
</li>
<li>
<a class="menu-nav" href="example.html">Submenu</a>
<ul>
<li>
<a class="menu-nav" href="example.html">Submenu</a>
<ul>
<li><a href="example.html">Link</a></li>
<li><a href="example.html">Link</a></li>
<li><a href="example.html">Link</a></li>
<li><a href="example.html">Link</a></li>
</ul>
</li>
<li><a href="example.html">Link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Javascript para mostrar la capa flotante:
Código HTML:
function showdiv(event, text)
{
//determina un margen de pixels del div al raton
var margin = 50;
//La variable IE determina si estamos utilizando IE
var IE = document.all?true:false;
var tempX = 0;
var tempY = 0;
//document.body.clientHeight = devuelve la altura del body
if(IE)
{ //para IE
IE6=navigator.userAgent.toLowerCase().indexOf('msie 6');
IE7=navigator.userAgent.toLowerCase().indexOf('msie 7');
//event.y|event.clientY = devuelve la posicion en relacion a la parte superior visible del navegador
//event.screenY = devuelve la posicion del cursor en relaciona la parte superior de la pantalla
//event.offsetY = devuelve la posicion del mouse en relacion a la posicion superior de la caja donde se ha pulsado
if(IE6>0 || IE7>0)
{
tempX = event.x
tempY = event.y
if(window.pageYOffset)
{
tempY=(tempY+window.pageYOffset);
tempX=(tempX+window.pageXOffset);
}
else
{
tempY=(tempY+Math.max(document.body.scrollTop,document.documentElement.scrollTop));
tempX=(tempX+Math.max(document.body.scrollLeft,document.documentElement.scrollLeft));
}
}
else
{
IE8
tempX = event.x
tempY = event.y
}
}
else
{ //para netscape
//window.pageYOffset = devuelve el tamaño en pixels de la parte superior no visible (scroll) de la pagina
document.captureEvents(Event.MOUSEMOVE);
//tempX = event.pageX;
//tempY = event.pageY;
var x = event.pageX;
var y = event.pageY;
}
if (x < 0){x = 0;}
if (y < 0){y = 0;}
// Modificamos el contenido de la capa
document.getElementById('condiciones').innerHTML=text;
// Posicionamos la capa condiciones
var tope = parseInt(y) + parseInt(margin);
var izquierda = parseInt(x) + parseInt(margin);
document.getElementById('condiciones').style.top = (tope)+"px";
document.getElementById('condiciones').style.left = (izquierda)+"px";
document.getElementById('condiciones').style.display='block';
return;
}
/*
Funcion para esconder el div
*/
function hiddenDiv()
{
document.getElementById('condicines').style.display='none';
return;
}
Estilos:
Código HTML:
html, body
{
margin:0px;
width:100%;
font-family: "Roboto-Regular";
}
#pagina
{
}
#cabecera
{
text-align: left;
line-height: 200px;
background-color: #5677fc;
}
.logo
{
font-family: "Roboto-Italic";
font-size:76px;
color:#FFF;
}
.version
{
font-family: "Roboto-BoldItalic";
font-size:18px;
color:#FFF;
}
#menu
{
background-color:#757575;
line-height: 30px;
}
.menu
{
color:#FFF;
font-family: "Roboto-Bold";
font-size:12px
}
#contenido
{
text-align: center;
position: relative;
height:auto;
width:auto;
}
#contenido1
{
text-align: center;
position: relative;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
}
#pie
{
text-align: center;
position: relative;
background-color: #5677fc;
height: 200px;
}
#pie1
{
text-align: center;
height: 50px;
width: 50%;
top: 25px;
left: 25%;
position: relative;
background-color: #5677fc;
}
.pie
{
font-family: "Roboto-Bold";
font-size: 14px;
color:#FFF;
}
.licencia
{
font-family: "Licencia-Creative-Commons";
font-size: 48px;
color:#FFF;
}
.condiciones
{
font-family: "Roboto-Regular";
font-size: 14px;
color:#FFF;
}
#condiciones
{
position:absolute;
display:none;
font-family:Roboto-Regular;
text-align:center;
font-size: 14px;
/*font-size:0.8em;*/
width:280px;
border:1px solid #808080;
background-color:#f1f1f1;
padding:5px;
}
.menu ul ul
{
display: none;
}
.menu li:hover > ul
{
display: block;
}
bichomen