Pues a ver: He elegido un script gratuito
http://tympanus.net/codrops/2010/09/06/collapsing-site-navigation/
Y lo estoy decorando a mi gusto:
http://www.miradaobjetiva.es/Pruebas/index.html
Si clickais en el primer "bloque" vereis que todo va bien, pero si lo haceis en cualquiera de los otros 7 vereis que aparece a la izquierda del que se "desplega" el "bloque" "Retratos" y tapa la zona de la izquierda donde aparece mi "descripción" (no me molesta que me tape -.- sino que esteticamente se ve raro)
Otra cosa que me intriga es que el recuadro que aparece cuando desplego los bloques no lo se mover, pero no lo he indagado mucho, ya que me he quedado colgado en el despliegue que os comento jejeje.
Muchas gracias por todo.
http://tympanus.net/codrops/2010/09/06/collapsing-site-navigation/
Y lo estoy decorando a mi gusto:
http://www.miradaobjetiva.es/Pruebas/index.html
Si clickais en el primer "bloque" vereis que todo va bien, pero si lo haceis en cualquiera de los otros 7 vereis que aparece a la izquierda del que se "desplega" el "bloque" "Retratos" y tapa la zona de la izquierda donde aparece mi "descripción" (no me molesta que me tape -.- sino que esteticamente se ve raro)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Galería fotográfica Sergio Pérez Pérez</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Collapsing Site Navigation with jQuery" />
<meta name="keywords" content="jquery, navigation, menu, collapsing, accordion, sliding, image, css3"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Liberation_Sans.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('span');
Cufon.replace('li');
Cufon.replace('h1');
Cufon.replace('p');
</script>
<style>
body{
background:#000 url(images/bg.png) repeat top left;
margin:0;
padding:0;
}
span.reference{
font-family:Arial;
text-transform:uppercase;
position:fixed;
right:95px;
bottom:10px;
font-size:11px;
text-shadow:1px 1px 1px #000;
}
span.reference a{
color:#aaa;
text-decoration:none;
margin-right:20px;
}
span.reference a:hover{
color:#ddd;
}
.title{
position:absolute;
right:10px;
top:10px;
width:220px;
height:600px;
background:transparent url(images/title.png) no-repeat top left;
}
</style>
</head>
<body>
<DIV id="historia">
<img src="images/historia.png"/>
</DIV>
<DIV id="superior">
<img src="images/superior.png"/>
</DIV>
<div class="title"></div>
<div id="cc_menu" class="cc_menu">
<div class="cc_item" style="z-index:8;">
<img src="images/1.jpg" alt="image" />
<span class="cc_title"><br>Retratos</span>
<div class="cc_submenu">
<ul>
<li class="cc_content_1">Winter 2010</li>
<!--<li class="cc_content_2">Spring 2011</li>-->
</ul>
</div>
</div>
<div class="cc_item" style="z-index:7;">
<img src="images/2.jpg" alt="image" />
<span class="cc_title"><br>Paisajes</span>
<div class="cc_submenu">
<ul>
<li class="cc_content_3">Milano</li>
<li class="cc_content_4">Paris</li>
</ul>
</div>
</div>
<div class="cc_item" style="z-index:6;">
<img src="images/3.jpg" alt="image" />
<span class="cc_title">Flora <br>y<br> Fauna</span>
<div class="cc_submenu">
<ul>
<li class="cc_content_7">About us</li>
<li class="cc_content_8">Our Philosophy</li>
</ul>
</div>
</div>
<div class="cc_item" style="z-index:5;">
<img src="images/4.jpg" alt="image" />
<span class="cc_title">Blanco <br>y <br> Negro</span>
<div class="cc_submenu">
<ul>
<li class="cc_content_9">Bacardi Summer Party</li>
<li class="cc_content_10">Lonestyle Auction</li>
</ul>
</div>
</div>
<div class="cc_item" style="z-index:4;">
<img src="images/5.jpg" alt="image" />
<span class="cc_title"><br>Ceremonias<br></span>
<div class="cc_submenu">
<ul>
<li class="cc_content_11">Custom Orders</li>
<li class="cc_content_12">Get in touch</li>
</ul>
</div>
</div>
<div class="cc_item" style="z-index:3;">
<img src="images/6.jpg" alt="image" />
<span class="cc_title"><br>Arquitectura</span>
<div class="cc_submenu">
<ul>
<li class="cc_content_3">Milano</li>
<li class="cc_content_4">Paris</li>
</ul>
</div>
</div>
<div class="cc_item" style="z-index:2;">
<img src="images/7.jpg" alt="image" />
<span class="cc_title"><br>Varios</span>
<div class="cc_submenu">
<ul>
<li class="cc_content_3">Milano</li>
<li class="cc_content_4">Paris</li>
</ul>
</div>
</div>
<div class="cc_item" style="z-index:1;">
<img src="images/8.jpg" alt="image" />
<span class="cc_title"><br>Novedades</span>
<div class="cc_submenu">
<ul>
<li class="cc_content_3">Milano</li>
<li class="cc_content_4">Paris</li>
</ul>
</div>
</div>
<!-- "Aqui he recortado un trozo de codigo por que me avisa el foro de que no cabe el mensaje, son solo las descripcciones de las imagenes originales" -->
</div>
</div>
<div>
<span class="reference">
<a href="http://tympanus.net/codrops/2010/09/06/collapsing-site-navigation/">back to the Codrops tutorial</a>
<a href="http://www.flickr.com/photos/parisbeyrouth">Photos by beyrouth</a>
</span>
</div>
<DIV id="inferior">
<img src="images/inferior.png"/>
</DIV>
<!-- The JavaScript -->
<script type="text/javascript">
$(function() {
//all the menu items
var $items = $('#cc_menu .cc_item');
//number of menu items
var cnt_items = $items.length;
//if menu is expanded then folded is true
var folded = false;
//timeout to trigger the mouseenter event on the menu items
var menu_time;
/**
bind the mouseenter, mouseleave to each item:
- shows / hides image and submenu
bind the click event to the list elements (submenu):
- hides all items except the clicked one,
and shows the content for that item
*/
$items.unbind('mouseenter')
.bind('mouseenter',m_enter)
.unbind('mouseleave')
.bind('mouseleave',m_leave)
.find('.cc_submenu > ul > li')
.bind('click',function(){
var $li_e = $(this);
//if the menu is already folded,
//just replace the content
if(folded){
hideContent();
showContent($li_e.attr('class'));
}
else //fold and show the content
fold($li_e);
});
/**
mouseenter function for the items
the timeout is used to prevent this event
to trigger if the user moves the mouse with
a considerable speed through the menu items
*/
function m_enter(){
var $this = $(this);
clearTimeout(menu_time);
menu_time = setTimeout(function(){
//img
$this.find('img').stop().animate({'top':'0px'},400);
//cc_submenu ul
$this.find('.cc_submenu > ul').stop().animate({'height':'120px'},400);
},200);
}
//mouseleave function for the items
function m_leave(){
var $this = $(this);
clearTimeout(menu_time);
//img
$this.find('img').stop().animate({'top':'-600px'},400);
//cc_submenu ul
$this.find('.cc_submenu > ul').stop().animate({'height':'0px'},400);
}
//back to menu button - unfolds the menu
$('#cc_back').bind('click',unfold);
/**
hides all the menu items except the clicked one
after that, the content is shown
*/
function fold($li_e){
var $item = $li_e.closest('.cc_item');
var d = 100;
var step = 0;
$items.unbind('mouseenter mouseleave');
$items.not($item).each(function(){
var $item = $(this);
$item.stop().animate({
'marginLeft':'-100px'
},d += 200,function(){
++step;
if(step == cnt_items-1){
folded = true;
showContent($li_e.attr('class'));
}
});
});
}
/**
shows all the menu items
also hides any item's image / submenu
that might be displayed
*/
function unfold(){
$('#cc_content').stop().animate({'left':'-1200px'},600,function(){
var d = 100;
var step = 0;
$items.each(function(){
var $item = $(this);
$item.find('img')
.stop()
.animate({'top':'-600px'},200)
.andSelf()
.find('.cc_submenu > ul')
.stop()
.animate({'height':'0px'},200);
$item.stop().animate({
'marginLeft':'0px'
},d += 200,function(){
++step;
if(step == cnt_items-1){
folded = false;
$items.unbind('mouseenter')
.bind('mouseenter',m_enter)
.unbind('mouseleave')
.bind('mouseleave',m_leave);
hideContent();
}
});
});
});
}
//function to show the content
function showContent(idx){
$('#cc_content').stop().animate({'left':'100px'},200,function(){
$(this).find('.'+idx).fadeIn();
});
}
//function to hide the content
function hideContent(){
$('#cc_content').find('div').hide();
}
});
</script>
</body>
</html>Otra cosa que me intriga es que el recuadro que aparece cuando desplego los bloques no lo se mover, pero no lo he indagado mucho, ya que me he quedado colgado en el despliegue que os comento jejeje.
Muchas gracias por todo.