Difficulté pr intégrer un menu CSS ds html

Fermé

Lolabass - 29 avril 2008 à 12:38
Lolabass - 7 juin 2008 à 16:08

Bonjour,

Je réalise un site internet via dreamwaever. Je viens de créer un menu en CSS facilement grace au site IzzyMenu qui génère le code du menu. Seulement je n'arrive pas à l'intégrer à ma page. J'ai regardé tous les posts sur différents forums qui répondent à ce même type de pb. J'ai appliqué toutes les solutions et pourtant ca ne marche tjrs pas.

Le code (qui est donné dans un fichier ".js") commence par "var etccc". J'ai lu qu'apparemment ce type de menu en css mélange css et java script. Peut-être est-ce cela qui pose pb...?

J'ai essayé de mettre ceci : <script type="text/javascript" src="chrome.js"></script> entre deux balises body, avec :

- le code après. Ca marche pas.
- le code avant. Ca marche pas.
- le code entre <script type="text/javascript" src="chrome.js"> et </script>. Ca marche pas.
- sans mettre le code. Ca marche pas.

Pouvez vous m'aider ?

A voir également:

Difficulté pr intégrer un menu CSS ds html
Menu déroulant excel - Guide
Intégrer une vidéo dans un powerpoint - Guide
Editeur html - Télécharger - HTML
Windows 11 menu démarrer classique - Guide
Canon quick menu - Télécharger - Utilitaires

2 réponses

Réponse 1 / 2

Lolabass
30 avril 2008 à 11:54

Merci pr ta réponse. Voici les renseignements demandés :

Le code de ma page html où je veux insérer le menu :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style>

</style>

</head>

<body>

</body>

</html>

Le nom généré par IzzyMenu : c'est un fichier qui s'appelle "chrome.js" et qui contient ceci :

var cssdropdown={
disappeardelay: 500, //set delay in miliseconds before menu disappears onmouseout
disablemenuclick: false, //when user clicks on a menu item with a drop down menu, disable menu item's link?
enableswipe: 1, //enable swipe effect? 1 for yes, 0 for no

//No need to edit beyond here////////////////////////
dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, swipetimer: undefined, bottomclip:0,

getposOffset:function(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
},

swipeeffect:function(){
if (this.bottomclip<parseInt(this.dropmenuobj.offsetHeight)){
this.bottomclip+=10+(this.bottomclip/10) //unclip drop down menu visibility gradually
this.dropmenuobj.style.clip="rect(0 auto "+this.bottomclip+"px 0)"
}
else
return
this.swipetimer=setTimeout("cssdropdown.swipeeffect()", 10)
},

showhide:function(obj, e){
if (this.ie || this.firefox)
this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
if (this.enableswipe==1){
if (typeof this.swipetimer!="undefined")
clearTimeout(this.swipetimer)
obj.clip="rect(0 auto 0 0)" //hide menu via clipping
this.bottomclip=0
this.swipeeffect()
}
obj.visibility="visible"
}
else if (e.type=="click")
obj.visibility="hidden"
},

iecompattest:function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
},

clearbrowseredge:function(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=this.ie && !window.opera? this.iecompattest().scrollLeft+this.iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure) //move menu to the left?
edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=this.ie && !window.opera? this.iecompattest().scrollTop : window.pageYOffset
var windowedge=this.ie && !window.opera? this.iecompattest().scrollTop+this.iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
},

dropit:function(obj, e, dropmenuID){
if (this.dropmenuobj!=null) //hide previous menu
this.dropmenuobj.style.visibility="hidden" //hide menu
this.clearhidemenu()
if (this.ie||this.firefox){
obj.onmouseout=function(){cssdropdown.delayhidemenu()}
obj.onclick=function(){return !cssdropdown.disablemenuclick} //disable main menu item link onclick?
this.dropmenuobj=document.getElementById(dropmenuID)
this.dropmenuobj.onmouseover=function(){cssdropdown.clearhidemenu()}
this.dropmenuobj.onmouseout=function(e){cssdropdown.dynamichide(e)}
this.dropmenuobj.onclick=function(){cssdropdown.delayhidemenu()}
this.showhide(this.dropmenuobj.style, e)
this.dropmenuobj.x=this.getposOffset(obj, "left")
this.dropmenuobj.y=this.getposOffset(obj, "top")
this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
}
},

contains_firefox:function(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
},

dynamichide:function(e){
var evtobj=window.event? window.event : e
if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
this.delayhidemenu()
else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
this.delayhidemenu()
},

delayhidemenu:function(){
this.delayhide=setTimeout("cssdropdown.dropmenuobj.style.visibility='hidden'",this.disappeardelay) //hide menu
},

clearhidemenu:function(){
if (this.delayhide!="undefined")
clearTimeout(this.delayhide)
},

startchrome:function(){
for (var ids=0; ids<arguments.length; ids++){
var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
var relvalue=menuitems[i].getAttribute("rel")
menuitems[i].onmouseover=function(e){
var event=typeof e!="undefined"? e : window.event
cssdropdown.dropit(this,event,this.getAttribute("rel"))
}
}
}
}
}

}

Le nom (adresse) de mon fichier css, et bien je n'en ai pas. Quand j'ai download le menu, on reçoit la page html où on voit le menu tout seul dans une page web, le fichier .js, et le dossier avec les images utiles pour former le menu. Et c'est tout.

Voici tout de même le code source de la page html où il y a le menu :

