AccueilAccueil  Dernières imagesDernières images  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  


Le deal à ne pas rater :
Cartes Pokémon 151 : où trouver le coffret Collection Alakazam-ex ?
Voir le deal

Artifices :: Libre Service :: Templates 01 :: Barres de navigation
 

 Sidebar Rétractable #2

Aller en bas 
Artemis
aka artedelamuerte
Artemis



MessageSujet: Sidebar Rétractable #2   Sidebar Rétractable #2 EmptySam 25 Juil - 11:57


Codes



Ce code est compatible avec toutes les versions (à placer après la balise body). Il fait suite à la commande d'index du forum Tales of Salva.

Dans le template overall_header, après cette partie :
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}"
  vlink="{T_BODY_VLINK}">

collez ce morceau de code :
Code:
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600&display=swap" rel="stylesheet">
<div class="sidebarsalva">
 <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
 <label for="openSidebarMenu" class="sidebarIconToggle">
 <div class="spinner diagonal part-1"></div>
 <div class="spinner horizontal"></div>
 <div class="spinner diagonal part-2"></div>
 <div class="spinner diagonal part-3"></div>
 </label>
 <div id="sidebarMenu">
 <h2>Nom du forum</h2>
 <div class="img_contexte">
 <img src="https://data.whicdn.com/images/329858788/original.jpg"/>
 </div>
 <p>
 Lorem ipsum dolor sit amet. Duis sed sodales magna, nec vulputate ante. Donec in eros magna. Phasellus varius sodales mi, at molestie mauris tempus a. Phasellus sed nunc efficitur, tempor neque a, posuere ex. Nunc ac lacinia nibh, quis suscipit tellus. Nullam condimentum euismod ante. Aenean sed libero ac turpis rhoncus viverra.
 </p>
 <h3>Nos prédéfinis</h3>
 <div class="block_predefs">
 <div class="hover_predefinis">
 <a href="#"><img src="https://via.placeholder.com/40"/></a>
 <div>
 Pseudo
 </div>
 </div>
 <div class="hover_predefinis">
 <a href="#"><img src="https://via.placeholder.com/40"/></a>
 <div>
 Pseudo
 </div>
 </div>
 <div class="hover_predefinis">
 <a href="#"><img src="https://via.placeholder.com/40"/></a>
 <div>
 Pseudo
 </div>
 </div>
 <div class="hover_predefinis">
 <a href="#"><img src="https://via.placeholder.com/40"/></a>
 <div>
 Pseudo
 </div>
 </div>
 <div class="hover_predefinis">
 <a href="#"><img src="https://via.placeholder.com/40"/></a>
 <div>
 Pseudo
 </div>
 </div>
 <div class="hover_predefinis">
 <a href="#"><img src="https://via.placeholder.com/40"/></a>
 <div>
 Pseudo
 </div>
 </div>
 <div class="hover_predefinis">
 <a href="#"><img src="https://via.placeholder.com/40"/></a>
 <div>
 Pseudo
 </div>
 </div>
 <div class="hover_predefinis">
 <a href="#"><img src="https://via.placeholder.com/40"/></a>
 <div>
 Pseudo
 </div>
 </div>
 </div>
 <h3>Forums à l'affiche</h3>
 <div class="block_predefs">
 <a href="#"><img src="https://via.placeholder.com/88x31"/></a>
 <a href="#"><img src="https://via.placeholder.com/88x31"/></a>
 <a href="#"><img src="https://via.placeholder.com/88x31"/></a>
 <a href="#"><img src="https://via.placeholder.com/88x31"/></a>
 </div>
 <h3>A consulter</h3>
 <div class="block_consulter">
 <span>En manque d'interaction sociale</span>
 - sujet demande :
 <a href="#">www</a>
 <br/>
 - sujet demande :
 <a href="#">www</a>
 <br/>
 - sujet demande :
 <a href="#">www</a>
 <span>Dernières news immanquables</span>
 - sujet demande :
 <a href="#">www</a>
 <br/>
 - sujet demande :
 <a href="#">www</a>
 <br/>
 - sujet demande :
 <a href="#">www</a>
 </div>
 </div>
</div>

CSS :
Code:

:root
{
 --couleur-fond: #b0f0d0;
 --couleur-fond2: #9993e3;
}

#sidebarMenu
{
 height: 100%;
 position: fixed;
 left: 0;
 width: 205px;
 top:0;
 -webkit-transition: -webkit-transform 250ms ease-in-out;
 transition: -webkit-transform 250ms ease-in-out;
 -o-transition: transform 250ms ease-in-out;
 transition: transform 250ms ease-in-out;
 transition: transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out;
 background:#FFFFFF;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 padding: 15px;
}

input[type="checkbox"]:checked ~ #sidebarMenu
{
 -webkit-transform: translateX(-250px);
 -ms-transform: translateX(-250px);
 transform: translateX(-250px);
}

