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

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



    © Never-Utopia



    avatar
    Mangédéfruiélégumeuh
    MasculinAge : 20Messages : 83

    le Mar 10 Juin 2014 - 13:52

    Merci :)
    Zahil
    MasculinAge : 23Messages : 29

    le Mer 11 Juin 2014 - 19:32

    Merci !
    avatar
    Nanou0001
    FémininAge : 32Messages : 50

    le Mer 2 Juil 2014 - 9:10

    merci beaucoup
    avatar
    patriciadpt30
    FémininAge : 54Messages : 240

    le Lun 28 Juil 2014 - 15:31

    merci superbe



    Patricia :)
    avatar
    Nat
    FémininAge : 22Messages : 42

    le Lun 11 Aoû 2014 - 10:31

    marchiii
    avatar
    Keylha
    FémininAge : 17Messages : 82

    le Mer 13 Aoû 2014 - 10:55

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



    avatar
    KimmyKinder
    FémininAge : 15Messages : 179

    le Sam 16 Aoû 2014 - 23:15

    Merci beaucoup
    avatar
    Percylove
    FémininAge : 22Messages : 254

    le Mar 19 Aoû 2014 - 2:43

    Merci, je vais tester!



    avatar
    Shymi
    FémininAge : 19Messages : 64

    le Dim 24 Aoû 2014 - 15:34

    Merci:!
    avatar
    Lucasvlp
    MasculinAge : 19Messages : 80

    le Mer 27 Aoû 2014 - 4:29

    merci



    avatar
    Pokebip
    MasculinAge : 19Messages : 69

    le Sam 6 Sep 2014 - 19:46

    merci!
    avatar
    ColorTime'Less
    FémininAge : 20Messages : 96

    le Dim 7 Sep 2014 - 14:46

    Sympa merci !
    avatar
    G U E R L A I N
    FémininAge : 26Messages : 154

    le Dim 7 Sep 2014 - 19:59

    utile! merci



    avatar
    Storminder
    MasculinAge : 21Messages : 56

    le Dim 9 Nov 2014 - 20:49

    Merci ! Very Happy
    avatar
    Okalem
    FémininAge : 17Messages : 63

    le Jeu 8 Jan 2015 - 23:23

    merci !
    avatar
    Chanira
    FémininAge : 19Messages : 18

    le Dim 25 Jan 2015 - 16:52

    Superbe, merci !
    avatar
    catinaphone
    FémininAge : 25Messages : 93

    le 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 ... ><
    avatar
    Bunny Lune
    FémininAge : 27Messages : 135

    le Mar 17 Fév 2015 - 11:29

    Merci beaucoup pour le partage
    avatar
    Psychotic Bitch
    FémininAge : 31Messages : 38

    le Mar 17 Fév 2015 - 19:13

    merci c'est très utile je trouve :)
    avatar
    Rosedesvents
    FémininAge : 30Messages : 90

    le Ven 13 Mar 2015 - 20:11

    Merci :)
    avatar
    ~Nodoka~
    FémininAge : 20Messages : 182

    le Ven 20 Mar 2015 - 14:49

    merci
    avatar
    Celuna
    FémininAge : 26Messages : 123

    le Sam 21 Mar 2015 - 8:50

    Merci
    avatar
    Chocolakato
    FémininAge : 27Messages : 781

    le Mer 20 Mai 2015 - 19:32

    Merci beaucoup :)



    avatar
    Lilynufare
    FémininAge : 25Messages : 318

    le Ven 22 Mai 2015 - 0:12

    merci
    avatar
    darkhero246
    MasculinAge : 24Messages : 177

    le Lun 8 Juin 2015 - 23:11

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Lun 24 Juil 2017 - 16:41