<script type="text/javascript" src="chrome.js"></script>
<style>
#MainMenu
{
height:35px;
background: #000000;
margin:0;
border-style:solid;
border-color:#AE1E39;
border-top-width:0;
border-right-width:0;
border-bottom-width:3px;
border-left-width:0;
}
#tab
{
margin:0;
top:0;
}
#tab ul
{
margin:0;
padding:0;
list-style:none;
float:left;
}
#tab li
{
display:inline;
float:left;
margin:0 1px 0 0 ;
padding:0;
}
#tab a
{
background: url("images/bright_114.gif") no-repeat right top;
margin:0;
padding:0;
text-decoration:none;
border:0;
display:block;
float:left;
}
#tab a span
{
display:block;
background:url("images/bleft_114.gif") no-repeat left top;
padding:0 22px 0 22px;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#FFFFFF;
font-weight:bold;
line-height:35px;
}
#tab a:hover,#tab li.item_active a
{
background-position:right bottom;
border-color:;
}
#tab a:hover span,#tab li.item_active a span
{
background-position:left bottom;
color:#FFFFFF;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
.dropmenudiv
{
position:absolute;
top:0;
float:left;
display:block;
visibility:hidden;
border-style:solid;
border-color:#AE1E39;
border-top-width:0;
border-right-width:0;
border-bottom-width:3px;
border-left-width:0;
background: #000000;
color:#FFFFFF;
z-index:100;
text-decoration:none;
padding:0;
}
.dropmenudiv ul
{
margin:0;
padding:0;
list-style:none;
}
.dropmenudiv li
{
display:inline;
margin:0;
padding:0;
}
.dropmenudiv a:link, .dropmenudiv a:visited
{
width:180px;
margin:0 1px 0 0 ;
padding:0;
display:block;
border:0 solid ;
color:#FFFFFF;
background:url("images/bleft_114.gif") no-repeat left top;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
.dropmenudiv a span
{
float:left;
display:block;
line-height:35px;
background:url("images/bright_114.gif") no-repeat right top;
padding:0 22px 0 22px;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#FFFFFF;
}
.dropmenudiv a span
{
float:none;
}
.dropmenudiv a:hover
{
border:0 solid ;
background-position:left bottom;
font-weight:bold;
font-style:normal;
text-decoration:none;
color:#FFFFFF;
}
.dropmenudiv a:hover span
{
background-position:right bottom;
color:#FFFFFF;
font-weight:bold;
}

</style>
<div id="MainMenu">
<div id="tab">
<ul>
<li class="item_active"><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu_101')"><span>Lolabass</span></a></li>
<li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu_358236')"><span>Sons et vidéos</span></a></li>
<li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu_102')"><span>Concours de basse</span></a></li>
<li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu_104')"><span>Extras</span></a></li>
<li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu_393985')"><span>Web</span></a></li>
</ul>
</div>
</div>

<div id="dropmenu_101" class="dropmenudiv">
<ul>
<li><a href="#"><span>Qui suis-je ?</span></a></li>
<li><a href="#"><span>Photos</span></a></li>
<li><a href="#"><span>Instruments</span></a></li>
<li><a href="#"><span>Ma philo de la zik</span></a></li>
</ul>
</div>

<div id="dropmenu_358236" class="dropmenudiv">
<ul>
<li><a href="#"><span>Album Zoom</span></a></li>
<li><a href="#"><span>Album Duo</span></a></li>
<li><a href="#"><span>Album Lolabass</span></a></li>
<li><a href="#"><span>Extraits vidéos</span></a></li>
<li><a href="#"><span>Leçons via vidéos</span></a></li>
</ul>
</div>

<div id="dropmenu_102" class="dropmenudiv">
<ul>
<li><a href="#"><span>Concours de basse 1</span></a></li>
<li><a href="#"><span>Concours de basse 2</span></a></li>
<li><a href="#"><span>Concours de basse 3</span></a></li>
<li><a href="#"><span>Concours de basse 4</span></a></li>
</ul>
</div>

<div id="dropmenu_104" class="dropmenudiv">
<ul>
<li><a href="#"><span>Fiches bassistes</span></a></li>
<li><a href="#"><span>Agenda concerts</span></a></li>
<li><a href="#"><span>Chroniques de concerts</span></a></li>
<li><a href="#"><span>Essai de matos</span></a></li>
<li><a href="#"><span>Pédago</span></a></li>
<li><a href="#"><span>Tablatures</span></a></li>
<li><a href="#"><span>Cool Stuff</span></a></li>
</ul>
</div>

<div id="dropmenu_393985" class="dropmenudiv">
<ul>
<li><a href="#"><span>Forum</span></a></li>
<li><a href="#"><span>Liens</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
</ul>
</div>

Voilà, merci bcps pour vos réponses, je galère à faire mon site.

Lolabass
7 juin 2008 à 16:08

Alors c irrésolvable ?

Réponse 2 / 2

IdleMan Messages postés 243 Date d'inscription jeudi 17 janvier 2008 Statut Membre Dernière intervention 25 juin 2012 60
29 avril 2008 à 13:51

Melanger javascript et css ne pose aucun soucis a partir du moment ou l'on sait s'organiser , le probleme viens certainement :
1)D'un mauvais placement et/ou d'un oubli de balises d'appel des fichier js et css
2)D'une modification manuelle du fichier js ou css de ta part

Le mieux ça serais que tu nous donne :

1)Le code de ta page HTML ou tu souhaite mettre ton menu
2)Le nom(adresse) de ton fichier javascript (.js) généré par izzimenu
3)Le nom (adresse) de ton fichier css .
4)L'erreur remarquée lorsque tu lance ta page

Discussions similaires

la balise <br> ou <br />

les entrées et les sortées

Comment retrouver le bouton menu de Tv Tcl