.sidebarsalva input[type=checkbox]
{
 -webkit-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 display: none;
}

.sidebarIconToggle
{
 -webkit-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 cursor: pointer;
 position: fixed;
 z-index: 99;
 top: 15px;
 left: 210px;
 height: 22px;
 width: 22px;
}

.spinner
{
 -webkit-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 position: absolute;
 height: 3px;
 width: 100%;
 background-color: #fff;
}

.horizontal
{
 -webkit-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 position: relative;
 float: left;
 margin-top: 3px;
 background: var(--couleur-fond);
 -webkit-transform: rotate(135deg);
 -ms-transform: rotate(135deg);
 transform: rotate(135deg);
 margin-top: 7px;
 opacity: 0;
}

.diagonal.part-1
{
 position: relative;
 -webkit-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 float: left;
 background: var(--couleur-fond);
 -webkit-transform: rotate(135deg);
 -ms-transform: rotate(135deg);
 transform: rotate(135deg);
 margin-top: 9px;
}

.diagonal.part-2
{
 -webkit-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 position: relative;
 float: left;
 margin-top: -13.5px;
 background: var(--couleur-fond);
 -webkit-transform: rotate(-135deg);
 -ms-transform: rotate(-135deg);
 transform: rotate(-135deg);
}

.diagonal.part-3
{
 -webkit-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 position: relative;
 float: left;
 margin-top: -12px;
 background: var(--couleur-fond);
 -webkit-transform: rotate(-135deg);
 -ms-transform: rotate(-135deg);
 transform: rotate(-135deg);
 opacity: 0;
}

.sidebarsalva input[type=checkbox]:checked ~ .sidebarIconToggle
{
 left: 15px;
}

.sidebarsalva input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal
{
 -webkit-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 opacity: 0;
 background: black;
}

.sidebarsalva input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1
{
 -webkit-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transform: rotate(0);
 -ms-transform: rotate(0);
 transform: rotate(0);
 margin-top: 9px;
}

.sidebarsalva input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2
{
 -webkit-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transform: rotate(0);
 -ms-transform: rotate(0);
 transform: rotate(0);
 margin-top: -8px;
}

.sidebarsalva input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-3
{
 -webkit-transition: all 0.3s;
 -o-transition: all 0.3s;
 transition: all 0.3s;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transform: rotate(0);
 -ms-transform: rotate(0);
 transform: rotate(0);
 margin-top: -3px;
 opacity: 1;
}

#sidebarMenu h2
{
 width: 100%;
 font: 26px barlow condensed;
 text-transform: uppercase;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 text-align:center;
 font-weight: 600;
 margin: 0;
 color: var(--couleur-fond);
}

#sidebarMenu p
{
 width: 100%;
 margin: 10px 0 10px 0;
 font: 11px calibri;
 text-align: justify;
 color: #8b8b8b;
 min-height: 60px;
 max-height: 190px;
 line-height: 10px;
}

.img_contexte
{
 width: 100%;
 height: 50px;
 overflow: hidden;
 background: white;
 border: 2px solid #DFDFDF;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 position: relative;
 margin-top: 5px;
}

#sidebarMenu h3
{
 width: 100%;
 height: 30px;
 background: linear-gradient(var(--couleur-fond), var(--couleur-fond2));
 font: 18px barlow condensed;
 text-align: center;
 text-transform: uppercase;
 line-height: 30px;
 color: #f8f8f8;
 font-weight: 600;
 margin:0;
}

.img_contexte img
{
 width: 100%;
 height: 100%;
 -o-object-fit: cover;
 object-fit: cover;
 position: relative;
 z-index: 99;
}

.block_predefs
{
 width: 100%;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-box-pack: justify;
 -ms-flex-pack: justify;
 justify-content: space-between;
 margin-top: 8px;
 margin-bottom: 8px;
}

.hover_predefinis
{
 width: 42px;
 height: 42px;
 position: relative;
 display: inline-block;
 margin: 1px 0;
}

.hover_predefinis div
{
 font: 10px calibri;
 font-weight: bold;
 text-transform: uppercase;
 background: rgba(251,251,251,0.5);
 width: auto;
 padding: 2px 5px;
 position: absolute;
 left: 10px;
 top: 10px;
 opacity: 0;
 visibility: hidden;
 -webkit-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;
 z-index: 99;
}

.hover_predefinis:hover div
{
 visibility: visible;
 opacity: 1;
}

Pour modifier très rapidement la couleur des blocs, changez uniquement ce code couleur situé au début du CSS :
Code:
:root
{
 --couleur-fond: #b0f0d0;
 --couleur-fond2: #9993e3;
}

En cas de soucis avec ce code, laissez-moi un petit message ici ! c:



Revenir en haut Aller en bas
 
Sidebar Rétractable #2
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Sidebar Rétractable #1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Sauter vers:  
forumTrismegis AcademyTerribleforumforumforumforumforumforumforumforumforumforumforumforumforumforumforumforumforumforumforum