Keylha Equipe Bleue
Messages : 2394 Date d'inscription : 12/04/2014 Age : 23 Localisation : Montagnes
| Sujet: Faire un marcher blblblblgjhggn menu Dim 17 Avr - 12:57 | |
| Salut, récemment j'ai voulu ajouter un menu dans un de mes codes, étant incapable d'en faire un moi-même j'ai donc chercher des codes en libre service, j'en ai trouvé un ici , mais je suis incapable de le faire marcher J'ai donc fait un petit test http://bananasenpai.forumactif.org/h15-testEt ça m'énerve beaucoup je comprends rien plus j'essaye de me documenter sur le sujet plus je comprends encore moins. - Code:
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test</title> </head> <style type="text/css"> @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300); #cssmenu { display: inline-block; position: relative; margin: 0; font-family: 'Roboto Condensed'; line-height: 1; width: 250px; } .align-right { float: right; } #cssmenu ul { margin: 0; padding: 0; list-style: none; display: block; } #cssmenu ul li { position: relative; margin: 0; padding: 0; } #cssmenu ul li a { text-decoration: none; cursor: pointer; } #cssmenu > ul > li > a { color: #dddddd; text-transform: uppercase; display: block; padding: 20px; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; background: #222222; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); letter-spacing: 1px; font-size: 16px; font-weight: 300; -webkit-transition: all 0.25s ease-in; -moz-transition: all 0.25s ease-in; -ms-transition: all 0.25s ease-in; -o-transition: all 0.25s ease-in; transition: all 0.25s ease-in; position: relative; } #cssmenu > ul > li:first-child > a { border-top-left-radius: 3px; border-top-right-radius: 3px; } #cssmenu > ul > li:last-child > a { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom: 1px solid #000000; } #cssmenu > ul > li:hover > a, #cssmenu > ul > li.open > a, #cssmenu > ul > li.active > a { background: #151515; color: #ffffff; } #cssmenu ul > li.has-sub > a::after { content: ""; position: absolute; display: block; width: 0; height: 0; border-top: 13px solid #000000; border-botom: 13px solid transparent; border-left: 125px solid transparent; border-right: 125px solid transparent; left: 0; bottom: -13px; bottom: 0px; z-index: 1; opacity: 0; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } #cssmenu ul > li.has-sub > a::before { content: ""; position: absolute; display: block; width: 0; height: 0; border-top: 13px solid #151515; border-botom: 13px solid transparent; border-left: 125px solid transparent; border-right: 125px solid transparent; left: 0; bottom: -12px; bottom: -1px; z-index: 3; opacity: 0; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } #cssmenu ul > li.has-sub::after { content: ""; display: block; position: absolute; width: 0; height: 0; border: 7px solid transparent; border-top-color: #dddddd; z-index: 2; right: 20px; top: 24.5px; pointer-events: none; } #cssmenu ul > li:hover::after, #cssmenu ul > li.active::after, #cssmenu ul > li.open::after { border-top-color: #ffffff; } #cssmenu ul > li.has-sub.open > a::after { opacity: 1; bottom: -13px; } #cssmenu ul > li.has-sub.open > a::before { opacity: 1; bottom: -12px; } #cssmenu ul ul { display: none; } #cssmenu ul ul li { border-left: 1px solid #ccc; border-right: 1px solid #ccc; } #cssmenu ul ul li a { background: #f1f1f1; display: block; position: relative; font-size: 15px; padding: 14px 20px; border-bottom: 1px solid #dddddd; color: #777777; font-weight: 300; -webkit-transition: all 0.25s ease-in; -moz-transition: all 0.25s ease-in; -ms-transition: all 0.25s ease-in; -o-transition: all 0.25s ease-in; transition: all 0.25s ease-in; } #cssmenu ul ul li:first-child > a { padding-top: 18px; } #cssmenu ul ul ul li { border: 0; } #cssmenu ul ul li:hover > a, #cssmenu ul ul li.open > a, #cssmenu ul ul li.active > a { background: #e4e4e4; color: #666666; } #cssmenu ul ul > li.has-sub > a::after { border-top: 13px solid #dddddd; } #cssmenu ul ul > li.has-sub > a::before { border-top: 13px solid #e4e4e4; } #cssmenu ul ul ul li a { padding-left: 30px; } #cssmenu ul ul > li.has-sub::after { top: 18.5px; border-width: 6px; border-top-color: #777777; } #cssmenu ul ul > li:hover::after, #cssmenu ul ul > li.active::after, #cssmenu ul ul > li.open::after { border-top-color: #666666; } .contenu{ display: inline-block; background: grey; width: 400px; height: 600px;} </style> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="http://bananasenpai.forumactif.org/10117.js"></script> <body> <div id='cssmenu'> <ul> <li><a href='#0'><span>Blblbl</span></a></li> <li class='active has-sub'><a href='#1'><span>Blblbl</span></a> <ul> <li><a href='#2'><span>Sous blblbl</span></a></li> <li class='has-sub'><a href='#'><span>Product 2</span></a> <ul> <li><a href='#'><span>Sub Product</span></a></li> <li class='last'><a href='#'><span>Sub Product</span></a></li> </ul> </li> </ul> </li> <li><a href='#'><span>About</span></a></li> <li class='last'><a href='#'><span>Contact</span></a></li> </ul> </div> <div class="contenu"> <div id="0"><h1>Test</h1></div> <div id="1"><h1>Test 2</h1> <div id="2"><h1>Test3</h1></div></div> </div> </body> </html> Si quelqu'un pouvait m'aider merci d'avance :3 | |
|