Admirez :
Panel 1
This is the contents of this panel.
Panel 2
This is the contents of this panel.
Panel 3
This is the contents of this panel.
Panel 4
This is the contents of this panel.
Panel 5
This is the contents of this panel.
PREMIERE ETAPE :
Allez chez AndrewSellick
Cliquez sur Feel free to download the Fancy Sliding Menu Code.
Vous venez d'enregistrer un fichier .zip : un ensemble de fichiers compressés.
Pour le décompresser, j'utilise WinRAR, fonction Extraire Vers
DEUXIEME ETAPE :
Dans l'administration de votre blog - Documents - Mes fichiers :
- vous créez un répertoire nommé tabslideV2
- dans ce répertoire, vous créez un sous-répertoire nommé : images
- dans lequel vous enregistrez les fichiers suivants :
- aston.gif (c'est la photo de la voiture, donc facultatif, vous pouvez mettre votre propre photo)
- tab-left-active.gif
- tab-left.gif
- tab-right.gif
- aston.gif (c'est la photo de la voiture, donc facultatif, vous pouvez mettre votre propre photo)
- dans lequel vous enregistrez les fichiers suivants :
- dans ce répertoire tabslideV2, vous créez un deuxième sous-répertoire nommé js
- dans lesquel vous renregistrez les fichiers suivants :
- effects.js
- prototype.js
- tabslide.js
- effects.js
- dans lesquel vous renregistrez les fichiers suivants :
- dans ce répertoire, vous créez un sous-répertoire nommé : images
- vous notez les adresses de tous ces fichiers
En HTML, vous collez
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/tabslideV2/js/prototype.js" type="text/javascript"></script>En personnalisant avec vos propres adresses (voir l'étape 2)
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/tabslideV2/js/effects.js" type="text/javascript"></script>
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/tabslideV2/js/tabslide.js" type="text/javascript"></script>
Vous collez ensuite
<style>Toujours en personnalisant avec vos propres adresses.
#accordion {
border: 1px solid #1F669B;
width: 600px;
height: 310px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 11px;
position:relative !important;
display:block;
overflow:hidden;
background-image:url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/tabslideV2/images/aston.jpg);
background-repeat:no-repeat;
background-position:top left;
}
h3 {
font-size: 12px;
padding: 6px 6px 4px 35px;
margin: 0;
color:#fff;
border-bottom:1px solid #333333;
cursor:pointer;
display:block;
background-image:url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/tabslideV2/images/tab-left.gif);
background-position:top left;
background-repeat:no-repeat;
}
#visible {
background-image:url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/tabslideV2/images/tab-left-active.gif);
border-bottom:1px solid #DA1074;
}
.panel_body {
height:150px;
background-color:#333333;
display:block;
position:relative;
color:#FFFFFF;
}
.panel_body div {
padding:3px 5px;
}
.panel{
bottom:0px;
margin:0px;
padding:0px;
background-image:url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/tabslideV2/images/tab-right.gif);
background-position:top right;
background-repeat:repeat-x;
background-color:#333333;
}
.wrapper{
bottom:0px;
position:absolute;
}
</style>
</head>
La 1ère image est celle de fond, vous pouvez la changer. Pensez à respecter ces dimensions.
Et pour fini, toujours en HTML vous collez
<body>Vous personnalisez :
<div id="accordion">
<div class="panel" id="panel1">
<h3>Panel 1</h3>
<div id="panel1-body" class="panel_body">
<div>
This is the contents of this panel.
</div>
</div>
</div>
<div class="panel" id="panel2">
<h3>Panel 2</h3>
<div id="panel2-body" class="panel_body">
<div>
This is the contents of this panel.
</div>
</div>
</div>
<div class="panel" id="panel3">
<h3>Panel 3</h3>
<div id="panel3-body" class="panel_body">
<div>
This is the contents of this panel.
</div>
</div>
</div>
<div class="panel" id="panel4">
<h3>Panel 4</h3>
<div id="panel4-body" class="panel_body">
<div>
This is the contents of this panel.
</div>
</div>
</div>
<div class="panel" id="panel5">
<h3>Panel 5</h3>
<div id="panel5-body" class="panel_body">
<div>
This is the contents of this panel.
</div>
</div>
</div>
</div>
<script>init();</script>
- en rouge : les titres
- en bleu : le détail
- vous recopiez les 2 premiers pavés tels quels en mode source
- vous recopiez en personnalisant le dernier pavé.
Bonjour Anna,
RépondreSupprimerje suis Sagan33 : http://sagan33.over-blog.com
Je viens de me servir de ce super menu pour mettre dans ma page d'accueil. Comme tout ce que tu proposes, c'est vraiment une très belle réalisation ... merci beaucoup à toi.
Je vais mettre ton lien dans mes favoris. Bien sûr si tu n'y vois pas d'inconvénients.
Il y a juste un léger problème : avant de s'afficher : le menu affiche deux cadres gris. Saurais-tu comment les enlever, et du moins est-ce possible.
En tout cas, tu es une aide précieuse.
Je te souhaite une très bonne soirée.
Bien cordialement. Geneviève.
Bonjour Sagan :)
RépondreSupprimerSi l'on a le temps de voir ce fond gris, c'est que ta page est un peu longue à charger.
La première solution serait d'héberger les images sur OB plutôt que sur Archive-host : le transfert se ferait plus rapidement. Sur OB, je crois que la largeur limite est de 600px.
Si, ensuite, on voit toujours le fond gris, essaye en enlevant le background-color:#333333
dans
.panel_body
et dans
.panel
RE - Anna,
RépondreSupprimerJ'ai enlevé le BG 333333. Mais il reste toujours les 2 bandes de buttom grises avec écrit news et articles, + 2 lignes d'écriture. Il ne s'affiche pas net comme chez toi.
Merci ..... de ton aide.
C'est difficile, parce que je le vois parfait. Est-ce le noir derrière news qui te dérange ?
RépondreSupprimerIl se trouve dans cette ligne
.panel{
bottom:0px;
margin:0px;
padding:0px;
background-image:url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/tabslideV2/images/tab-right.gif);
background-position:top right;
background-repeat:repeat-x;
}
Il faut effacer le background-image