Créer un OnClick sur une boite latéral

Bonjour,

Donc voilà j'ai créer une boite latéral à l'aide d'une demande archivé que j'ai trouver (https://www.never-utopia.com/t38392-boite-lateral?highlight=Boite+lat%E9ral). Toutefois, elle relève un sérieux problème lorsqu'on utilise un téléphone portable. De ce fait, j'aurais aimé pouvoir instaurer un onClick qui ouvrirait et fermerait cette barre latéral. (Idéalement un bouton Vertical sur le coté gauche car la boite était normalement a droite du forum)

Noter que dans cette barre latéral se trouve également la chatbox latéral d'alumine.

Le forum correspondant: http://karasunoguild.forumactif.fr/
Navigateur: Chrome

Voici les codes correspondant:

[hide]partie se trouvant dans Overall_header

Code:

<div class="BOITE1">
 
 <div class="CADRE1">
  Navigation Rapide  
 </div>
           <div class="ZONETEXT1">
                  <a href="http://karasunoguild.forumactif.fr/search?search_id=newposts">Nouveaux messages</a><br />
                  <a href="http://karasunoguild.forumactif.fr/search?search_id=activetopics">Sujets du jour</a></div>
          <div id="Chat_title"><a href="/chatbox/index.forum">♫♪ Karadiscute ♪♫</a></div>
          <div id="cb">
   <iframe src="/chatbox/index.forum" style="width: 200px; height: 100%;" frameborder="0" cellspacing="0"></iframe>
 </div>
 </div>
  
  <!-- BEGIN hitskin_preview -->
 <div id="hitskin_preview" style="display: block;">
 <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
 <div class="content">
 <p>
 {hitskin_preview.L_THEME_SITE_PREVIEW}
 <br />
 <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
 </p>
 </div>
 </div>
 <!-- END hitskin_preview -->

 <!-- BEGIN switch_login_popup -->
 <div id="login_popup" style="z-index: 10000 !important;">
 <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
 <tr height="25">
 <td class="catLeft">
 <span class="genmed module-title">{SITENAME}</span>
 </td>
 </tr>
 <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
 <td class="row1" align="left" valign="top">
 <div id="login_popup_buttons">
 <form action="{S_LOGIN_ACTION}" method="get">
 <input type="submit" class="mainoption" value="{L_LOGIN}" />
 <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
 <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
 </form>
 </div>
 <span class="genmed">{LOGIN_POPUP_MSG}</span>
 </td>
 </tr>
 </table>
 </div>

LE CSS:

Code:

.BOITE1 {  
width:200px; /*--Largeur à éditer en fonction de la taille de ton forum (en px ou %)--*/
height:100%;/*--Hauteur à changer en fonction de ton texte--*/
box-shadow:0px 2px 5px black; /*--Ombre de ta boite--*/
-moz-box-shadow:0px 2px 5px black;
-webkit-box-shadow:0px 2px 5px black;
  
position:fixed; /*--Position de la boite : Fixe--*/
TOP : 0px; /*--Position à partir du haut--*/
left: 0px;
Background-color:#1a1919; /*--Couleur de fond : supprimer pour mettre en transparent--*/
padding-top:4px;/*--Marge intérieure du haut, éditée "à la place" de la bordure générale--*/
text-align:justify; /*--Alignement du texte : "right" -> droite ; "left" -> Gauche ; "justify" -> justifié . --*/
Color: #bcbcbc ; /*--Mettre un nom de couleur (ex:BLACK) ou un code couleur (ex:#000000), pour changer le couleur du texte--*/
  border-right: 2px solid #303030;
  z-index: 99;
}

.CADRE1{
height:26px;
margin-bottom:5px; /*--marge extérieure du cadre - en bas--*/
box-shadow:0px 2px 5px black;
-moz-box-shadow:0px 2px 5px black;
-webkit-box-shadow:0px 2px 5px black;
    line-height: 26px;
text-align:center;
padding:5px;
background-color: #040404 ;
color: #eb7118 ; /*--Couleur du texte :
  Note : le vert donné n'était pas le bon donc à éditer si ça ne convient pas--*/
font-family: GEORGIA ; /*--Typo du titre souhaité--*/
font-size: 14px ;  /*--Taille de la typo--*/
    text-transform: uppercase;
}

.ZONETEXT1 {
  padding: 5px;
  font-size: 12px;
}

/*CHATBOX, par Alu pour Never-Utopia********************************************************************/
#Chat_title {
    font-size: 22px;
    font-weight: 200;
    margin-top: 241px;
    text-align: center;
    width: 100%;
    height: 35px;
    line-height: 35px;
    background: #000;
    color: #eb7118;
}
#Chat_title a, #Chat_title a:hover {Color: #eb7118;}
#cb, body{transition:margin 2s ease, left 2s ease;}
#cb{height:425px; left: 0px ;position:fixed;  bottom:0px; z-index: 999;}

