• Registered: 2014-04-19
  • Posts: 48

Topic: to embed a menu [SOLVED]

Good evening,

I would like to embed Juicebox galleries into html pages where there would be also a menu ; I've tried different menus (all with css and javascript), and systematically, there is a conflict (probably due to js). So, I would like to receive an advise to use a menu which would be compatible with Juicebox.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: to embed a menu [SOLVED]

If you are referring to a navigation menu (which is unrelated to your Juicebox galleries), then make sure that your menu does not use any global CSS rules that your Juicebox gallery has no option but to inherit.

If the problem that you are experiencing is that your menu is a drop-down menu but that it does not appear on top of your Juicebox gallery, then give your menu's HTML elements a large 'z-index' value so that the menu is always stacked on top of the gallery (and does not disappear behind it).

If you are currently using a menu and would like me to take a look to see if I can determine exactly what the problem is (and perhaps suggest a solution), then please post the URL to your web page so that I can take a look.

If you are looking to use a menu to switch between different Juicebox galleries on a web page, then please see the 'Switching between Multiple Galleries using JavaScript' example in the Embedding Multiple Galleries support section.

  • Registered: 2014-04-19
  • Posts: 48

Re: to embed a menu [SOLVED]

Thanks to your advise with the z-index (high), this pb is suppressed, but there is still one : the location of the menu ; depending of the pages, it isn't always the same ; example: http://vercorshandisport.org/html5/stage2014/stage.php and http://vercorshandisport.org/html5/lafe … feclaz.php. You can easily see the html source code and css is : 

body {font: normal .8em/1.5em Arial, Helvetica, sans-serif;font-size:2;background: #ebebeb;width: 900px;margin: 100px auto;color: #666;}
a {color: #333;}

#nav {margin: 0;padding: 7px 6px 0;background: #7d7d7d url(../images/gradient.png) repeat-x 0 -110px;line-height: 100%;
    border-radius: 2em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
}
#nav li {margin: 0 5px;padding: 0 0 8px;float: left;position: relative;list-style: none;}

/* main level link */
#nav a {font-weight: bold;color: #e7e5e5;text-decoration: none;display: block;padding:  8px 20px;margin: 0;
    -webkit-border-radius: 1.6em;
    -moz-border-radius: 1.6em;
}
#nav a:hover {background: #000;color: #fff;}

/* main level link hover */
#nav .current a, #nav li:hover > a {background: #666 url(../images/gradient.png) repeat-x 0 -40px;color: #444;border-top: solid 0px #f8f8f8;
}

/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {background: non;border: none;color: #666;
}
#nav ul a:hover {background: #0078ff url(../images/gradient.png) repeat-x 0 -100px !important;
    color: #fff !important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}

/* dropdown */
#nav li:hover > ul {display: block;}

/* level 2 list */
#nav ul {display: none;margin: 0;padding: 0;width: 185px;position: absolute;top: 35px;left: 0;
    background: #ddd url(../images/gradient.png) repeat-x 0 0;
    border: solid 1px #b4b4b4;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#nav ul li {float: none;margin: 0;padding: 0;}

/*#nav ul a {font-weight: normal;text-shadow: 0 1px 0 #fff;}*/

/* level 3+ list */
#nav ul ul {left: 181px;top: -3px;}

/* rounded corners of first and last link */
#nav ul li:first-child > a {
    -webkit-border-top-left-radius: 9px;
    -moz-border-radius-topleft: 9px;

    -webkit-border-top-right-radius: 9px;
    -moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
    -webkit-border-bottom-left-radius: 9px;
    -moz-border-radius-bottomleft: 9px;

    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomright: 9px;
}

/* clearfix */
#nav:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#nav {display: inline-block;} 
html[xmlns] #nav {display: block;}
* html #nav {height: 1%;}


#idsize {
height:90%;
font-size:80%;
}

#credit {
background-color:black;
color:white;
width:111.1%;
}

nav {
z-index : 5;
}

(until #idsize, it's css of the menu)

(thank you for an answer so late...)

  • Registered: 2012-04-24
  • Posts: 5,924

Re: to embed a menu [SOLVED]

The positioning of the menu in your web page is due to the CSS in your 'style-menu2.css' file. In this file you have the following code:

body {font: normal .8em/1.5em Arial, Helvetica, sans-serif;background: #ebebeb;width: 900px;margin: 100px auto;color: #666;}

In your http://vercorshandisport.org/html5/lafe … feclaz.php web page, the margin: 100px auto; entry from the line of code above creates a 100px margin around the content of your web page.
In your http://vercorshandisport.org/html5/stage2014/stage.php web page, you have the following code after the 'style-menu2.css' file has loaded.

<style type="text/css">
    body {
        margin: 0px;
    }
</style>

This overrides the body margin rule in the 'style-menu2.css' file, resulting in no margin around the content of your web page.

  • Registered: 2014-04-19
  • Posts: 48

Re: to embed a menu [SOLVED]

Thank you for your explanation : that's clear but I have only a weak experience in CSS...and moreover, maybe is it easy to see...when I change of page (only toward a page which embed a Juicebox gallery), during the transition, the menu moves a little : how could it be suppressed ?

  • Registered: 2012-04-24
  • Posts: 5,924

Re: to embed a menu [SOLVED]

All of your web pages seem to use different code (with different CSS) which accounts for the change in position of your menu across your different web pages.
Also, some pages load your 'style-menu2.css' file whereas others load your 'style-menu4.css' file.
The 'style-menu4.css' file includes the following CSS rules (not found in the 'style-menu2.css' file) which will affect the position of your menu only on web pages which load this file.

#menu_left{
margin-left:20%;
}

#entete_left{
margin-top:7%;
margin-left:16%;
}

Try to use a single web page as a template and change only the content to create new pages.
Also, use the same CSS code for each and every page and the results will be consistent across all your web pages.

  • Registered: 2014-04-19
  • Posts: 48

Re: to embed a menu [SOLVED]

Excuse-me to have not answered quickly : now, all the pages share the same CSS file : 

<link href="../css/style-menu2.css" rel="stylesheet"/>

and the strange behaviour (during a page switch, the menu moves a little) occurs only on an ordinator, but not on the other ones ; so closed pb...

  • Registered: 2012-04-24
  • Posts: 5,924

Re: to embed a menu [SOLVED]

so closed pb...

That's good to hear. Thank you for letting me know.