Bonjour,
je désire créer un menu vertical déroulant : http://css.developpez.com/galerie/?page … ticaux#MV1.
C'est le menu 3 que je souhaite. J'ai donc telechargé les fichiers (css, js et html), pour en faire un mix avec le code Thelia.
Voici mon code (menu.html) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Menu vertical déroulant vers la droite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="functions.js"></script>
</head>
<body>
<div id="moteurEtCatalogue">
<div id="moteurDeRecherche">
<h3>Recherche</h3>
<form action="#URLRECHERCHE" method="post" name="recherche" id="recherche">
<input name="motcle" type="text" value='Recherche' onclick="this.value='';" />
<p><button type="submit" class="bouton"><span><span>OK</span></span></button></p>
</form>
</div>
<div id="accueil"><ul><li><a href="index.php">Accueil boutique</a></li></ul></div>
<div id="menuCatalogue">
<h3>Catalogue</h3>
<div id="menu">
<div class="menu" id="menu1" onmouseover="affiche(this)">
<THELIA_MENU_RUBRIQUES type="RUBRIQUE" parent="0" classement="manuel">
<li><a href="#URL" #FILTRE_egalite(#RUBRIQUE_ID||#ID||class="selection")>#TITRE</a></li>
<div class="sousmenu" id="sousmenu1" onmouseout="affiche(this)">
<THELIA_BLOC_SOUS_MENU type="RUBRIQUE" parent="#ID">
<li><a href="#URL" #FILTRE_egalite(#RUBRIQUE_ID||#ID||class="selection")>#TITRE</a></li>
<div class="sousousmenu" id="sousoumenu1" style="display:"none" onmouseout="affiche(this)">
</div>
</div>
<ul>
<THELIA_MENU_RUBRIQUES type="RUBRIQUE" parent="0" classement="manuel">
<li><a href="#URL" #FILTRE_egalite(#RUBRIQUE_ID||#ID||class="selection")>#TITRE</a></li>
<T_BLOC_SOUS_MENU>
<ul>
<THELIA_BLOC_SOUS_MENU type="RUBRIQUE" parent="#ID">
<li><a href="#URL" #FILTRE_egalite(#RUBRIQUE_ID||#ID||class="selection")>#TITRE</a></li>
<THELIA_BLOC_SOUS_SOUS_MENU type="RUBRIQUE" parent="#ID">
<li><a href="#URL" #FILTRE_egalite(#RUBRIQUE_ID||#ID||class="selection")>#TITRE</a></li>
</THELIA_BLOC_SOUS_SOUS_MENU>
</THELIA_BLOC_SOUS_MENU>
</ul>
</T_BLOC_SOUS_MENU>
<//T_BLOC_SOUS_MENU>
</li>
</THELIA_MENU_RUBRIQUES>
</ul>
</div>
</div>
Mon code dans style.css :
/* général
-------------------------------------------------------- */
#moteurEtCatalogue {
float: left;
width:200px;
padding: 0;
margin:25px 0 0 0;
}
#moteurEtCatalogue h3 {
display:none;
}
#accueil, #menuCatalogue {
float: left;
padding: 0;
margin:0 0 18px 0;
width:100%;
}
#accueil ul, #menuCatalogue ul {
padding: 0;
margin:0;
list-style:none;
color:#FFFFFF;
}
#accueil ul li, #menuCatalogue ul li {
font-size:14px;
font-weight:bold;
padding:0;
margin:0 0 1px 0;
}
#accueil ul li a, #menuCatalogue ul li a {
text-decoration:none;
color:#FFF;
border-left:solid 3px #0068b2;
display:block;
background-color:#0081ca;
padding:5px 0 5px 10px;
}
#accueil ul li a:hover, #menuCatalogue ul li a:hover {
text-decoration:none;
background-color:#00529a;
color:#FFF;
border-left:solid 3px #02407a;
}
#menuCatalogue ul li ul {
}
#menuCatalogue ul li ul li {
font-size:12px;
margin:1px 0 0 0;
text-indent:8px;
}
#menuCatalogue ul li ul li a {
border-left:solid 3px #7ca3c5;
background-color:#8fbce3;
}
#menuCatalogue ul li a.selection {
color:#fff;
background-color:#00529a;
border-left:solid 3px #02407a;
}
*{
margin:0;
padding:0;
}
#menu{
margin:20px 0 0 50px;
background:#0f0;
color:#fff;
float:left;
display:inline;
}
#menu div{
width:120px;
text-align:center;
}
.menu{
position:relative;
}
#menu div a:link, #menu div a:visited, #menu div a:hover{
color:#fff;
font-family:arial,sans-serif;
font-size:12px;
text-decoration:none;
padding-top:3px;
height:22px;
display:block;
}
#menu div a:link, #menu div a:visited{
background:#404040;
}
#menu div a:hover, #menu div a:active, #menu div a:focus{
background:#ca0003;
}
.sousmenu{
position:absolute;
left:120px;
top:0;
}
.sousousmenu{
position:absolute;
left:120px;
top:0;
}
/* Recherche
-------------------------------------------------------- */
Et mon code dans "menu.js" :
var obj = null;
function checkHover() {
if (obj) {
obj.find('ul').fadeOut('fast');
} //if
} //checkHover
$(document).ready(function() {
$('#contenuPanier > li').hover(function() {
if (obj) {
obj.find('ul').slideUp('fast');
obj = null;
} //if
$(this).find('ul').slideDown('fast');
}, function() {
obj = $(this);
setTimeout(
"checkHover()",
0); // si vous souhaitez retarder la disparition, c'est ici
});
function affiche(obj){
var id = obj.id;
for(var i = 1; i <= 2; i++){
document.getElementById('sousmenu'+i).style.display = "none";
}
if(document.getElementById('sous'+id)){
document.getElementById('sous'+id).style.display = "block";
}
}
});
C'est le dernier function affiche que j'ai insérer au code initial.
Et voila ce qui s'affiche :
Fatal error: Maximum execution time of 60 seconds exceeded in C:\xampp\htdocs\thelia_1.4.2.1\thelia_1.4.2.1\fonctions\parseur.php on line 215
Le soucis est que je ne comprends le language dans "parseur.php", dc je ne vois pas où est le soucis.
Voila si quelqu'un à une idée ou déjà développé quelque chose de similaire à ce que je souhaite faire, je prends.
Merci.
Last edited by elise1 (29-04-2010 17:04:46)
) 
