Bonjour à tous,
j'ai un soucis avec le menu de mon site :
Dans mon menu (situé sur la gauche mon site), si on clique sur un châpitre, un second menu s'affiche sur la droite. Seulement voilà, j'ai une frame et cette seconde partie ne s'affiche pas.... qui peut m'aider ?
Le fichier js :
j'ai un soucis avec le menu de mon site :
Dans mon menu (situé sur la gauche mon site), si on clique sur un châpitre, un second menu s'affiche sur la droite. Seulement voilà, j'ai une frame et cette seconde partie ne s'affiche pas.... qui peut m'aider ?
<html>
<head>
<title>Test du menu</title>
<script language="javascript" src="menu.js"></script>
<link rel="stylesheet" type="text/css" href="menu.css">
<style type="text/css">
body {
background-color:#CEB89A;
font-family: monotype Corsiva;
color:#CEB89A;
scrollbar-base-color:#CEB89A;
scrollbar-track-color:#CEB89A;
scrollbar-arrow-color:#CEB89A;
}
a:hover {color:#CEB89A;}
a {text-decoration:none; color:#FFCC66;}
</style>
</head>
<body>
<div id="conteneurmenu">
<script language="Javascript" type="text/javascript">
// pour éviter le clignotement désagréable
preChargement();
</script>
<p id="menu1" class="menu"
onmouseover="MontrerMenu('ssmenu1');"
onmouseout="CacherDelai();">
<a href="introcentre.html" target="centre"
onfocus="MontrerMenu('ssmenu1');"
title="Acceuil">Acceuil<span> :</span></a>
</p>
<ul id="ssmenu1" class="ssmenu"
onmouseover="AnnulerCacher();"
onmouseout="CacherDelai();"
onfocus="AnnulerCacher();"
onblur="CacherDelai();">
<li>
</ul>
<!-- ----------------------------------------- -->
<p id="menu2" class="menu"
onmouseout="CacherDelai();"
onmouseover="MontrerMenu('ssmenu2');">
<a href="#"
onfocus="MontrerMenu('ssmenu2');">Nos produits<span> :</span></a>
</p>
<ul id="ssmenu2" class="ssmenu"
onmouseover="AnnulerCacher();"
onmouseout="CacherDelai();"
onfocus="AnnulerCacher();"
onblur="CacherDelai();">
<li>
<a href="no1/index.html" target="centre">no1<span> ;</span></a>
</li>
<li>
<a href="no2/index.html" target="centre">no2<span> ;</span></a>
</li>
<li>
<a href="no3/index.html" target="centre">no3<span> ;</span></a>
</li>
<li>
<a href="no4/index.html" target="centre">no4<span> ;</span></a>
</li>
<li>
<a href="no5/index.html" target="centre">no5<span> ;</span></a>
</li>
</ul>
<!-- ----------------------------------------- -->
<p id="menu3" class="menu"
onmouseover="MontrerMenu('ssmenu3');"
onmouseout="CacherDelai();">
<a href="formulaire.php" target="centre"
onfocus="MontrerMenu('ssmenu3');">Commande</a>
</p>
<!-- ----------------------------------------- -->
<p id="menu4" class="menu"
onmouseout="CacherDelai();"
onmouseover="MontrerMenu('ssmenu4');">
<a href="contact.php" target="centre"
onfocus="MontrerMenu('ssmenu4');">Contact<span> :</span></a>
</p>
<ul id="ssmenu4" class="ssmenu"
onmouseover="AnnulerCacher();"
onmouseout="CacherDelai();"
onfocus="AnnulerCacher();"
onblur="CacherDelai();">
</ul>
<p id="menu5" class="menu"
onmouseout="CacherDelai();"
onmouseover="MontrerMenu('ssmenu5');">
<a href="noustrouver.html" target="centre"
onfocus="MontrerMenu('ssmenu5');">Où nous trouver ?<span>.</span></a>
</p>
</div>
<script language="Javascript" type="text/javascript">var nbmenu=5;
Chargement();</script>
</body>
</html>
Le fichier js :
var vertical = true;
var centrer_menu = false;
var largeur_menu = 170;
var hauteur_menu = 35;
var largeur_sous_menu = 170;
var largeur_auto_ssmenu = true;
var espace_entre_menus = 20;
var top_menu = 2;
var top_ssmenu = top_menu + 28;
var left_menu = 0;
var left_ssmenu = largeur_menu+2;
var delai = 1000; // en milliseconde
var marge_en_haut_de_page = top_menu + 40;
var marge_a_gauche_de_la_page = largeur_menu + 10;
var suivre_le_scroll=true;
var cacher_les_select=true;
var nbmenu = 0;
var timeout;
var agt = navigator.userAgent.toLowerCase();
var isMac = (agt.indexOf('mac') != -1);
var isOpera = (agt.indexOf('opera') != -1);
var IEver = parseInt(agt.substring(agt.indexOf('msie ') + 5));
var isIE = ((agt.indexOf('msie')!=-1 && !isOpera && (agt.indexOf('webtv')==-1)) && !isMac);
var isIE5win = (isIE && IEver >= 5);
var isIE5mac = ((agt.indexOf('msie') != -1) && isMac);
var isSafari = (agt.indexOf('safari') != -1);
var reg = new RegExp("px", "g");
window.onscroll = function()
{
if (suivre_le_scroll && (isIE || isIE5mac))
{
if (isIE5mac) document.getElementById("conteneurmenu").style.visibility="hidden";
var cumul=0;
for(i=1;i<=nbmenu;i++)
{
var scrollTop = (document.documentElement&&document.documentElement.scrollTop
?document.documentElement.scrollTop
:document.body.scrollTop);
if (!vertical) {
document.getElementById("menu"+i).style.top = scrollTop + top_menu + "px";
if (document.getElementById("ssmenu"+i))//undefined
document.getElementById("ssmenu"+i).style.top = scrollTop + top_ssmenu + "px";
} else {
document.getElementById("menu"+i).style.top = scrollTop
+(((i-1)*espace_entre_menus)+cumul+1+top_menu)+"px";
if (document.getElementById("ssmenu"+i))//undefined
document.getElementById("ssmenu"+i).style.top = scrollTop
+(((i-1)*espace_entre_menus)+cumul+1+top_menu)+"px";
cumul += isFinite(hauteur_menu)?hauteur_menu:hauteur_menu[i-1];
}
}
if (isIE5mac) document.getElementById("conteneurmenu").style.visibility="visible";
}
}
function preChargement()
{
if (document.getElementById("conteneurmenu"))
document.getElementById("conteneurmenu").style.visibility="hidden";
}
function Chargement() {
//Compte nbmenu
nbmenu = 0;
while (document.getElementById("menu"+(nbmenu+1)))
nbmenu++;
document.getElementById("conteneurmenu").style.visibility="hidden";
trimespaces();
with(document.body.style) {
if (!vertical) marginTop=marge_en_haut_de_page+"px";
else marginLeft=marge_a_gauche_de_la_page+"px";
}
positionne();
CacherMenus();
http://iubito.free.fr/forum/read.php?id=705&f=2
if(isSafari)
document.getElementById('conteneurmenu').style.fontSize='10px';
document.getElementById("conteneurmenu").style.visibility='';
}
window.onresize = Chargement;
function positionne() {
//Calcul hauteur et largeur fenêtre compatible avec certains doctypes IE
var largeur_fenetre;
if (document.documentElement && document.documentElement.clientWidth) {
largeur_fenetre = document.documentElement.clientWidth;
} else if (document.body && document.body.clientWidth) {
largeur_fenetre = document.body.clientWidth;
} else if (window.innerWidth) {
largeur_fenetre = window.innerWidth;
}
var hauteur_fenetre;
if (document.documentElement && document.documentElement.clientHeight) {
hauteur_fenetre = document.documentElement.clientHeight;
} else if (document.body && document.body.clientHeight) {
hauteur_fenetre = document.body.clientHeight;
} else if (window.innerHeight) {
hauteur_fenetre = window.innerHeight;
}
if (centrer_menu) {
if (!vertical) {
var largeur_totale = espace_entre_menus * (nbmenu-1);
if (isFinite(largeur_menu))
largeur_totale += largeur_menu * nbmenu;
else {
for (i = 1; i <= nbmenu; i++)
largeur_totale += largeur_menu[i-1];
}
left_menu = (largeur_fenetre - largeur_totale)/2;
} else {
var hauteur_totale = espace_entre_menus * (nbmenu-1);
if (isFinite(hauteur_menu))
hauteur_totale += hauteur_menu * nbmenu;
else {
for (i = 1; i <= nbmenu; i++)
hauteur_totale += hauteur_menu[i-1];
}
top_menu = (hauteur_fenetre - hauteur_totale)/2;
}
}
//Menus
var cumul = 0;
for(i=1;i<=nbmenu;i++) {
with(document.getElementById("menu"+i).style) {
if (!vertical) {
top=top_menu+"px";
left=(((i-1)*espace_entre_menus)+cumul+1+left_menu)+"px";
} else {
top=(((i-1)*espace_entre_menus)+cumul+1+top_menu)+"px";
left=left_menu+"px";
}
if (!suivre_le_scroll || isIE || isIE5mac)
position="absolute";
else position="fixed";
//if (vertical) height=hauteur_menu+"px";
margin="0";
zIndex="2";
if (vertical || isFinite(largeur_menu))
width=largeur_menu+"px";
else
width=largeur_menu[i-1]+"px";
if ((!vertical && isFinite(largeur_menu)) || (vertical && isFinite(hauteur_menu))) {
cumul += (!vertical?largeur_menu:hauteur_menu);
}
else {
cumul += (!vertical?largeur_menu[i-1]:hauteur_menu[i-1]);
if (vertical) height=hauteur_menu[i-1]+"px";
}
}
}
//Sous-menus
cumul = 0;
for(i=1;i<=nbmenu;i++) {
if (document.getElementById("ssmenu"+i))//undefined
{
with(document.getElementById("ssmenu"+i).style) {
if (!suivre_le_scroll || isIE || isIE5mac)
position="absolute";
else position="fixed";
if (!vertical) {
top=top_ssmenu+"px";
left=(((i-1)*espace_entre_menus)+cumul+1+left_menu)+"px";
} else {
left=left_ssmenu+"px";
top=(((i-1)*espace_entre_menus)+cumul+1+top_menu)+"px";
}
if (isIE || isOpera || isIE5mac || !largeur_auto_ssmenu) {
if (isFinite(largeur_sous_menu))
width = largeur_sous_menu+(largeur_sous_menu!="auto"?"px":"");
else
width = largeur_sous_menu[i-1]+(largeur_sous_menu[i-1]!="auto"?"px":"");
}
else width = "auto";
if (!vertical && !isIE5mac) {
//repositionnement si déborde à droite
if ((width != "auto")
&& ((left.replace(reg,'').valueOf()*1 + width.replace(reg,'').valueOf()*1) > largeur_fenetre))
left = (largeur_fenetre-width.replace(reg,'').valueOf())+"px";
}
margin="0";
zIndex="3";
}
}
if ((!vertical && isFinite(largeur_menu)) || (vertical && isFinite(hauteur_menu))) {
cumul += (!vertical?largeur_menu:hauteur_menu);
}
else {
cumul += (!vertical?largeur_menu[i-1]:hauteur_menu[i-1]);
}
}
}
function MontrerMenu(strMenu) {
AnnulerCacher();
CacherMenus();
if (document.getElementById(strMenu))//undefined
with (document.getElementById(strMenu).style)
visibility="visible";
SelectVisible("hidden",document.getElementsByTagName('select'));
}
function CacherDelai() {
timeout = setTimeout('CacherMenus()',delai);
}
function AnnulerCacher() {
if (timeout) {
clearTimeout(timeout);
}
}
function CacherMenus() {
for(i=1;i<=nbmenu;i++) {
if (document.getElementById("ssmenu"+i))//undefined
with(document.getElementById("ssmenu"+i).style)
visibility="hidden";
}
SelectVisible("visible",document.getElementsByTagName('select'));
}
function trimespaces() {
//Contourne un bug d'IE5/win... il ne capte pas bien les css pour les <li>, donc on les vire !
if(isIE5win) {
for(i=1;i<=nbmenu;i++) {
if (document.getElementById("ssmenu"+i))//undefined
with(document.getElementById("ssmenu"+i))
innerHTML = innerHTML.replace(/<LI>|<\/LI>/g,"");
}
}
}
function SelectVisible(v,elem) {
if (cacher_les_select && (isIE||isIE5win))
for (var i=0;i<elem.length;i++) elem[i].style.visibility=v;
}