| Re: Menu & sous menu |
Titre du sujet : Re: Menu & sous menu
par datavb sur 22/08/2014 19:17:36
Merci pour la reponse alain01
il s'agit du <ul class="sf-menu"> ?
parcque j'ai collé ca pour le menu horiezntale
<ul class="sf-menu">
<li class=""><a href="https://www.frxoops.org/modules/news">Articles</a>
<ul>
<li><a href="https://www.frxoops.org/modules/news">Nouveautés</a></li>
<li><a href="https://www.frxoops.org/modules/news/i ... vers</a></li>
<li><a href="https://www.frxoops.org/modules/news/i ... ules</a></li>
<li><a href="https://www.frxoops.org/modules/news/i ... mp;storynum=5">Thèmes</a></li>
<li><a href="https://www.frxoops.org/modules/news/i ... orynum=5">Modules Pro</a></li>
<li><a href="https://www.frxoops.org/modules/news/i ... storynum=5">Sites Pro</a></li>
<li><a href="https://www.frxoops.org/modules/news/i ... orynum=5">Lettres d'info</a></li>
<li><a href="https://www.frxoops.org/modules/news/i ... tion</a></li>
<li><a href="https://www.frxoops.org/modules/news/i ... amp;storynum=5">Développement</a></li>
<li><a href="https://www.frxoops.org/modules/news/submit.php">Proposer un article</a></li>
</ul>
</li>
<li class=""><a href="https://www.frxoops.org/modules/newbb">Forum</a>
<ul>
<li><a href="https://www.frxoops.org/modules/newbb/ ... hp?cat=2">Support Général</a></li>
<li><a href="https://www.frxoops.org/modules/newbb/index.php?cat=5">Actu FrXoops</a></li>
<li><a href="https://www.frxoops.org/modules/newbb/ ... hp?cat=10">Espace Pro</a></li>
<li></li>
</ul>
</li>
<li class=""><a href="https://www.frxoops.org/modules/TDMDownloads">Téléchargements</a>
<ul>
<li><a href="https://www.frxoops.org/modules/TDMDow ... ules</a></li>
<li><a href="https://www.frxoops.org/modules/TDMPicture/">Thèmes</a></li>
<li><a href="https://www.frxoops.org/modules/TDMDow ... ?cid=25">Versions xoops</a></li>
</ul>
</li>
<li class=""><a href="https://www.frxoops.org/modules/smarts ... FAQs</a></li>
<li class=""><a href="https://www.frxoops.org/modules/TDMLinks">Sites xoopsés</a></li>
</ul>
</nav>
et pour style.css j ai collé ça:
/************ sf-menu **********************/
.sf-menu {padding:25px 0px 0px 0px;position:relative;display:none;float: right;}
.sf-menu li {position:relative; }
.sf-menu > li{float:left;background:none;text-align:center;position:relative;}
.sf-menu li a {display:block;text-align:center;}
.sf-menu > li > a {overflow:hidden;position:relative;margin-left:-22px;height:45px;}
.sf-menu > li > a .menu-text{display:block;font-size:14px;line-height:22px;padding:12px 4px 11px 29px;color:#435c69;position:relative;font-family: 'Open Sans', sans-serif;font-weight:700;background:url(images/menu-left.png) 0 0 no-repeat;margin-right: 27px;}
.sf-menu > li > a .menu-text:after {background:url(images/menu-right.png) 0 0 no-repeat; content:""; width:27px; height:45px; position:absolute; top:0; left:100%;}
.sf-menu > li > a .menu-hover{display:block;font-size:14px;line-height:22px;padding:12px 4px 11px 29px;color:#fff;position:absolute;top:45px;font-family: 'Open Sans', sans-serif;font-weight:700;background:url(images/menu-hover-left.png) 0 0 no-repeat;margin-right: 27px;}
.sf-menu > li > a .menu-hover:after {background:url(images/menu-hover-right.png) 0 0 no-repeat; content:""; width:27px; height:45px; position:absolute; top:0; left:100%;}
.sf-menu > li.current {z-index:101;}
.sf-menu > li.current > a .menu-text {margin-top:50px!important;}
.sf-menu > li.current > a .menu-hover {top:0px!important;}
.sf-menu ul {position:absolute;width:125px;background:#eef1f3;padding: 5px 5px 5px 5px;z-index:200;display:none;border-radius:9px;}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {left:50%;margin-left:-73px;top:57px;z-index:99;}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {width:125px;background: #eef1f3;padding: 5px 5px 5px 5px;border-radius:9px;}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {left:-141px;margin-left:0px;top:-5px;z-index:99;}
.sf-menu ul > li {width:100%;text-align:left;border-top:1px solid #dde7ef;border-right:1px solid #eef1f3;border-bottom:1px solid #eef1f3;border-radius:0px;background:url(images/bg-submenu.png) 0 0 repeat-x;}
.sf-menu ul > li.first, .sf-menu ul > li.first.current , .sf-menu ul > li.first:hover, .sf-menu ul > li.first.sfHover {border-top:none;}
.sf-menu ul > li.current, .sf-menu ul > li.sfHover, .sf-menu ul > li:hover {background-position:0 -38px;background-color:#1b3c6e;border-right:1px solid #2e6092;border-bottom:1px solid #16325b;border-top:1px solid #4588c7;border-radius:5px;}
.sf-menu li li > a, .sf-menu li li li > a {color:#435c69;text-align:left;font-size:12px;position:relative;z-index:3;line-height:18px;padding:5px 0 4px 10px;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
.sf-menu li li.current > a, .sf-menu li li.sfHover > a, .sf-menu li li:hover > a {color:#fff;}
mais ca marché pas.je sais pas ce qui manque!!
merci pour votre aide.
|
|
