Sous menu

Résolu

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 :

<!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

Afficher la suite

1 réponse

Réponse 1 / 1
KrondaliX
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.
0
1. beatrice
  
  Merci, de ta réponse mais si on reprend mon code avant
  
  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
  
  0

Sous menu

1 réponse

Discussions similaires

Newsletters