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.


    Navigation rapide - Bloc flottant qui s'ouvre au survol

    Partagez
    avatar
    sébastien
    MasculinAge : 34Messages : 634

    le Ven 23 Nov 2012 - 17:01


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide






    Navigation rapide


    Difficulté
    Facile,il ne reste qu'à personnaliser
    Outils
    Aucun
    Résultat
    Avoir une navigation rapide pratique et discrète
    correction du CSS
    Sparrow-style
    Crédit
    © Never-Utopia


    code HTML et CSS



    Le code HTML est à mettre dans les annonces.
    PA=>général=>messages et emails =>annonces

    Pour les paramètres de l'annonce, vous choisissez :
    > Activer les annonces : Oui
    > Affichage des annonces : Toutes les pages
    > Défilement : Désactiver

    Puis vous mettez créez une annonce et y mettez ce code :
    Code:
    <div class="widget_flottant">
    <span class="widget_flottant3">
    <a href="http://l-anneau-des-dragons.1fr1.net/" class="postlink"><span style="font-size: 18px; line-height: normal; text-decoration: underline; font-weight: bold;">Index</span></a></br></br>
    <u>Info</u></br>
    <a href="lien" class="postlink"><strong>Règlement</strong></a></br>
    <a href="lien" class="postlink"><strong>Backgroud</strong></a></br>
    <a href="lien" class="postlink"><strong>Races jouables</strong></a></br>
    <a href="lien" class="postlink"><strong>Compétences</strong></a></br>
    <a href="lien" class="postlink"><strong>Modèle de fiche</strong></a></br>
    <a href="lien" class="postlink"><strong>Cadre de topic</strong></a></br></br>
    <u>HRP</u></br>
    <a href="lien" class="postlink"><strong>Administration</strong></a></br>
    <a href="lien" class="postlink"><strong>Taverne</strong></a></br>
    <a href="lien" class="postlink"><strong>Archive</strong></a></br></br>
    <u>RP</u></br>
    <a href="lien" class="postlink"><strong>RP-1</strong></a></br>
    <a href="lien" class="postlink"><strong>RP-2</strong></a></br>
    <a href="lien" class="postlink"><strong>RP-3</strong></a></br>
    <a href="lien" class="postlink"><strong>RP-5</strong></a></br>
    <a href="lien" class="postlink"><strong>RP-6</strong></a></span>
    <span class="widget_flottant2"><img src="http://i44.servimg.com/u/f44/15/54/03/92/anneau10.gif" border="0" alt="" />
    </span>
    </div>


    Vous allez ensuite dans la feuille de CSS pour mettre le CSS :
    Code:
    .widget_flottant
    {
      z-index: 999;
      position:fixed;
      top: 50px;
      right: 0px;
      width: 0px;
      height: 100px;
      transition: 1s;
      -webkit-transition: 1s;
      color: #dfdfdf;
      font-size: 12px;
      font-family: 'verdana';
    }
    .widget_flottant:hover
    {
      width: 150px;
      height: 361px;
      transition: 1s;
      -webkit-transition: 1s;
    }
    .widget_flottant3
    {
      display:block;
      text-align: center;
      margin: 0px;
      height: 361px;
      overflow: hidden;
      background: #7F7F7F;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      border: 2px #000000 solid;
    }
    .widget_flottant2
    {
      position: relative;
      float:left;
      display:block;
      margin: 0px;
      overflow: hidden;
      width: 33px;
      height: 175px;
      left: -33px;
      top: -320px;
      background-image: url(http://img15.hostingpics.net/pics/621948navrap.png);
      background-repeat: no-repeat;
    }
    .widget_flottant a {
      color: #c4c4c4!important;
    }
    .widget_flottant a:hover {
      color: #ffffff!important;
    }


    Personnalisation


    Pour personnaliser ce code, je vous suggère d'aller lire ce sujet, il m'a aidé à construire le CSS de ce code. Il devrait pouvoir vous aider à le personnaliser.

    Nom du sujet
    .code { CSS: ???; }
    Lien
    http://www.never-utopia.com/t41098-code-css
    Réaliser par
    Shinomix



    © Never-Utopia



    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Ven 23 Nov 2012 - 17:06

    Merci de ce partage Very Happy. Ma correction était minime, mais merci de l'avoir citée^^
    J'ai été surpris que tu mettes le code dans les annonces, mais pourquoi pas x) Je tiens juste à préciser qu'il est aussi possible de le mettre ailleurs, tout dépend de l'endroit où vous souhaitez le placer.
    Si vous mettez ce code en haut de page, mettrez le ligne 214, juste après :

    Code:
       <!-- END hitskin_preview -->



    avatar
    sébastien
    MasculinAge : 34Messages : 634

    le Ven 23 Nov 2012 - 17:20

    Merci pour l'info supplémentaire Very Happy

    j'ai mit mon code dans les annonce car j’utilise les annonces dans le cadre de mon Background, et comme j'y connais rien en Templates... c'est le moyen le plus simple et le plus rapide pour avoir la navigation rapide sur toute les page. Wink



    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Ven 23 Nov 2012 - 17:41

    Exact^^ Disons que pour ceux qui n'auraient pas activé les annonces ou ne voudraient pas s'en servir, le mettre dans le template haut de page est une alternative x).



    avatar
    LeFimoteur
    MasculinAge : 18Messages : 18

    le Ven 23 Nov 2012 - 21:30

    Merci (=
    avatar
    K'Aya
    FémininAge : 18Messages : 427

    le Ven 23 Nov 2012 - 22:00

    Merci, çà me sera utile. ^^
    avatar
    Nevah
    MasculinAge : 30Messages : 30

    le Lun 10 Déc 2012 - 4:47

    Merci bien Wink
    avatar
    Moriarty
    FémininAge : 22Messages : 85

    le Lun 10 Déc 2012 - 16:34

    Merci ♥
    avatar
    Teseu
    MasculinAge : 22Messages : 54

    le Sam 5 Jan 2013 - 5:49

    Merci =D
    avatar
    Graph"X"
    MasculinAge : 31Messages : 268

    le Ven 18 Jan 2013 - 16:17

    merci






    Mon forum Reptile:

    avatar
    Slown
    FémininAge : 22Messages : 61

    le Sam 2 Fév 2013 - 17:51

    Merci :)
    avatar
    Apaer Kisoku
    MasculinAge : 19Messages : 6

    le Dim 3 Fév 2013 - 21:25

    Merci ça me servira beaucoup .



    avatar
    Lindaóma
    FémininAge : 19Messages : 150

    le Mer 27 Fév 2013 - 16:25

    Merci pour le partage, je pense que ça me servira ^^.



    avatar
    Petite-Lune
    FémininAge : 18Messages : 16

    le Jeu 14 Mar 2013 - 20:09

    Merci !
    avatar
    ♕ William
    MasculinAge : 20Messages : 72

    le Ven 22 Mar 2013 - 20:03

    Merci ahah




    William
    avatar
    Solitude
    FémininAge : 42Messages : 283

    le Mer 27 Mar 2013 - 20:33

    Merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    avatar
    Arcanata
    MasculinAge : 23Messages : 18

    le Lun 1 Avr 2013 - 16:17

    Merci :)
    avatar
    Reeta
    FémininAge : 22Messages : 34

    le Jeu 4 Avr 2013 - 14:59

    Merci !
    avatar
    HeartLessB
    FémininAge : 19Messages : 78

    le Mar 23 Avr 2013 - 20:23

    Ça m'interesse
    avatar
    servity
    MasculinAge : 45Messages : 82

    le Lun 29 Avr 2013 - 12:21

    encore un super tutoriel,merci du partage



    avatar
    Alzufen
    MasculinAge : 21Messages : 2103

    le Mer 8 Mai 2013 - 2:17

    Mersims =D



    avatar
    Diboan
    MasculinAge : 24Messages : 7

    le Jeu 20 Juin 2013 - 0:40

    Merci Wink
    avatar
    Azuriel
    FémininAge : 22Messages : 129

    le Dim 14 Juil 2013 - 7:14

    Je vais tenter ^^
    avatar
    Skyfall
    FémininAge : 16Messages : 23

    le Ven 19 Juil 2013 - 12:04

    Merci bien ! Je cherchais comment faire justement.



    avatar
    Ab0utxMe
    FémininAge : 22Messages : 182

    le Sam 20 Juil 2013 - 18:06

    Merci ! Ca va me servir ça !



    Contenu sponsorisé


      La date/heure actuelle est Sam 21 Oct 2017 - 1:35