AccueilRechercherS'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.

Le Deal du moment : -50%
-50% sur Radio-réveil LENOVO SMART CLOCK ...
Voir le deal
24.99 €

    Navigation rapide - Bloc flottant qui s'ouvre au survol

    sébastien
    sébastien
    MasculinAge : 38Messages : 642

    Ven 23 Nov 2012 - 17:01

    Rappel du premier message :


    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
    https://www.never-utopia.com/t41098-code-css
    Réaliser par
    Shinomix



    © Never-Utopia



    Navigation rapide - Bloc flottant qui s'ouvre au survol - Page 3 Signat10
    Mangédéfruiélégumeuh
    Mangédéfruiélégumeuh
    MasculinAge : 24Messages : 83

    Mar 10 Juin 2014 - 13:52

    Merci :)
    avatar
    Zahil
    MasculinAge : 28Messages : 29

    Mer 11 Juin 2014 - 19:32

    Merci !
    Nanou0001
    Nanou0001
    FémininAge : 37Messages : 50

    Mer 2 Juil 2014 - 9:10

    merci beaucoup
    patriciadpt30
    patriciadpt30
    FémininAge : 58Messages : 240

    Lun 28 Juil 2014 - 15:31

    merci superbe



    Patricia :)
    Nat
    Nat
    FémininAge : 27Messages : 42

    Lun 11 Aoû 2014 - 10:31

    marchiii
    Keylha
    Keylha
    FémininAge : 21Messages : 82

    Mer 13 Aoû 2014 - 10:55

    Merci du partage c'est ce qu'il me fallait. :3



    KimmyKinder
    KimmyKinder
    FémininAge : 20Messages : 181

    Sam 16 Aoû 2014 - 23:15

    Merci beaucoup
    Percylove
    Percylove
    FémininAge : 26Messages : 259

    Mar 19 Aoû 2014 - 2:43

    Merci, je vais tester!



    Navigation rapide - Bloc flottant qui s'ouvre au survol - Page 3 9a6v
    Shymi
    Shymi
    FémininAge : 23Messages : 65

    Dim 24 Aoû 2014 - 15:34

    Merci:!
    Lucasvlp
    Lucasvlp
    MasculinAge : 24Messages : 81

    Mer 27 Aoû 2014 - 4:29

    merci



    Pokebip
    Pokebip
    MasculinAge : 23Messages : 69

    Sam 6 Sep 2014 - 19:46

    merci!
    ColorTime'Less
    ColorTime'Less
    FémininAge : 24Messages : 106

    Dim 7 Sep 2014 - 14:46

    Sympa merci !
    G U E R L A I N
    G U E R L A I N
    FémininAge : 30Messages : 192

    Dim 7 Sep 2014 - 19:59

    utile! merci



    Navigation rapide - Bloc flottant qui s'ouvre au survol - Page 3 191114colorfulwallandsexygirlfacebookcovero1
    Storminder
    Storminder
    MasculinAge : 25Messages : 56

    Dim 9 Nov 2014 - 20:49

    Merci ! Very Happy
    Okalem
    Okalem
    FémininAge : 21Messages : 63

    Jeu 8 Jan 2015 - 23:23

    merci !
    Chanira
    Chanira
    FémininAge : 24Messages : 18

    Dim 25 Jan 2015 - 16:52

    Superbe, merci !
    catinaphone
    catinaphone
    FémininAge : 29Messages : 93

    Dim 1 Fév 2015 - 23:18

    Je n'arrive pas à voir l'aperçu, du coup, je ne sais pas trop de quelle sorte de menu de navigation il s'agit ... ><
    Bunny Lune
    Bunny Lune
    FémininAge : 32Messages : 145

    Mar 17 Fév 2015 - 11:29

    Merci beaucoup pour le partage
    Psychotic Bitch
    Psychotic Bitch
    FémininAge : 35Messages : 41

    Mar 17 Fév 2015 - 19:13

    merci c'est très utile je trouve :)
    Rosedesvents
    Rosedesvents
    FémininAge : 35Messages : 97

    Ven 13 Mar 2015 - 20:11

    Merci :)
    ~Nodoka~
    ~Nodoka~
    FémininAge : 24Messages : 185

    Ven 20 Mar 2015 - 14:49

    merci
    Celuna
    Celuna
    FémininAge : 31Messages : 133

    Sam 21 Mar 2015 - 8:50

    Merci
    Chocolakato
    Chocolakato
    FémininAge : 31Messages : 822

    Mer 20 Mai 2015 - 19:32

    Merci beaucoup :)



    Lilynufare
    Lilynufare
    FémininAge : 31Messages : 341

    Ven 22 Mai 2015 - 0:12

    merci
    darkhero246
    darkhero246
    MasculinAge : 29Messages : 179

    Lun 8 Juin 2015 - 23:11

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Dim 28 Nov 2021 - 22:07