Dudas menús desplegables jquery

[Mostolexs]

Hola compañeros, acudo a vosotros con unas cuantas dudas acerca de javascript (estoy muy muy verde) , y aprovecho para presentarme en el foro.

Bueno, llevo un buen rato batalleando con un par de funciones js y no consigo sacar nada en claro, si os parece bien primero comienzo explicando lo que quiero hacer y luego el problema en sí.

Tengo una página web en la que quiero utilizar menús desplegables con jquery , pero mi problema llega cuando quiero fijar uno de esos menús a otro, de modo que el botón con el que se desplega éste 2º menú también atiende a la posición del primer menú, lo explico mediante un par de ilustraciones:

Los menús laterales serían sidebar y sidebar2, sidebar sería el menú "principal" y sidebar2 sería el menú fijado a sidebar, de modo que cuando desplegamos el menú principal (sidebar) éste también altera su posición:



Hasta ahí he conseguido apañármelas, pero el problema radica en que quiero que sidebar2 se despliegue en dependencia de la posición de sidebar, es decir, cuando sidebar no está desplegada, sidebar2 debería desplegarse de esta forma:



De otro modo, cuando sidebar está desplegada sidebar2 debería desplegarse así:




Os dejo los scripts en sí:

Código:

<script type="text/javascript">
    (function sidebar() {
	
		var sidebar = $('#sidebar').show(),  sidebar2 = $('#sidebar2').show(),
			sidebarButton = $('#sidebarButton', sidebar),
			w = sidebar.outerWidth();
			
            
    sidebar.css('left', '-' + w + 'px');
		
		sidebarButton.toggle (
		
			function() {
				sidebar.css('left', 0).show('slide', { easing: 'easeOutBounce' }, 1000, function() {
					sidebarButton.css('right', '-14px');
				
                
               
                });
                
                sidebar2.css('left', -170).show('slide', { easing: 'easeOutBounce' }, 1000, function() {
                	sidebarButton.css('right', '-14px');
                
                
                
                });
                 
           },
 
 
 
 
  
			
			function() {
				sidebar.animate({ left: '-' + w + 'px' }, 1000, 'easeOutBounce');
				sidebarButton.css('right', '-14px');
        
        
        sidebar2.animate({ left: -360 + '-' + w + 'px' }, 1000, 'easeOutBounce');
        sidebarButton.css('right', '-14px');
        }
		
        	);
		
    }());
    
    
    
    
    
    	(function sidebar2() {
        
        	var sidebar2 = $('#sidebar2').show(),
                sidebar = $('#sidebar').show(),
        		sidebar2Button = $('#sidebar2Button', sidebar2),
        		w = sidebar2.outerWidth();
        		
        	sidebar2.css('left', '-' + w + 'px');
        	
        	sidebar2Button.toggle (
        	
        		function idle() {
        			sidebar2.css('left', 0).show('slide', { easing: 'easeOutBounce' }, 1000, function() {
        				sidebar2Button.css('right', '-14px'); 
        			});
        		},
                
        		
        		function() {
        			sidebar2.animate({ left: '-' + w + 'px' }, 1000, 'easeOutBounce');
        			sidebar2Button.css('right', '-14px');
        		}
        		
        	);
        	
        }());
    
    
    
    
    
    
    
    
</script>

el fragmento de css:

Código:

#sidebar {
position: fixed;
top:0;
left:0;


display: none;
border-top: 0px solid white;
border-right: 0px solid white;
background: #000;
/* background: -moz-linear-gradient (top, #ebebeb, white);
background: -webkite-gradient(linear, left top, left bottom, from(#ebebeb), to(white));*/
padding: 0;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
color: #fff;
width: 190px;
height: 100%;
}
#sidebarButton {
	top:50%;
    position: absolute;
	right: -14px;
	cursor: pointer;
margin: -65px -21px 0 0;
}

...

#sidebar2 {
position: fixed;
top:151px;
left:0;
z-index: 52;

display: none;
border-top: 0px solid white;
border-right: 0px solid white;
background:#fff;
/* background: -moz-linear-gradient (top, #ebebeb, white);
background: -webkite-gradient(linear, left top, left bottom, from(#ebebeb), to(white));*/
padding: 30px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
color: #fff;
width: 300px;
}
#sidebar2Button {
    position: absolute;
	top:0px;
	right: -14px;
	cursor: pointer;
margin: 0 -21px 0 0;
}

y la disposición en html:

Código:

</head><body><div id="sidebar" style="z-index: 2;">-contenido sidebar-</div><div id="sidebar2">-contenido sidebar2</div>

Los scripts ahora mismo están de tal forma que, aunque sidebar2 está fijada a sidebar, cuando quiero desplegarla lo hace desde la posición left=0 , y lo mismo cuando quiero cerrar el menú de nuevo.

PD: como he dicho estoy muy verde en esto, pero intuyo que es en el argumento destacado en verde más arriba dentro de function sidebar2 donde tengo que poner algo parecido a una variable pero que atienda a los valores que produce function sidebar ,pero como ya he dicho no tengo ni pajolera idea de cómo puedo ponerlo, y tampoco he encontrado (o no he sabido encontrar) nada de ayuda por internet, así que si me pudieseis echar un cable os estaría más que agradecido, porque ahora mismo estoy totalmente estancado.

Un saludo!

[Mostolexs]

Nadie sabe cómo puedo hacerlo? o alguna manera alternativa de conseguir que esos 2 elementos estén fijados?