AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Menu latéral coulissant sur un côté du forum

    Partagez
    avatar
    Sideris
    FémininAge : 22Messages : 107

    le Dim 10 Juil 2016 - 22:31

    Menu latéral coulissant sur le côté



    Bonsoir,

    Je suis depuis quelques temps en pleine réalisation de mon tout premier forum RPG, alors autant vous dire que je suis encore débutante en codage. Néanmoins, j'apprends au fur et à mesure grâce aux tutoriels, en décortiquant les codes trouvés ou des libres services. Seulement, étant en ce moment dans l'optique de créer un nouvel élément sur mon forum, je ne trouve malheureusement rien de très concret en terme de tutoriel, ou rien qui me satisfait vraiment. J'ai en ce moment envie de créer, comme le dit le titre, de créer un menu latéral qui se trouverait sur le côté droit de mon forum.

    Néanmoins, j'aurais quelques "exigences", si je peux appeler ça comme ça :
    • j'aimerais que le menu soit complètement INDEPENDANT de la barre de navigation et de ses liens, voulant m'en servir comme sorte de "navigation rapide" et où je pourrais intégrer diverses informations
    • ce menu prendrait toute la hauteur de la page Internet tout en étant "collé" sur le côté droit de cette même page
    • je préférerais que ce menu apparaisse sur n'importe quelle page
    • je voudrais également que le menu soit coulissant vers la gauche, qu'il apparaisse au survol de la souris OU bien que l'on me donne le code permettant de faire cela tout en l'expliquant.

    Je vous remercie d'avance pour votre aide,

    En espérant trouver quelques âmes charitables parmi vous,
    FuryOfLiving










    avatar
    Onyx
    FémininAge : 23Messages : 2980

    le Lun 11 Juil 2016 - 18:47

    Salut !

    Je te réfère ici, tu devrais trouver ton bonheur ^^
    http://www.never-utopia.com/t27447-widget-flottant

    Pour que cela fasse la hauteur de ta page, tu mets un height à 100% et tu peux y mettre ce que tu veux ^^



    avatar
    Onyx
    FémininAge : 23Messages : 2980

    le Lun 11 Juil 2016 - 21:54

    Après coup, je me dis qu'il manque des trucs pour que cela s'adapte très bien à ta situation.

    Donc :

    1ère étape : Où mettre le code

    Tu vas dans ton template Overhall_header, juste après ce bout de code :
    Code:
    <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

    Et tu mets ceci juste après :
    Code:
      <div class="menu_flottant"> /*Conteneur de l'onglet du menu flottant et du menu*/

        <div class="menu_flottant_onglet"> /*Onglet du menu flottant qui va nous permettre d'ouvrir le menu quand on survole l'onglet*/
          Menu
        </div>

        <div class="menu_flottant_contenu"> /*Menu lui-même*/
          /*Contenu du menu*/
        </div>
      </div>

    Pourquoi dans le template Overhall_header? Parce qu'il s'agit du haut de page de toutes les pages du forum alors cela va permettre à ton menu de s'afficher partout.




    2ème Étape : On crée le CSS pour le positionner

    Tu mets ceci dans le CSS :
    Code:
    /*Bloc qui va contenir le menu et l'onglet*/
    .menu_flottant {
      position: fixed; /*Fixe le menu sur un coin de la page*/
      top: 0px; /*Top veut dire que c'est collé en haut et 0px que c'est à 0px du bord*/
      right: -200px; /*Right veut dire que c'est à droite et -200px veut dire qu'il est caché de 200px*/
      width: 200px;
      height: 100%;
    }
    /*Onglet qui va permettre d'ouvrir le menu*/
    .menu_flottant_onglet {
      position: absolute; /*On le place en position absolute par rapport au menu*/
      top: 40%; /*On le positionne à environ 40% de la hauteur en partant du haut*/
      left: -50px; /*On le positionne à -50px du bord de gauche du menu pour qu'il dépasse*/
      width: 50px;
      height: 50px;
      border-radius: 100% 0% 0% 100%;
      -webkit-transition: 0.5s;
      transition: 0.5s;
    }
    /*Menu lui-même*/
    .menu_flottant_contenu {
      height: 100%;
      padding: 5px;
      background-color: #a3a3a3;
      font-size: 12px;
      font-family: 'Arial';
      color: #545454;
    }
    /*Au survol du menu flottant ou des trucs à l'intérieur (incluant l'onglet)*/
    .menu_flottant:hover {
      right: 0px; /*Le menu se déplace à 0px du bord de droite, donc il arrête de se cacher*/
    }

    Les explications sont directement dans le CSS.

    Et voilà, après tu t'occupes de personnaliser le menu comme tu veux et tu mets le contenu que tu veux aussi ^^



    Contenu sponsorisé


      La date/heure actuelle est Lun 25 Sep 2017 - 6:11