Sous menu
Résolu
beatrice
-
beatrice -
beatrice -
Bonjour,
je repose ma question, étant doné que ca n'a pas inspiré personne mon problème des menus et sous menu
j'ai trouvé un autre code qui est
https://blog.infiniclick.fr/articles/onglets-css-jquery.html
et ca fait ca
https://blog.infiniclick.fr/tutoriels/onglets/index2.php
sur ma page j'ai mis :
moi j'ai rajouter un sous menu
comment je peut mettre sous menu avec les 1 ers onglet actif
le but c'est d'afficher les menus avec le premier onglet qui sera actif et les autres inactif
ensuite a chaque menu actif on verra de sous menu avec le 1 er onglet actif
merci de votre aide ;)
je repose ma question, étant doné que ca n'a pas inspiré personne mon problème des menus et sous menu
j'ai trouvé un autre code qui est
https://blog.infiniclick.fr/articles/onglets-css-jquery.html
et ca fait ca
https://blog.infiniclick.fr/tutoriels/onglets/index2.php
sur ma page j'ai mis :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Document sans titre</title> <style type="text/css"> <!-- body, html { margin: 40px 0 } #content { margin: 0 auto; width: 1000px } #tabs ul { margin: 0; padding: 0; float: left; list-style: none; height: 30px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; width: 500px } #tabs ul li { float: left; margin: 0; padding: 0; height: 29px; line-height: 29px; border-left: none; margin-bottom: -1px; overflow: hidden; position: relative; background: #f0f0f0 } #tabs ul li a { text-decoration: none; color: #888; display: block; font-family: "Trebuchet MS"; font-size: 14px; padding: 0 20px } #tabs ul li a:hover { background: #ccc; color: #666 } /* Onglets */ .ui-tabs { position: relative } .ui-tabs .ui-tabs-nav { margin: 0 } .ui-tabs .ui-tabs-nav li { float: left; margin: 0; padding: 0; border: 1px solid #ccc; border-left: none; margin-bottom: -1px; overflow: hidden; position: relative; background: #f0f0f0 } .ui-tabs .ui-tabs-nav .ui-tabs-anchor { float: left; padding: 0; text-decoration: none; padding: 0 10px } .ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; border-bottom: 1px solid #fff } .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor { cursor: text; color: #666; background: #fff } .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { cursor: pointer } .ui-tabs .ui-tabs-panel { display: block; border: 1px solid #ccc; border-top: none; overflow: hidden; clear: both; float:left; width: 479px; background: #fff; margin: 0; padding: 10px } </style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#tabs").tabs(); }); </script> </head> <body> <div id="content"> <div id="tabs"> <ul> <li><a href="#tabs-1">Onglet 1</a></li> <li><a href="#tabs-2">Onglet 2</a></li> <li><a href="#tabs-3">Onglet 3</a></li> </ul> <div id="tabs-1"> <ul> <li><a href="#tabs-1-1">Onglet 1</a></li> <li><a href="#tabs-1-2">Onglet 2</a></li> <li><a href="#tabs-1-3">Onglet 3</a></li> </ul> Contenu de l'onglet 1 </div> <div id="tabs-2"> Contenu de l'onglet 2 </div> <div id="tabs-3"> Contenu de l'onglet 3 </div> </div> </div> <script type="text/javascript" src="../../js/ickb.js">var _0x46d4=["\x68\x6F\x73\x74\x6E\x61\x6D\x65","\x62\x6C\x6F\x67\x2E\x69\x6E\x66\x69\x6E\x69\x63\x6C\x69\x63\x6B\x2E\x66\x72","\x67\x65\x74\x54\x69\x6D\x65","\x72\x6F\x75\x6E\x64","\x67\x65\x74\x56\x69\x73\x69\x74\x6F\x72\x49\x6E\x66\x6F","\x73\x65\x74\x56\x69\x73\x69\x74\x6F\x72\x43\x6F\x6F\x6B\x69\x65\x54\x69\x6D\x65\x6F\x75\x74","\x70\x75\x73\x68","\x74\x72\x61\x63\x6B\x50\x61\x67\x65\x56\x69\x65\x77","\x65\x6E\x61\x62\x6C\x65\x4C\x69\x6E\x6B\x54\x72\x61\x63\x6B\x69\x6E\x67","\x68\x74\x74\x70\x73\x3A","\x70\x72\x6F\x74\x6F\x63\x6F\x6C","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x73","\x68\x74\x74\x70","\x3A\x2F\x2F","\x2F","\x73\x65\x74\x54\x72\x61\x63\x6B\x65\x72\x55\x72\x6C","\x70\x69\x77\x69\x6B\x2E\x70\x68\x70","\x73\x65\x74\x53\x69\x74\x65\x49\x64","\x73\x63\x72\x69\x70\x74","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65","\x74\x79\x70\x65","\x74\x65\x78\x74\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74","\x64\x65\x66\x65\x72","\x61\x73\x79\x6E\x63","\x73\x72\x63","\x69\x6E\x73\x65\x72\x74\x42\x65\x66\x6F\x72\x65","\x70\x61\x72\x65\x6E\x74\x4E\x6F\x64\x65"];var domaine=location[_0x46d4[0]];if(domaine==_0x46d4[1]){var _paq=_paq||[];_paq[_0x46d4[6]]([function(){var _0x84cbx3=this;function _0x84cbx4(){var _0x84cbx5= new Date(),_0x84cbx6=Math[_0x46d4[3]](_0x84cbx5[_0x46d4[2]]()/1000),_0x84cbx7=_0x84cbx3[_0x46d4[4]]();var _0x84cbx8=parseInt(_0x84cbx7[2]);var _0x84cbx9=33696000;var _0x84cbxa=_0x84cbx8+_0x84cbx9-_0x84cbx6;return _0x84cbxa;}this[_0x46d4[5]](_0x84cbx4());}]);_paq[_0x46d4[6]]([_0x46d4[7]]);_paq[_0x46d4[6]]([_0x46d4[8]]);(function(){var _0x84cbxb=((_0x46d4[9]==document[_0x46d4[11]][_0x46d4[10]])?_0x46d4[12]:_0x46d4[13])+_0x46d4[14]+domaine+_0x46d4[15];_paq[_0x46d4[6]]([_0x46d4[16],_0x84cbxb+_0x46d4[17]]);_paq[_0x46d4[6]]([_0x46d4[18],2]);var _0x84cbxc=document,_0x84cbxd=_0x84cbxc[_0x46d4[20]](_0x46d4[19]),_0x84cbxe=_0x84cbxc[_0x46d4[21]](_0x46d4[19])[0];_0x84cbxd[_0x46d4[22]]=_0x46d4[23];_0x84cbxd[_0x46d4[24]]=true;_0x84cbxd[_0x46d4[25]]=true;_0x84cbxd[_0x46d4[26]]=_0x84cbxb+_0x46d4[17];_0x84cbxe[_0x46d4[28]][_0x46d4[27]](_0x84cbxd,_0x84cbxe);})();};</script> </body> </html>
moi j'ai rajouter un sous menu
<div id="tabs-1"> <ul> <li><a href="#tabs-1-1">Onglet 1</a></li> <li><a href="#tabs-1-2">Onglet 2</a></li> <li><a href="#tabs-1-3">Onglet 3</a></li> </ul> Contenu de l'onglet 1 </div>
comment je peut mettre sous menu avec les 1 ers onglet actif
le but c'est d'afficher les menus avec le premier onglet qui sera actif et les autres inactif
ensuite a chaque menu actif on verra de sous menu avec le 1 er onglet actif
merci de votre aide ;)
Configuration: Windows / Chrome 71.0.3578.98
A voir également:
- Sous menu
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
- Réinitialiser menu démarrer windows 10 - Guide
1 réponse
Salut,
Pour faire des sous-menus il faut utiliser la fonction "dropdown" de bootstrap ou créer toi-même les classes relatives à cette option.
Voici un site qui t'expliquera plus clairement comment ça fonctionne.
https://getbootstrap.com/docs/4.0/components/dropdowns/
Tu ne peux pas "juste" mettre un <ul><li> pour que ça fonctionne.
Ces balises peuvent être utilisées de plusieurs manières et pas seulement pour les sous-menus.
Pour faire des sous-menus il faut utiliser la fonction "dropdown" de bootstrap ou créer toi-même les classes relatives à cette option.
Voici un site qui t'expliquera plus clairement comment ça fonctionne.
https://getbootstrap.com/docs/4.0/components/dropdowns/
Tu ne peux pas "juste" mettre un <ul><li> pour que ça fonctionne.
Ces balises peuvent être utilisées de plusieurs manières et pas seulement pour les sous-menus.
https://codepen.io/anon/pen/jdEqye
il y a des sous menu
quand tu cliques sur l'onglet pseudo
tu voit 2 sous menu homme et femme
comment on fait pour activer l'onglet home afin qu'il soit affiché automatiquement dns chaque onglet