how can I integrate this menu (the little green square) in my gallery?
It would not be possible to actually integrate your menu within a gallery itself but you could display the menu on the same web pages as a gallery, by either overlaying the menu on top of the gallery or by displaying it to the side of the gallery.
Take a look at the Embedding Multiple Galleries support section.
What you are looking to achieve might best be represented by the View Resizable Gallery with Side Menu Example.
You can view the source of the example in your browser and copy/modify the code to suit your own needs (replacing the content of the side menu with your own menu).
An alternative solution (using just a single HTML page) would be to use the following template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}
body {
margin: 0px;
background-color: #222222;
}
#menu {
background-color: #222222;
color: #666666;
font-family: sans-serif;
font-size: 20px;
float: left;
padding: 20px 0px 0px 10px;
text-align: center;
height: 100%;
width: 100px;
}
#menu a {
color: #666666;
text-decoration: none;
}
#wrap {
float: right;
height: 100%;
}
</style>
<script type="text/javascript" src="gallery1/jbcore/juicebox.js"></script>
<script type="text/javascript">
function doLayout() {
var windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
var menuWidth = $('#menu').outerWidth();
var galleryHeight = parseInt(windowHeight);
var galleryWidth = parseInt(windowWidth) - parseInt(menuWidth);
$('#wrap').height(galleryHeight);
$('#wrap').width(galleryWidth);
}
function loadGallery(base) {
new juicebox({
baseUrl: base,
containerId: 'juicebox-container'
});
}
$(document).ready(function () {
doLayout();
$(window).on('resize', doLayout);
loadGallery('gallery1/');
});
</script>
<title>Test</title>
</head>
<body>
<div id="menu">
<a href="#" onclick="javascript: loadGallery('gallery1/'); return false;">Gallery 1</a>
<br />
<a href="#" onclick="javascript: loadGallery('gallery2/'); return false;">Gallery 2</a>
</div>
<div id="wrap">
<div id="juicebox-container"></div>
</div>
</body>
</html>
To see how this works, create a couple of test galleries and name the gallery folders 'gallery1' and 'gallery2'.
Next, create an HTML file with the code above and put the file in the same directory as the 'gallery1' and 'gallery2' folders and open the HTML file in a browser.
All you would need to do to customize this to your own requirements would be to replace the content of the 'menu' div with your own menu.
You can create as many galleries as you like and name the folders whatever you like. Just keep each gallery in its own folder keep all the folders in the same directory, alongside the HTML file. The links to each gallery from within your menu would look something like the links in the code above (using the loadGallery function to load the selected gallery using the baseUrl method).