Bonjour tout le monde !
Je travail actuellement sur le JavaScript (DOM et événements) pour faire un menu déroulant dans le même style que celui de Microsoft (le menu qui se déroule sur toute la largeur de l'écran).
Je coince au niveau de la création de l'événement click/onclick. En effet, je ne comprend pas pourquoi ma div (id : div--sMenu) jouant le rôle du sous menu ne s'affiche pas. Si on clique plusieurs fois et très rapidement sur le bouton 3 +, on peut la voir (sous Firefox) apparaître et disparaitre aussitôt.
J'ai remplacé le code de mon événement par un alert('Tu as cliqué !'); pour tester si mon code marche et en cliquant sur le Bouton 3 +, le navigateur affiche bien « Tu as cliqué ! ».
J'avoue être complétement perdu. D'autant plus la création de la div (id : div--sMenu) seule fonctionne. Après plusieurs recherches, je me permet de vous demander votre aide. Je ne comprend pas ce qui se passe.
J'espère que vous allez pourvoir m'expliquer ce qui ne va pas. J'utilise les dernières versions de MSIE, Firefox et Chrome.
Merci d'avance.
Voici mes codes sources :
HTML 5 :
JavaScript :
CSS :
Modifié par SilverFox (31 Jul 2014 - 21:38)
Je travail actuellement sur le JavaScript (DOM et événements) pour faire un menu déroulant dans le même style que celui de Microsoft (le menu qui se déroule sur toute la largeur de l'écran).
Je coince au niveau de la création de l'événement click/onclick. En effet, je ne comprend pas pourquoi ma div (id : div--sMenu) jouant le rôle du sous menu ne s'affiche pas. Si on clique plusieurs fois et très rapidement sur le bouton 3 +, on peut la voir (sous Firefox) apparaître et disparaitre aussitôt.
J'ai remplacé le code de mon événement par un alert('Tu as cliqué !'); pour tester si mon code marche et en cliquant sur le Bouton 3 +, le navigateur affiche bien « Tu as cliqué ! ».
J'avoue être complétement perdu. D'autant plus la création de la div (id : div--sMenu) seule fonctionne. Après plusieurs recherches, je me permet de vous demander votre aide. Je ne comprend pas ce qui se passe.
J'espère que vous allez pourvoir m'expliquer ce qui ne va pas. J'utilise les dernières versions de MSIE, Firefox et Chrome.
Merci d'avance.
Voici mes codes sources :
HTML 5 :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Menu bleu</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<header class="header">
<nav id="nav">
<div id="div--menuPose">
<a href="index.html" class="a-menuItem">Bouton 1</a>
<a href="index.html" class="a-menuItem a-menuItemLarge">Bouton 2</a>
<a href="index.html" class="a-menuItem a-menuItemLarge" id="but_3">Bouton 3 +</a>
<a href="index.html" class="a-menuItem">Bouton 4</a>
</div>
</nav>
</header>
<!-- Section test -->
<section>
<p>Un peu de texte dans une section !</p>
</section>
<!-- Code JavaScript -->
<script type="text/javascript" src="script.js"></script>
</body>
</html>
JavaScript :
// On sélectionne l'élément qui va recevoir l'événement
var event_btn3 = document.getElementById('but_3');
event_btn3.addEventListener('click', function() {
//alert('Tu as cliqué !');
// Création de la div sous-menu (div--sMenu)
var div_sMenu = document.createElement('div');
// J'assigne les attributs
div_sMenu.id = 'div--sMenu';
// On insert div_sMenu
document.getElementById('nav').appendChild(div_sMenu);
}, false);
CSS :
body {
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
.header {
margin: 0;
padding: 0;
height: 100px;
font-family: sans-serif;
font-style: normal;
font-weight: normal;
background-color: #262626;
}
#nav {
position: relative;
top: 50px;
left: 0px;
margin: 0;
padding: 0;
height: 50px;
background-color: #3a90cd;
}
#div--menuPose {
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
margin-top: 0;
padding: 0;
width: 1000px;
height: 50px;
}
/* --- Animations du menu --- */
.a-menuItem {
margin: 0;
padding: 0;
padding-top: 12px;
box-sizing: border-box;
display: inline-block;
float: left;
width: 120px;
height: 50px;
font-family: sans-serif;
font-size: 1.2em;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: center;
color: #f0f0f0;
background-color: #3a90cd;
}
.a-menuItemLarge {
width: 160px;
}
.a-menuItem:visited {
background-color: #3a90cd;
}
.a-menuItem:hover, .a-menuItem:focus {
background-color: #419ddf;
}
.a-menuItem:active {
background-color: #2b70a0;
}
section {
margin: 0;
padding: 0;
border-top-style: solid;
border-top-width: 3px;
border-top-color: #e1e1e1;
border-bottom-style: solid;
border-bottom-width: 3px;
border-bottom-color: #e1e1e1;
background-color: #ebebeb;
height: 500px;
}
/* Styles sous menu (pour l'événement) */
#div--sMenu {
margin: 0;
padding: 0;
/*border: solid 1px blue;*/
background-color: #2b70a0;
height: 100px;
}Modifié par SilverFox (31 Jul 2014 - 21:38)
)