J'essaye de créer mon site web de vente de sneakers, et actuellement je travaille sur l'accueil, j'ai reussi à créer mon menu horizontal en y incluant une petite animation, mais j'ai oublié d'y mettre des sous menues (grâce à des listes), je ne sais pas comment rajouter les listes sans enlever l'animation et en ajoutant une animation qui si ma souris "hover", l"accueil" par exemple ça affiche des sous menus.
Excuse moi des quelques fautes d'orthographes, c'est la première fois que je poste dans un forum, j'éspère obtenir de l'aide, merci beaucoup à vous tous.
je vous envoies ci-joint mes lignes de codes, si vous avez besoin de renseignements faites le moi savoir
ligne de code en html , fichier exemple1.html
----------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>HYPELORD</title> <meta name="description" content="Le menu change d'apparence en fonction de la taille de la fenetre du navigateur, idéal donc pour les smartphones et tablettes" /> <meta name="Robots" content="all"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link rel="stylesheet" type="text/css" href="css/default.css" /> <link rel="stylesheet" type="text/css" href="css/component1.css" /> <script src="js/modernizr.custom.js"></script> </head> <body> <div class="container"> <div class="main clearfix"> <nav id="menu" class="nav"> <ul> <li> <a href="#"> <span class="icon"> <i aria-hidden="true" class="icon-home"></i> </span>
/* Adding some background color to the different menu items */
.nav li:nth-child(6n+1) { background: #282625 ; }
.nav li:nth-child(6n+2) { background: #282625; }
.nav li:nth-child(6n+3) { background: #282625; }
.nav li:nth-child(6n+4) { background: #282625; }
.nav li:nth-child(6n+5) { background: #282625; }
.nav li:nth-child(6n+6) { background: #282625; }
/* For screen bigger than 800px */ @media (min-width: 50em) {
/* Transforms the list into a horizontal navigation */ .nav li { float: left; width: 16.66666666666667%; text-align: center; -webkit-transition: border .5s; -moz-transition: border .5s; -o-transition: border .5s; -ms-transition: border .5s; transition: border .5s; }
.nav a { display: block; width: auto; }
/* hover, focused and active effects that add a little colored border to the different items */ .no-touch .nav li:nth-child(6n+1) a:hover, .no-touch .nav li:nth-child(6n+1) a:active, .no-touch .nav li:nth-child(6n+1) a:focus { border-bottom: 4px solid black; }
/* Animate the box-shadow to create the effect */ .no-touch .nav a:hover i, .no-touch .nav a:active i, .no-touch .nav a:focus i { box-shadow: 0 0 0 0 rgba(255,255,255,0.2); -webkit-transition: box-shadow .4s ease-in-out; -moz-transition: box-shadow .4s ease-in-out; -o-transition: box-shadow .4s ease-in-out; -ms-transition: box-shadow .4s ease-in-out; transition: box-shadow .4s ease-in-out; }
}
@media (min-width: 50em) and (max-width: 61.250em) {
/* Size and font adjustments to make it fit into the screen*/ .nav ul { font-size: 1.2em; }
}
/* The "tablet" and "mobile" version */
@media (max-width: 49.938em) {
/* Instead of adding a border, we transition the background color */ .no-touch .nav ul li:nth-child(6n+1) a:hover, .no-touch .nav ul li:nth-child(6n+1) a:active, .no-touch .nav ul li:nth-child(6n+1) a:focus { background: rgb(227, 119, 20); }
.nav ul li { -webkit-transition: background 0.5s; -moz-transition: background 0.5s; -o-transition: background 0.5s; -ms-transition: background 0.5s; transition: background 0.5s; }
}
/* CSS specific to the 2x3 columns version */ @media (min-width:32.5em) and (max-width: 49.938em) {
/* Creating the 2 column layout using floating elements once again */ .nav li { display: block; float: left; width: 50%; }
/* Adding some padding to make the elements look nicer*/ .nav a { padding: 0.8em; }
/* Displaying the icons on the left, and the text on the right side using inlin-block*/ .nav li span, .nav li span.icon { display: inline-block; }
.nav li span.icon { width: 50%; }
.nav li .icon + span { font-size: 1em; }
.icon + span { position: relative; top: -0.2em; }
/* Adaptating to the icons to animate the size and border of the rounded background in a more discreet way */ .nav li i { display: inline-block; padding: 8% 9%; border: 4px solid transparent; border-radius: 50%; font-size: 1.5em; background: #282625; -webkit-transition: border .5s; -moz-transition: border .5s; -o-transition: border .5s; -ms-transition: border .5s; transition: border .5s; }
/* Transition effect on the border color */ .no-touch .nav li:hover i, .no-touch .nav li:active i, .no-touch .nav li:focus i { border: 4px solid rgba(255,255,255,0.1); }
}
/* Adapting the font size and width for smaller screns*/ @media (min-width: 32.5em) and (max-width: 38.688em) {
.nav li span.icon { width: 50%; }
.nav li .icon + span { font-size: 0.9em; } }
/* Styling the toggle menu link and hiding it */ .nav .navtoogle{ display: none; width: 100%; padding: 0.5em 0.5em 0.8em; font-family: 'Lato',Calibri,Arial,sans-serif; font-weight: normal; text-align: left; color: rgb(7, 16, 15); font-size: 1.2em; background: none; border: none; border-bottom: 4px solid #282625; cursor: pointer; }
/* Unhiding the styled menu link */ .nav .navtoogle{ margin: 0; display: block; }
/* Animating the height of the navigation when the button is clicked */
/* When JavaScript is disabled, we hide the menu */ .no-js .nav ul { max-height: 30em; overflow: hidden; }
/* When JavaScript is enabled, we hide the menu */ .js .nav ul { max-height: 0em; overflow: hidden; }
/* Displaying the menu when the user has clicked on the button*/ .js .nav .active + ul { max-height: 30em; overflow: hidden; -webkit-transition: max-height .4s; -moz-transition: max-height .4s; -o-transition: max-height .4s; -ms-transition: max-height .4s; transition: max-height .4s; }
/* Adapting the layout of the menu for smaller screens : icon on the left and text on the right*/
.nav li span { display: inline-block; height: 100%; }
Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention. Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé. Pour plus d'informations, nous vous invitons à lire les règles générales du forum
Merci de colorer votre code à l'aide du bouton Code
Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.
Bonsoir, code illisible en l'état. Si c'est pour un menu déroulant va voir frogweb => http://www.frogweb.fr/
Et puisque l'on est en HTML5 ton doctype pourrait être :
<!doctype html>
<html lang="fr">
cela te permettra d'utiliser les nouvelles balise sémantique <header> <nav> <aside> <article> ....
Inclure une liste dans mes lignes de codes
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...