This may be possible but might be difficult to implement cleanly (especially across different devices).
Try this as an example:
(1) Download the Multi-Level Push Menu zip file from this web page.
(2) Extract the zip file to your hard drive.
(3) Create two sample galleries with JuiceboxBuidler-Pro and name the gallery folders 'gallery1' and 'gallery2'.
(4) Place the complete gallery folders into the 'MultiLevelPushGallery' folder (from the extracted zip file).
(5) Create a new HTML file named 'main.html' using the code below.
(4) Place the 'main.html' file in the 'MultiLevelPushGallery' folder (alongside the gallery folders).
(5) Open the 'main.html' file in a browser and click the Back Button to see the menu system in action.
There are some problems with this which would need to be ironed out (such as the need to click the Back Button twice after selecting a new gallery to close the menu) but I hope it points you in the right direction.
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Level Push Menu - Demo 1</title>
<meta name="description" content="Multi-Level Push Menu: Off-screen navigation with multiple levels" />
<meta name="keywords" content="multi-level, menu, navigation, off-canvas, off-screen, mobile, levels, nested, transform" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/icons.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<script src="js/classie.js"></script>
<script src="js/mlpushmenu.js"></script>
</head>
<body>
<div class="container">
<!-- Push Wrapper -->
<div class="mp-pusher" id="mp-pusher">
<!-- mp-menu -->
<nav id="mp-menu" class="mp-menu">
<div class="mp-level">
<h2 class="icon icon-world">Galleries</h2>
<ul>
<li><a href="#" onclick="javascript: loadGallery('gallery1/'); return false;">Gallery 1</a></li>
<li><a href="#" onclick="javascript: loadGallery('gallery2/'); return false;">Gallery 2</a></li>
</ul>
</div>
</nav>
<!-- /mp-menu -->
<div class="scroller"><!-- this is for emulating position fixed of the nav -->
<div class="scroller-inner">
<script src="gallery1/jbcore/juicebox.js"></script>
<script>
function loadGallery(base) {
jb = new juicebox({
baseUrl: base,
backButtonPosition: 'TOP',
backButtonUrl: '#',
backButtonUseIcon: 'TRUE',
containerId: 'juicebox-container'
});
jb.onInitComplete = function() {
var backElements = document.getElementsByClassName('jb-go-back-icon');
var backButton = backElements[0];
new mlPushMenu(document.getElementById('mp-menu'), backButton);
};
}
$(document).ready(function () {
loadGallery('gallery1/');
});
</script>
<div id="juicebox-container"></div>
</div><!-- /scroller-inner -->
</div><!-- /scroller -->
</div><!-- /pusher -->
</div><!-- /container -->
</body>
</html>