Créer un menu déroulant dans NVU
JuEnGa
Messages postés
34
Date d'inscription
Statut
Membre
Dernière intervention
-
JuEnGa Messages postés 34 Date d'inscription Statut Membre Dernière intervention -
JuEnGa Messages postés 34 Date d'inscription Statut Membre Dernière intervention -
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,
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:
- Créer un menu déroulant dans NVU
- Menu déroulant excel - Guide
- Créer un compte google - Guide
- Comment créer un groupe whatsapp - Guide
- Créer un lien pour partager des photos - Guide
- Créer un compte gmail - Guide
6 réponses
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é ?
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é ?
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
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
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.
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.
Tu as essayer d'adapter ton code à celui du tuto ou tu es reparti de rien en suivant le tuto de A à Z ?
Cordialement
Cordialement
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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