Rappel du premier message :
Bonjour,
Ce tutoriel vous permet la réalisation d'une page d'accueil en onglet latéraux, c'est à dire que vos onglets se situeront sur le côté du contenu, qui lui sera dévoilé par glissement à chaque survol d'un onglet différent.
Un petit aperçu directement sur mon forumbordélique test :
Il s'agit du 4ième bloc d'accueil, avec les boutons dans les teintes orange/rouge.
Installation HTML
Puisqu'il s'agit d'une page d'accueil, vous allez tout simplement mettre le code dans "Affichage" > "Page d'accueil" > "Généralités".
N'oubliez pas d'enregistrer !
Installation CSS
Allez ensuite dans votre feuille CSS pour y placer ceci :
Personnalisation
Pour personnaliser ce code c'est très simple : changez comme vous le souhaitez les couleurs des fonds, bordures et texte. Vous pouvez y inclure ce que vous souhaitez à l'intérieur : images, liens, etc...
Concernant les tailles, sachez qu'une modification de taille d'un morceau entraine une adaptation des tailles du reste, ou même des marges.
Les boutons sont simplement des images à faire à votre convenance, arrangez-vous pour qu'ils soient de la même dimension que les miens (150*48) afin de vous simplifier la vie.
Vous pouvez ajouter une image au dessus en guise de titre, ou bien une image de fond globale, ou différente selon les contenus. En effet, chaque contenu ayant son propre css, vous pouvez leur mettre des couleurs différentes.
Bonjour,
Ce tutoriel vous permet la réalisation d'une page d'accueil en onglet latéraux, c'est à dire que vos onglets se situeront sur le côté du contenu, qui lui sera dévoilé par glissement à chaque survol d'un onglet différent.
Un petit aperçu directement sur mon forum
lien forum test
Il s'agit du 4ième bloc d'accueil, avec les boutons dans les teintes orange/rouge.
Installation HTML
Puisqu'il s'agit d'une page d'accueil, vous allez tout simplement mettre le code dans "Affichage" > "Page d'accueil" > "Généralités".
- Code:
<div id="nu31_acceuil">
<div id="nu31_content">
<div id="nu31_links">
<div class="nu31_link1">
<div class="nu31_contenu2">
<span class="nu31_contenu">
<!-- début du contenu de l'onglet 1 -->
Contenu onglet 1.
<!-- fin du contenu de l'onglet 1 -->
</span>
</div>
</div>
<div class="nu31_link2">
<div class="nu31_contenu3">
<span class="nu31_contenu">
<!-- début du contenu de l'onglet 2 -->
Contenu onglet 2.
<!-- fin du contenu de l'onglet 2 -->
</span>
</div>
</div>
<div class="nu31_link3">
<div class="nu31_contenu4">
<span class="nu31_contenu">
<!-- début du contenu de l'onglet 3 -->
Contenu onglet 3.
<!-- fin du contenu de l'onglet 3 -->
</span>
</div>
</div>
<div class="nu31_link4">
<div class="nu31_contenu5">
<span class="nu31_contenu">
<!-- début du contenu de l'onglet 4 -->
Contenu onglet 4.
<!-- fin du contenu de l'onglet 4 -->
</span>
</div>
</div>
</div>
<div class="nu31_contenu1">
<span class="nu31_contenu">
<!-- début du contenu par défaut -->
Contenu par défaut.
<!-- fin du contenu par défaut -->
</span>
</div>
</div>
</div>
N'oubliez pas d'enregistrer !
Installation CSS
Allez ensuite dans votre feuille CSS pour y placer ceci :
- Code:
/* PA ONGLETS LATERAUX HOVER */
#nu31_accueil
{
width: 950px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 5px;
height: 200px;
padding: 10px;
background: #d2d6d6;
border: 1px solid #efefef;
border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-htm-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 5px #425e5c;
-moz-box-shadow: 0px 0px 5px #425e5c;
-o-box-shadow: 0px 0px 5px #425e5c;
-htm-box-shadow: 0px 0px 5px #425e5c;
-webkit-box-shadow: 0px 0px 5px #425e5c;
}
#nu31_content
{
width: 950px;
height: 200px;
overflow: hidden;
}
#nu31_links
{
float: left;
}
.nu31_link1, .nu31_link2, .nu31_link3, .nu31_link4
{
width: 150px;
height: 48px;
margin-bottom: 2px;
opacity: 0.6;
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
filter: alpha(opacity=60);
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.nu31_link1
{
background: url(http://img15.hostingpics.net/pics/272286bouton1.jpg);
}
.nu31_link2
{
background: url(http://img15.hostingpics.net/pics/437826bouton2.jpg);
}
.nu31_link3
{
background: url(http://img15.hostingpics.net/pics/474878bouton3.jpg);
}
.nu31_link4
{
background: url(http://img15.hostingpics.net/pics/563812bouton4.jpg);
}
.nu31_link1:hover, .nu31_link2:hover, .nu31_link3:hover, .nu31_link4:hover
{
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.nu31_contenu1
{
width: 800px;
height: 200px;
margin-left: 150px;
background: #e8e8e8;
border: 1px solid #cccaca;
}
.nu31_contenu2
{
position: absolute;
width: 0px;
height: 200px;
margin-left: 150px;
overflow: hidden;
background: #e9c8a4;
border: 1px solid #cccaca;
color: #8a6c4c;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.nu31_contenu3
{
position: absolute;
width: 0px;
height: 200px;
margin-left: 150px;
margin-top: -50px;
overflow: hidden;
background: #e9c8a4;
border: 1px solid #cccaca;
color: #8a6c4c;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.nu31_contenu4
{
position: absolute;
width: 0px;
height: 200px;
margin-left: 150px;
margin-top: -100px;
overflow: hidden;
background: #e9c8a4;
border: 1px solid #cccaca;
color: #8a6c4c;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.nu31_contenu5
{
position: absolute;
width: 0px;
height: 200px;
margin-left: 150px;
margin-top: -150px;
overflow: hidden;
background: #e9c8a4;
border: 1px solid #cccaca;
color: #8a6c4c;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.nu31_link1:hover .nu31_contenu2, .nu31_link2:hover .nu31_contenu3, .nu31_link3:hover .nu31_contenu4,
.nu31_link4:hover .nu31_contenu5
{
width: 800px;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.nu31_contenu
{
display: block;
padding: 5px;
color: #965423;
font-size: 10px;
text-align: justify;
}
Personnalisation
Pour personnaliser ce code c'est très simple : changez comme vous le souhaitez les couleurs des fonds, bordures et texte. Vous pouvez y inclure ce que vous souhaitez à l'intérieur : images, liens, etc...
Concernant les tailles, sachez qu'une modification de taille d'un morceau entraine une adaptation des tailles du reste, ou même des marges.
Les boutons sont simplement des images à faire à votre convenance, arrangez-vous pour qu'ils soient de la même dimension que les miens (150*48) afin de vous simplifier la vie.
Vous pouvez ajouter une image au dessus en guise de titre, ou bien une image de fond globale, ou différente selon les contenus. En effet, chaque contenu ayant son propre css, vous pouvez leur mettre des couleurs différentes.
En cas d'utilisation de ces codes merci de mettre un crédit à Never-Utopia sur votre forum, même si vous personnalisez le code, la base a été écrite ici. Un petit crédit, ce n'est pas grand chose, et nous ne demandons que ça pour le partage de notre petit savoir x)
Vos commentaires et remerciements sont toujours bienvenus ^^
Si vous avez des problèmes avec ce LS, venez poster ici.
Dernière édition par Sparrow-style le Jeu 28 Mar 2013 - 12:50, édité 1 fois
