Sujet Précédent Sujet Suivant

Créer un menu déroulant dans NVU

Fermé
JuEnGa Messages postés 34 Date d'inscription vendredi 9 avril 2010 Statut Membre Dernière intervention 30 octobre 2013 - Modifié par JuEnGa le 19/10/2011 à 23:47
JuEnGa Messages postés 34 Date d'inscription vendredi 9 avril 2010 Statut Membre Dernière intervention 30 octobre 2013 - 24 oct. 2011 à 09:27
Bonjour,

Je suis enseignant en collège et je dois créer un site web pour un voyage scolaire.
Cependant, nous utilisons des logiciels gratuits, tels NVU.
Je voudrais donc créer un menu déroulant du type

https://css.developpez.com/galerie/?page=menus-verticaux
Menu vertical déroulant 1

A partir d'une mise en forme comme celle-ci par exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menu vertical en CSS</title>
<style type="text/css">
<!--
/* CSS issu des tutoriels css.alsacreations.com */
body {font: 1em Verdana, Arial, sans-serif;}
ul#menu {list-style-type: none;} ul#menu li {margin-bottom: 5px;}
ul#menu a {
margin: 0 2px;
width: 120px; height: 20px;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}
ul#menu a:hover {
background: #ccc;
border: 1px solid gray; }
/* mentions et copyright */
div#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
width: 400px;
margin: 1em;
padding: 0.5em;
background: #FFF7D2;
-moz-border-radius:10px;
border-radius:10px;
line-height: 1.1;
font-size: 0.9em;
}
div#mentions a {
text-decoration: none;
color: #222;
}
div#mentions a:hover {
text-decoration: underline;
color: black;
}
-->
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
<li><a href="">Lien 4</a></li>
</ul>
</body>
</html>

Car jusqu'à présent, je vois apparaître les sous-menus mais ils sont fixes et je ne parviens pas à les cacher pour qu'ils apparaissent lors d'un clic sur le menu ou sur un passage de la souris sur le menu.

Si vous pouviez m'aider, vous m'ôteriez une belle épine du pied et me simplifieriez bien la tâche.

Cordialement,



A voir également:

6 réponses

Réponse 1 / 6
JuEnGa Messages postés 34 Date d'inscription vendredi 9 avril 2010 Statut Membre Dernière intervention 30 octobre 2013 1
24 oct. 2011 à 09:27
Bonjour,

C'est du charabia pour moi "appeler les balises...", désolé !

A partir de la page de code que je propose, pourrais-tu me dire pourquoi l'affichage n'apparait pas comme un menu déroulant mais déjà déroulé ?
1
Réponse 2 / 6
a70m Messages postés 2763 Date d'inscription jeudi 21 mai 2009 Statut Contributeur Dernière intervention 2 février 2014 217
20 oct. 2011 à 10:09
Bonjour,

Il faut utiliser 3 langages différents pour cela : HTML, CSS, JavaScript.

Jette un coup d'oeil sur ce tutoriel du SdZ qui pourra sans doute t'aider. http://www.siteduzero.com/tutoriel-3-37795-creer-un-menu-horizontal-deroulant-en-css.html


Cordialement
a70m
0
Réponse 3 / 6
JuEnGa Messages postés 34 Date d'inscription vendredi 9 avril 2010 Statut Membre Dernière intervention 30 octobre 2013 1
Modifié par JuEnGa le 20/10/2011 à 20:42
Bonsoir,

Merci pour le lien.
Mais j'ai bien essayé avec ce tutoriel mais rien n'y fait. Le menu est bien déroulant mais tous les menus et sous-menus sont apparents.
Donc point de déroulement du sous-menu lorsque je passe ma souris sur le menu. Je commence à croire que NVU ne permet pas ce genre de menu déroulant.
0
Réponse 4 / 6
a70m Messages postés 2763 Date d'inscription jeudi 21 mai 2009 Statut Contributeur Dernière intervention 2 février 2014 217
21 oct. 2011 à 19:59
Tu as essayer d'adapter ton code à celui du tuto ou tu es reparti de rien en suivant le tuto de A à Z ?

