Ajouter des mini tabs animés...

27 avr. 2009, 16:52

Bonjour, j'ai récupéré la gestion d'un site qui n'est pas le mien mais je dois ajouter des mini tabs animées.

Je m'explique, quand on arrive sur une des pages, il y a des onglets généraux en haut mais je voudrais que pour cette page en particulier que je puisse intégrer des mini tabs animés (comme pour avoir des sous onglets quoi), qui s'ouvriraient dans le corps de cette page, donc pas de popup, pas de nouvelle page mais dans le corps existant...

Si vous aviez des idées, ça serait génial. J'ai tout le code des mini tabs mais je ne vois pas très bien où l'ajouter pour cette page et faire en sorte que ces sous onglets s'ouvrent sans faire de nouvelle page.

Merci beaucoup!

27 avr. 2009, 17:17

Euhh ... Pourquoi poster dans PHP et pas dans Javascript ?

Un truc comme ca ?
http://dmouronval.developpez.com/tutori ... enu-anime/

27 avr. 2009, 22:41

Je poste dans php car tout le site est en php... L'endroit ou doit se retrouver le java serait dans un fichier php... Je ne sait pas du tout comment l'intégrer...

L'exemple java est celui-ci: http://www.pittstop.com/tipstricks/minitab_demo.html

Mais le site d'origine lui est entièrement en php, est-ce seulement alors compatible???

27 avr. 2009, 23:20

C'est indépendant de php... php te permet de générer le code html/css/javascript que le navigateur va ensuite interpréter et présenter à l'utilisateur.

En gros, avec php tu vas générer le code final dont tu as besoin. Tu peux donc partir de la page html que tu veux obtenir et insérer ton code php de manière à la construire

28 avr. 2009, 10:20

Pourquoi tu ne regarde pas le code source de la page de l'exemple en regardant ou le code du javascript est mis ?

28 avr. 2009, 12:16

Pourquoi tu ne regarde pas le code source de la page de l'exemple en regardant ou le code du javascript est mis ?

J'ignore pourquoi il ne le fait pas mais en tout cas ça ne servirait pas à grand chose. Le code se trouve dans un fichier "miniTab.js" et non pas dans le corps html comme pour les anciens sites. Mais bon...ça tu as du t'en rendre compte je penses.

28 avr. 2009, 12:29

Moi je parlais pour appeller ta fonction javascript, pas pour integrer le code javascript dans la page !
Un clic de droit pour afficher la source et ca dis plein de choses !!!
Pour ton menu tu créé une div et un ul en n'oubliant pas de renseigner les class car ton javascript est activé grâce aux class

Code : Tout sélectionner

<div id="content"> 
  <h1>Animated Mini-Tabs Demo</h1>
  <ul id="miniflex">
                <li><a class="active" href="/this-page/" title="">This Page</a></li>
                <li><a href="/page2/" title="">Page Two</a></li>
                <li><a href="/page3/" title="">Page Three</a></li>
                <li><a href="/page4/" title="">Page Four</a></li>
                <li><a href="/page5/" title="">Page Five</a></li>
        </ul>
  <br />
  <p>&nbsp;</p>
</div>

Bien entendu dans la page tu integre les style CSS ("comme pour les anciens sites") ou sinn ba tu fais un fichier css

Code : Tout sélectionner

<style type="text/css" media="all">
body {
        font-family: verdana, sans-serif;
        font-size: 11px;
        text-align:center;
        }
p
        {
        margin-top:20px;
        }
#container {
        padding: 30px;
        margin: 20px 0;
        width:80%;
        margin:40px auto;
        }
#miniflex {
        width: 100%;
        float: left;
        font-size: medium; /* could be specified at a higher level */
        margin: 0;
        padding: 0 10px 0 10px;
        border-bottom: 1px solid #696;
        position:relative;
        z-index:2;
        }

#miniflex li {
        float: left;
        margin: 0;
        padding: 0;
        display: inline;
        list-style: none;
        position:relative;
        }

#miniflex a:link, #miniflex a:visited {
        float: left;
        font-size: 85%;
        line-height: 20px;
        font-weight: bold;
        margin: 0 10px 0 10px;
        text-decoration: none;
        color: #9c9;
        }

#miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover {
        border-bottom: 4px solid #696;
        padding-bottom: 2px;
        color: #696;
        }
        
#animated-tab {
        position: absolute;
        z-index: 1;
        font-size: 85%;
        line-height: 20px;
        padding-bottom: 2px;
        border-bottom: 4px solid #696;
        }
br
        {
        clear:both;
        }
        </style>

28 avr. 2009, 23:49

Messieurs, vous êtes vraiment gentils sérieux et je vais regarder ça de plus près...

La seule question qui me reste (eh oui la fille est peut-être bornée du cerveau

), c'est que tout le site est en php et que seuls les onglets sont en java et que je veux que ces onglets ouvrent dans le corps de la page existante... Je sais pas si je suis très très claire dans ma façon de l'exprimer, pardon vraiment...

Encore quand je conçois un site entier, je ne trouve aucun soucis pour ce que je dois en faire mais quand on récupère un truc et qu'on doit continuer dessus un petit moment c'est pas toujours évident...

Sinon pour expliquer en détail, le site est conçu pour que quelques sections soient modifiables à partir d'un panneau d'administration ou dans celui-ci je peux insérer des codes html standard ou ce que je voudrais... Par contre, le haut où se trouvent déjà les onglets existants sont dans un fichier .inc qui appelle d'autres .inc et d'autres php... Je cherche à savoir si là je peux intégrer une fonction java car il n'y a que dans ce fichier que se trouve les onglets auxquels je dois ajouter d'autres sous onglets... Dans ce fichier, il y a des conditions if thatpage... Donc pour moi la condition peut être <? if($thatpage=="pellevoisin") { #AJOUT D'UNE LIGNE TR au tableau des onglets pour contenir les sous-onglets } ?> mais ça me laisse à penser que je ne pourrai pas y mettre mon java dessus...

Est-ce un peu plus clair???

Merci beaucoup, vraiment!

Ajouter des mini tabs animés...

Qui est en ligne