[Réglé] [CSS3] Système de menus en onglets (in post)

[verspax]

Bonjour,

J'essaie de mettre en place un système de menus en d'onglets dans un post, basé sur ce modèle en CSS3 : http://red-team-design.com/css3-tabs-with-beveled-corners/

Malgré de multiples tentatives, je ne parviens pas à faire fonctionner tout ça : le contenu des onglets n’appairait pas
Non seulement j'ai été confronté à des conflits, et inutile de préciser que je suis une brelle en code... Je suis donc forcé de faire appel à votre expertise pour m'aider à corriger le tir.

Dernière version MyBB installée (sans MAJ).

1. J'ai activé l'HTML sur le forum et créé un post avec :

Code :

<ul id="uitabs">
   <li><a href="#" title="tab1">One</a></li>
   <li><a href="#" title="tab2">Two</a></li>
   <li><a href="#" title="tab3">Three</a></li>
   <li><a href="#" title="tab4">Four</a></li>    
</ul>

<div id="uicontent">
   <div id="uitab1">One - content</div>
   <div id="uitab2">Two - content</div>
   <div id="uitab3">Three - content</div>
   <div id="uitab4">Four - content</div>
</div>

2. J'ai ensuite ajouté ceci à global.css (theme2) :

Code :

#uitabs {
  overflow: auto;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

#uitabs li {
    margin: 0;
    padding: 0;
    float: left;
}

#uitabs a {
    box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    background: #ad1c1c;
    background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    color: #fff;
    float: left;
    font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
    height: 35px;
    padding: 0 30px;
    text-decoration: none;
}

#uitabs a:hover {
    background: #c93434;
    background: linear-gradient(220deg, transparent 10px, #c93434 10px);    
}

#uitabs a:focus {
    outline: 0;
}

#uitabs #current a {
    background: #fff;
    background: linear-gradient(220deg, transparent 10px, #fff 10px);
    text-shadow: none;    
    color: #333;
}

#uicontent {
    background-color: #fff;
    background-image:         linear-gradient(top, #fff, #ddd);
    border-radius: 0 2px 2px 2px;
    box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    padding: 30px;
}

/* Remove the rule below if you want the content to be "organic" */
#uicontent div {
    height: 220px;
}

3. Puis ça à showthread.php :

Code :

<script type="text/javascript">
                  $(document).ready(function() {
                $("#uicontent div").hide(); // Initially hide all content
                $("#uitabs li:first").attr("id","current"); // Activate first tab
                $("#uicontent div:first").fadeIn(); // Show first tab content
                $('#uitabs a').click(function(e) {
                        e.preventDefault();        
                        $("#uicontent div").hide(); //Hide all content
                        $("#uitabs li").attr("id",""); //Reset id's
                        $(this).parent().attr("id","current"); // Activate this
                        $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
                   });
        })();
  </script>

---

Merci d'avance.