Cordialement
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
JuEnGa Messages postés 34 Date d'inscription vendredi 9 avril 2010 Statut Membre Dernière intervention 30 octobre 2013 1
22 oct. 2011 à 11:03
Je ne m'y connais pas suffisamment en code pour reprendre les étapes une à une.
J'ai donc repris le code du tuto.

Je vous montre le résultat que je voudrais obtenir
https://www.alsacreations.com/xmedia/tuto/exemples/accordeon/menu_demo.html

Je vous insère la page de code pour que vous me disiez ce qui ne marche pas...
Les menus sont toujours apparents :(

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menu déroulant top</title>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<style type="text/css">
#navigation {
margin: 0;
padding: 0;
list-style: none;
background: #000;
color: #fff;
width: 200px;
font: 1.2em "Trebuchet MS", sans-serif;
}
#navigation a, #navigation span {
display: block;
padding: 4px 10px;
color: #fff;
text-decoration: none;
background: #000 url(menu-item.png) left bottom no-repeat;
}
#navigation .toggleSubMenu a, #navigation .toggleSubMenu span {
background-image: url(menu-item-deroule.png);
}
#navigation .open a, #navigation .open span {
background-image: url(menu-item-enroule.png);
}
#navigation a:hover, #navigation a:focus, #navigation a:active {
text-decoration: underline;
}
#navigation .subMenu {
font-size: .8em;
background: #ccc url(subMenu.png) 0 0 repeat-x;
font-size: .9em;
margin: 0;
padding: 0;
border-bottom: 1px solid #666;
}
#navigation ul.subMenu a {
background: none;
padding: 3px 20px;
}
</style><!--[if lte IE 6]>
<style type="text/css">
li {
height: 1px;
}
</style>
<![endif]-->
<script type="text/javascript" src="jquery-1.2.1.js"></script>
<script type="text/javascript">
<!--
$(document).ready( function () {
// On cache les sous-menus :
$(".navigation ul.subMenu").hide();
// On sélectionne tous les items de liste portant la classe "toggleSubMenu"
// et on remplace l'élément span qu'ils contiennent par un lien :
$(".navigation li.toggleSubMenu span").each( function () {
// On stocke le contenu du span :
var TexteSpan = $(this).text();
$(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
} ) ;
// On modifie l'évènement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$(".navigation li.toggleSubMenu > a").click( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul.subMenu:visible").length != 0) {
$(this).next("ul.subMenu").slideUp("normal");
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
$(".navigation ul.subMenu").slideUp("normal");
$(this).next("ul.subMenu").slideDown("normal");
}
// On empêche le navigateur de suivre le lien :
return false;
}); } ) ;
// -->
</script>
</head>
<body>
<ul id="navigation">
<li><a href="" title="">Item 1</a></li>
<li class="toggleSubMenu"><span>Item 2</span>
<ul class="subMenu">
<li><a href="" title="">Item 2.1</a></li>
<li><a href="" title="">Item 2.2</a></li>
<li><a href="" title="">Item 2.3</a></li>
</ul>
</li>
<li class="toggleSubMenu"><span>Item 3</span>
<ul class="subMenu">
<li><a href="" title="">Item 3.1</a></li>
<li><a href="" title="">Item 3.2</a></li>
</ul>
</li>
<li><a href="" title="">Item 4</a></li>
</ul>
</body>
</html>



Par avance un grand merci
0
Réponse 6 / 6
a70m Messages postés 2763 Date d'inscription jeudi 21 mai 2009 Statut Contributeur Dernière intervention 2 février 2014 217
22 oct. 2011 à 19:30
Dans ta page à toi, as-tu pensé à 'appeler' les JavaScripts dans tes balises <head> ?

Cordialement
0

Discussions similaires

créer une adresse gmail pour une autre personne
Emma33000 -
Emma33000 -

2 réponses