body.chatbox{
  font-family:'sans-serif';/*police*/
  font-weight:200;/*epaisseur police(normal:enlever la ligne)*/
}
#chatbox_footer, #chatbox_footer .catBottom{height:60px !important;background-color:#0b0b0b; /*couleur du bas de la cb*/}
#chatbox_header{width:100%; position:absolute;background-color:#000; /*couleur du haut de la cb*/}
.chatbox_row_2{background: #333 /*couleur de la rangée message foncée*/}
.chatbox_row_1, #chatbox{ background:#1a1919;/*couleur du fond de la cb et de la rangée message claire*/}
#chatbox_members{width:100%; height: 50px;border:none; background-color:#0b0b0b !important;/*couleur de fond de la partie membres en ligne*/ color:white;/*couleur du texte*/}

#chatbox_footer #divcolor, #chatbox_footer #divsmilies, #chatbox_footer #help-button, #chatbox_footer #submit_button, #chatbox_footer .format-message + label {
  background: COULEUR !important;
    color: #000 !important;
  border: 1px solid COULEUR;
}
/*phrases de connexion et déconnexion*/
.msg span[style*="green"] strong{color:#1fcc5d; font-variant:small-caps; font-weight:normal;}
.msg span[style*="red"] strong {color:#ff000; font-variant:small-caps; font-weight:normal;}

/*remplacer le titre de la chatbox*/
#chatbox_header .cattitle strong { display: none; }
#chatbox_header .cattitle:before {content:"";font-weight:200}

/*affichage des avatars*/
#chatbox .cb-avatar > img { height: 66px !important; width: 30px !important;}
#chatbox .cb-avatar {
  float: left;
  margin-right: 4px;
  background-color:white;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  height: 40px !important;
  width: 30px;
  vertical-align: middle;
  overflow:hidden !important;
}

/*Ne pas toucher*/
.chatbox td.catBottom{border:none !important;}
#chatbox{top:80px; left:0; bottom:50px;}
#chatbox_header .catBottom{height:30px;}

.text-styles td{vertical-align:top;}
.chatfootertable{display:block;width:100%; top:13px; position:relative;}
.text-styles td:last-child{display: block !important; position:absolute;right:10px; top:-27px;height:20px;}
.text-styles td:last-child label{display: none;}

.away-users li{display:inline;font-weight:400 !important;color:white !important;}
body.chatbox strong{font-weight:400; font-variant:small-caps;letter-spacing:1px;}
#chatbox .date-and-time {font-size:9px;}
#chatbox_members .member-title{color:white;font-weight:400;font-variant:small-caps;}
#chatbox > p {border-bottom: 1px solid #d5dde5;}
input#message {width: 120px; color: #000 !important;}

/*bouton de la chatbox*/
.bouton{
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  text-align:center;
  color:#FFFFFF;/*couleur du texte*/
  padding:5px 10px;
  border-radius:2px;
  border:none;
  font: 600 20px 'Amatic SC';/*police*/
  letter-spacing:2px;/*espacement des lettres*/
  text-shadow:0 1px 0 green;/*ombre du texte*/
  background-color:#68BF56;/*couleur de fond*/
  box-shadow: 0px 3px 0px 0px #3D992B;/*ombre*/
  -webkit-transition: background 0.2s ease;
  -moz-transition: background 0.2s ease;
  transition: background 0.2s ease-in-out;
}
.bouton:hover {background-color: #54B341;/*couleur de fond au survol de la souris*/}
.bouton:active {box-shadow: 0px 1px 0px 0px #3D992B;padding-top:6px; padding-bottom:4px;}/*au moment du clic*/

MERCI

Finalement, j'ai trouvé!!!

grace à ce tuto: https://www.never-utopia.com/t41242-onglet-flottant-ouvrable-onclic-css-only

Avec quelques modification naturellement!

Salut!

Eh bien félicitation pour avoir réussi tout seul ^^ Dois-je en conclure que je peux archiver le sujet?