Bonjour à toutes et tous,
Comme précisé dans le titre je n'y connais rien en JS. Merci pour votre indulgence.
Je rencontre 3 problèmes. Pour ne pas multiplier les discussions je vous les expose en bloc car il est possible que les deux premiers problèmes soient liés. A vous de déterminer si je dois créer un poste différent pour chacun d'eux. Merci.
Après de multiples prises de tête j'ai fini par décodé le JS (avec Jquery) d'un menu déroulant trouvé sur le net et je l'ai transformé à mon gout. J'y ai même ajouté quelques effets supplémentaires.
1 -
Tout fonctionne à merveille sous FF 3.6 - Opéra 10.61 - Google Chrome 0.0 - Safari 5.31 mais pas sous IE 7.0.6. alors que les Scripts ASP sont activés dans les options.
Le menu reste désespérément fermé.
De plus, dans IE7 toujours, si je clique sur un onglet du menu (qui est censé se dérouler avec un "mouseenter"), IE7 m'ouvre le dossier du site sur lequel je travaille (C:\Documents and Settings\...).
Il est possible que mon code JS comporte des erreurs. La réponse sera peut-être dans la solution du problème n°2
2 -
D'après ce que j'ai pu lire et comprendre il est préférable (et même recommandé) de placer le code JS juste avant la balise head fermante.
Malheureusement, à cet endroit, mon code ne fonctionne sur aucun navigateur.
Placé dans le Html, juste avant le premier onglet, seul celui-ci fonctionne. Avant le second, les deux premiers fonctionnent ... et ainsi de suite.
Donc, je dois placer mon JS dans le code Html après mon menu de navigation pour qu'il fonctionne entièrement.
Il semblerait qu'il me manque une sorte de balise "appelante" pour pouvoir loger mon JS dans le "head". J'ai essayé pas mal de combinaisons sans succès.
3 -
J'ai fais pointer les liens du menu vers la page en ligne :"Site en construction".
Quand je reviens en arrière dans le navigateur, le déroulant reste affiché dans sa dernière position. A savoir : menu déroulé et focus sur le lien (encadré en pointillés). Il faut faire un mouseenter et leave sur l'onglet principal du menu qui est déroulé pour qu'il se referme.
Je n'arrive pas à trouver la solution.
Voilà. J'espère avoir été assez explicite que pour vous éclairer sur mes petits soucis de débutant en JS.
Voici le HTML:
Voici le JS
Et voici le CSS
Désolé pour la longueur. Merci d'avance à mes sauveurs.
A+/>DonVtt
Modifié par donvtt (19 Aug 2010 - 20:34)
Comme précisé dans le titre je n'y connais rien en JS. Merci pour votre indulgence.
Je rencontre 3 problèmes. Pour ne pas multiplier les discussions je vous les expose en bloc car il est possible que les deux premiers problèmes soient liés. A vous de déterminer si je dois créer un poste différent pour chacun d'eux. Merci.
Après de multiples prises de tête j'ai fini par décodé le JS (avec Jquery) d'un menu déroulant trouvé sur le net et je l'ai transformé à mon gout. J'y ai même ajouté quelques effets supplémentaires.
1 -
Tout fonctionne à merveille sous FF 3.6 - Opéra 10.61 - Google Chrome 0.0 - Safari 5.31 mais pas sous IE 7.0.6. alors que les Scripts ASP sont activés dans les options.
Le menu reste désespérément fermé.
De plus, dans IE7 toujours, si je clique sur un onglet du menu (qui est censé se dérouler avec un "mouseenter"), IE7 m'ouvre le dossier du site sur lequel je travaille (C:\Documents and Settings\...).
Il est possible que mon code JS comporte des erreurs. La réponse sera peut-être dans la solution du problème n°2
2 -
D'après ce que j'ai pu lire et comprendre il est préférable (et même recommandé) de placer le code JS juste avant la balise head fermante.
Malheureusement, à cet endroit, mon code ne fonctionne sur aucun navigateur.
Placé dans le Html, juste avant le premier onglet, seul celui-ci fonctionne. Avant le second, les deux premiers fonctionnent ... et ainsi de suite.
Donc, je dois placer mon JS dans le code Html après mon menu de navigation pour qu'il fonctionne entièrement.
Il semblerait qu'il me manque une sorte de balise "appelante" pour pouvoir loger mon JS dans le "head". J'ai essayé pas mal de combinaisons sans succès.
3 -
J'ai fais pointer les liens du menu vers la page en ligne :"Site en construction".
Quand je reviens en arrière dans le navigateur, le déroulant reste affiché dans sa dernière position. A savoir : menu déroulé et focus sur le lien (encadré en pointillés). Il faut faire un mouseenter et leave sur l'onglet principal du menu qui est déroulé pour qu'il se referme.
Je n'arrive pas à trouver la solution.
Voilà. J'espère avoir été assez explicite que pour vous éclairer sur mes petits soucis de débutant en JS.
Voici le HTML:
<body>
<div id="conteneur">
<div id="div_menu">
<div id="ongl_pro"><a href="">Professionnels</a>
<ul id="menu_pro">
<li><a href="http://www.maquillarts.com">Téâtre-Opéra</a></li>
<li><a href="http://www.maquillarts.com">Ciné-TV-Pub</a></li>
<li><a href="http://www.maquillarts.com">Photo</a></li>
<li><a href="http://www.maquillarts.com">Défilés</a></li>
</ul>
</div>
</div>
</div>
</body>
Voici le JS
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$("#ongl_pro").mouseenter(function(){
$("ul#menu_pro").fadeIn({ opacity: 1, fontSize: "0.9em", }, 50 );
$('ul#menu_pro li a').mouseenter(function () {
$(this).animate({ fontSize: "1.3em"}, 150 );
});
$('ul#menu_pro li a').mouseleave(function () {
$(this).animate({ fontSize: "0.9em"}, 100 );
});
$("#ongl_pro").mouseleave(function(){
$("ul#menu_pro").fadeOut({ opacity: 0, fontSize: "0.9em", }, 50 );
});
});
Et voici le CSS
/*-----Menu-navigation-----*/
#div_menu{
margin: auto;
margin-bottom: 70px;
padding: 0;
display: table;
width: 1215px;
height: 38px;
}
#ongl_pro, #ongl_particulier, #ongl_bio, #ongl_delires, #ongl_liens, #ongl_contact{
float: left;
width: 200px;
line-height: 35px;
text-align: center;
color: #FFF;
background-image: url(button2_200x35.png);
background-repeat: no-repeat;
}
#ongl_pro a, #ongl_particulier a, #ongl_bio a, #ongl_delires a, #ongl_liens a, #ongl_contact a{
text-decoration: none;
color: #ccc;
display: block;
}
#ongl_pro li a, #ongl_particulier li a, #ongl_bio li a, #ongl_delires li a, #ongl_liens li a, #ongl_contact li a{
color: #ccc;
}
#ongl_pro:hover, #ongl_particulier:hover, #ongl_bio:hover, #ongl_delires:hover, #ongl_liens:hover, #ongl_contact:hover{
background-image: url(button3_200x35.png);
background-repeat: no-repeat;
}
#menu_pro, #menu_particulier, #menu_bio, #menu_delires, #menu_liens, #menu_contact{
display: none;
margin: 0;
padding: 0;
width: 199px;
list-style: none;
line-height: 25px;
text-align: left;
text-indent: 15px;
position: absolute;
z-index: 2;
background-color: #010101;
border-bottom: 1px solid #F94A00;
}
#menu_pro li:hover a, #menu_particulier li:hover a, #menu_bio li:hover a, #menu_delires li:hover a, #menu_liens li:hover a, #menu_contact li:hover a{
background-color: #333333;
color: #fff;
text-indent: 30px;
}
/*-----Fin-menu-navigation-----*/
Désolé pour la longueur. Merci d'avance à mes sauveurs.
A+/>DonVtt
Modifié par donvtt (19 Aug 2010 - 20:34)
