posso allegare i codici, purtroppo non ho dove mettere tutto:
questa è l'index:
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/js_general.js"></script>
</head>
<body>
<div id='container_background'>
[img]img/2.jpg[/img]
</div>
<p class='open_menu'>chiudi</p>
<div class='container_menu'>
<ul class="menu">
[*]Home
[*]apri laterale
[/list]
</div>
<div id='slide_hidden'>
<span class="close_hidden_box">chiudi</span>
</div>
</body>
</html>
questo è il js (manca jquery ma sapete come trovarlo)
codice:
/***********************Calcolare altezza e larghezza monitor************************/
var width = document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
var height = document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
var larghezza = width-150;
/***********************Apertura/Chiusura Menu************************/
$(document).ready(function(){
$(".open_menu").click(function(){
var menu=$(".container_menu");
if(!menu.is('.menuClosed')){
menu.stop().addClass('menuClosed').animate({'margin-left':'-153px'},1000);
} else {
menu.stop().removeClass('menuClosed').animate({'margin-left':'0'},1000);
}
});
});
/***********************Menu a destra e sinistra************************/
$(document).ready(function(){
$(".right").click(function(){
$(".container_menu").animate({'margin-left':larghezza+'px'},1000)
});
$(".left").click(function(){
$(".container_menu").animate({'margin-left':'0px'},1000)
});
});
/***********************Animare il contenitore nascosto************************/
$(document).ready(function(){
$(".contract").click(function(){
$("#slide_hidden").animate({'width':'150px'},1000)
});
$(".close_hidden_box").click(function(){
$("#slide_hidden").animate({'width':'0px'},1000)
});
});
e questo è il css:
codice:
html{
margin:0;
padding:0;
height:100%;
width:100%;
display:block;
}
body{
margin:0;
padding:0;
height:100%;
width:100%;
display:block;
}
.separatore{
height:20px;
}
#container_background{
width:100%;
margin:0;
height:100%;
position:absolute;
}
#container_background img{
width:100%;
}
.open_menu{
position:absolute;
z-index:3;
background-color:white;
left:20px;
color:black;
text-decoration:none;
}
.close_menu{
display:;
position:absolute;
z-index:3;
background-color:white;
left:20px;
color:black;
text-decoration:none;
}
.container_menu{
border:1px solid transparent;
width:150px;
height:100%;
background-color:#fff;
opacity:0.8;
position:absolute;
top:0;
float:left;
}
.menu{
list-style:none;
margin-top:40px;
}
#slide_hidden{
border:1px solid blue;
height:100%;
width:0px;
background-color:red;
z-index:50;
left:152px;
display:block;
position:relative;
}
so che è scomoda come soluzione ma al momento non ne vedo un'altra.
Grazie in anticipo!
Rispondi quotando
