JS: un menu deroulant qui appel une page HTML
Résolu/Fermé
A voir également:
- Menu déroulant html javascript
- Node js virus ✓ - Forum Virus
- Retour à la ligne js ✓ - Forum Javascript
- Js/agent.piv ✓ - Forum Virus
- Onclick js ✓ - Forum Javascript
- Exécuter un fichier js en ligne de commande - Forum Javascript
2 réponses
Atropa
Messages postés
1940
Date d'inscription
mercredi 25 juin 2008
Statut
Membre
Dernière intervention
11 mai 2014
274
Modifié par Atropa le 1/03/2012 à 06:23
Modifié par Atropa le 1/03/2012 à 06:23
c'est assez simple a faire et sans javascript !!
voilà un exemple :
voilà un exemple :
<!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" xml:lang="fr"> <head> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="-1" /> <meta http-equiv="content-language" content="fr" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Luminis</title> <style type="text/css"> * { padding: 0; margin: 0; } .menuCont { /* là tu place ton menu */ margin-top: 30px; margin-left: 40px; } .menu { float: left; list-style: none; position: relative; } .menu > li { float: left; } .menu > li > span { display: block; line-height: 35px; /* ici le style que tu veux l'important et de garder display block et de centrer le text en hauteur avec ligne-height */ border: 1px solid black; padding-left: 5px; padding-right: 5px; margin-right: 5px; } .menu > li > .lastspan { margin-right: 0px; } .contBlock { display: none; position: absolute; left: 0px; width: 100%; } .menu > li:hover > span{ /* ici le style que tu veux */ background-color: red; } .menu > li:hover > .contBlock { display: block; background-color: #ffffff; } .block { border: 10px solid red; padding: 10px; /* ici le style que tu veux*/ } .clearBoth { clear: both; /* pour ne pas être ennuyé par les floats */ } </style> </head> <body style="background-color: white;"> <div class="menuCont"> <ul class="menu"> <li> <span>catégorie1</span> <div class="contBlock"><div class="block">ce que tu veux 1</div></div> </li> <li> <span>catégorie2</span> <div class="contBlock"><div class="block">ce que tu veux 2</div></div> </li> <li> <span class="lastspan">catégorie3</span> <div class="contBlock"><div class="block">ce que tu veux 3</div></div> </li> </ul> </div> <div class="clearBoth"></div> <div> le reste de ton site </div> </body> </html>