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
24 janv. 2019 à 09:02
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