• Sur ce site, vous trouverez :
    Camera ! Évidemment...

    ...mais aussi des carousels : WaterwheelCarousel par exemple...

  • ... des informations sur les iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

  • ...un Audio Player dans un Iframe... ...et un autre intégré dans Guppy

  • ...des images qui changent au survol de la souris... ...par exemple :

    ...mais bien d'autres effets à découvrir, notamment celui que vous êtes en train d'utiliser...

  • ...et bien sûr des skins pour habiller vos sites GuppY V5...la série "Transparences" avec ici FeatureCarousel

  • Camera

    Camera

    ¤ Camera est un slider développé par Manuel Masia. On peut l'utiliser très facilement dans GuppY.

    Dans ses différentes options possibles, on peut faire varier les transitions, les apparitions de titres, les vignettes de pagination. Camera peut même intégrer des vidéos !

    Sur ce site quelques tutoriels pour mieux maitriser Camera.

    Informations Camera

    ¤ Deux carousels de Brian Osborne sont disponibles lisez les tutoriels dédiés : WaterwheelCarousel et FeatureCarousel.

  • iFrames

    iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

  • Audio-Players

    Audio-Players

    ¤ Un Audio-player à mettre en place dans un iFrame. Il affiche les pochettes d'album des morceaux qui sont joués. Léger et "customisable", quelques skins en téléchargement lui sont destinées. Il peut être amélioré ! Adeptes du Javascript... à vos claviers ! wink

    Lisez le tutoriel

    ¤ Un deuxième Audio-player simple avec playlist également peut être intégré directement dans GuppY.

    Lisez le tutoriel

  • Effets au survol

    Effets au survol

    Des astuces amusantes, surtout en CSS, pour agrémenter les sites.

    Au survol de la souris : des images qui changent, qui pivotent et font apparaitre un nouveau contenu, les boutons déroulants offrant de nouvelles informations, une boîte-menu déroulante (celle-là même que vous utilisez)... et d'autres, à venir, sans doute.

    La possibilité aussi de personnaliser des infobulles dans une image mappée cliquable générée par Gimp (traitement d'image libre et gratuit). Lisez le tutoriel

    Des liens vers des tutoriels sont disponibles dans le menu "Astuces>Changements au survol"

  • Skins

    Skins pour GuppY V5

    Quelques skins sont disponibles en téléchargement pour habiller les sites GuppY. Elles sont toutes compatibles "Config Look" et adaptées à la dernière version (GuppY 5.01.07 et +). Elles peuvent être testées sur Démo-skins.

    Démo-skins

    Zone de téléchargement

    FAQ (voir pour les skins version 5.02.00)

 
Vous êtes ici :   Accueil » Un menu latéral fixe personnalisable
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Recherche
 
Fermer
Calendrier
Astuces

imasso.gif

rss Cet article est disponible en format standard RSS pour publication sur votre site web :
http://www.71site.fr/data/fr-articles.xml

Une astuce pour concevoir un menu latéral fixé (donc toujours visible), à droite ou à gauche, personnalisable dans une boite libre de GuppY.


C'est le type de menu qui est visible sur la droite de ce site. Sur celui-ci, les liens reprennent ceux du menu de navigation pour montrer le fonctionnement. Mais chacun peut mettre les liens souhaités.

Ci-dessous dans l'article, deux exemples qui sont détaillés. Ils ne sont pas fixés évidemment, mais il est très facile de reprendre le code source, de le placer dans une boite libre et de le fixer.

Cette recherche est dûe à une question de Han wink... Auquel j'essaie de répondre toujours avec le plus d'efficacité possible.

Han me donnait comme exemple le menu de ce site : http://www.cordon.fr/. Je me suis très largement inspiré de celui-ci même si ce type de menu se trouve assez souvent présent sur des sites et qu'il est difficile d'en créditer un auteur en particulier.

Pour ce premier menu (aligné à droite), vous trouverez au dessous la partie <style> </style> à copier-coller dans votre boite libre (ou éventuellement, sans les balises dans votre (ou vos) fichier(s) styleplus.css), cette partie est commentée le plus possible. Les classes sont nommées .menu-lat1 pour les différencier du second menu

Puis une partie qui contient les appels aux icônes, les liens... à copier-coller dans votre boite libre. Les icônes sur ce site sont situées dans un dossier img/NavLat/ mais, à vous d'adapter ces liens à votre configuration, bien sûr...

<style type="text/css">
.menu-lat1{ /* mettre une valeur élevée pour que le menu soit superposé au reste */
    z-index:5000;
}
.menu-lat1 .contenu_global { /* attribut du contenu */
    position:relative; /* mettre
fixed pour fixer ce menu */
    top:0px; /* position en hauteur */
    right:150px; /* position à droite, mettre
0px pour fixer sur le bord droit */
}
.menu-lat1 a { /* attribut du lien */
    transition-duration: 0.6s; /* durée de l'animation */
    padding:3px 5px; /* marges intérieures */
    height:22px; /* hauteur */
    line-height:22px; /* hauteur de ligne */
    width:32px; /* largeur */
    float:right; /* placé à droite */
    font-size:13px; /* taille de caractères */
    margin-bottom:5px; /* marge extérieure basse */
    position:relative;
    border-bottom: 2px solid rgba(0,0,0,0.5); /* bordure basse : épaisseur - nature - couleur */
}
.menu-lat1 a:before { /* attribut du lien pour l'angle */
    content: ''; /* important dans ce cas, ne pas ôter */
    border-left: 15px solid transparent; /* permet l'angle */
    position: absolute;
    top: 0; left:-15px; /* permet l'angle : même valeur que ci-dessus */
}
.menu-lat1 a {
    display:block;
 }
.menu-lat1 img { /* attribut de l'image */
    position:absolute;
    right:4px; /* position à droite */
    top:3px; /* position en hauteur */
}
.menu-lat1 span { /* attribut du texte */
    color:#FFFFFF; /* couleur */
    position:absolute;
    right:-140px; /* position à droite au repos */
    top:2px; /* position en hauteur */
}
.menu-lat1 a:hover { /* attribut du lien survolé */
    width:100px; /*largeur*/
}
.menu-lat1 a:hover span { /* attribut du lien (texte) survolé */
    color:#000000; /* couleur */
    right:42px; /* position à droite */
    transition-duration: 0.6s; /* durée de l'animation */
}
/* couleur de chaque item */
.menu-lat1 .item:nth-child(1) a{ background:#CFAEFB; }
.menu-lat1 .item:nth-child(2) a{ background:#9C65E0; }
.menu-lat1 .item:nth-child(3) a{ background:#4FA7FF; }
.menu-lat1 .item:nth-child(4) a{ background:#84FF84; }
.menu-lat1 .item:nth-child(5) a{ background:#FFFF6F; }
.menu-lat1 .item:nth-child(6) a{ background:#FFCB8A; }
.menu-lat1 .item:nth-child(7) a{ background:#FE978B; }
/* permet l'angle, même couleur que ci-dessus */
.menu-lat1 .item:nth-child(1) a:before{ border-top:28px solid #CFAEFB; }
.menu-lat1 .item:nth-child(2) a:before{ border-top:28px solid #9C65E0; }
.menu-lat1 .item:nth-child(3) a:before{ border-top:28px solid #4FA7FF; }
.menu-lat1 .item:nth-child(4) a:before{ border-top:28px solid #84FF84; }
.menu-lat1 .item:nth-child(5) a:before{ border-top:28px solid #FFFF6F; }
.menu-lat1 .item:nth-child(6) a:before{ border-top:28px solid #FFCB8A; }
.menu-lat1 .item:nth-child(7) a:before{ border-top:28px solid #FE978B; }
</style>


<div class="menu-lat1">
    <div class="contenu_global">
        <div class="item" style="clear:both;">
            <a href="
index.php" title="Lien n°1">
            <img alt="
Lien n°1" src="img/NavLat/icone1.png" title="Lien n°1" />
            <span>
Lien n°1</span></a>
        </div>

        <div class="item" style="clear:both;">
            <a href="
index.php" title="Lien n°2">
            <img alt="
Lien n°2" src="img/NavLat/icone2.png" title="Lien n°2" />
            <span>
Lien n°2</span></a>
        </div>

        <div class="item" style="clear:both;">
            <a href="
index.php" title="Lien n°3">
            <img alt="
Lien n°3" src="img/NavLat/icone3.png" title="Lien n°3" />
            <span>
Lien n°3</span></a>
        </div>

        <div class="item" style="clear:both;">
            <a href="
index.php" title="Lien n°4">
            <img alt="
Lien n°4" src="img/NavLat/icone4.png" title="Lien n°4" />
            <span>
Lien n°4</span></a>
        </div>

        <div class="item" style="clear:both;">
            <a href="
index.php" title="Lien n°5">
            <img alt="
Lien n°5" src="img/NavLat/icone5.png" title="Lien n°5" />
            <span>
Lien n°5</span></a>
        </div>

        <div class="item" style="clear:both;">
            <a href="
index.php" title="Lien n°6">
            <img alt="
Lien n°6" src="img/NavLat/icone6.png" title="Lien n°6" />
            <span>
Lien n°6</span></a>
        </div>

        <div class="item" style="clear:both;">
            <a href="
index.php" title="Lien n°7">
            <img alt="
Lien n°7" src="img/NavLat/icone7.png" title="Lien n°7" />
            <span>
Lien n°7</span></a>
        </div>
    </div>
</div>

Pour ce deuxième menu (aligné à gauche), le code est similaire, en plus simple puisqu'il n'y a pas d'angle à fabriquer. Notez cependant que les classes sont nommées ici .menu-lat2.

<style type="text/css">
.menu-lat2 { /* mettre une valeur élevée pour que le menu soit superposé au reste */
    z-index:5000;
}
.menu-lat2 .contenu_global { /* attribut du contenu */
    position:relative; /* mettre
fixed pour fixer ce menu */
    top:0px; /* position en hauteur */
    left:150px; /* position à gauche, mettre
0px pour fixer sur le bord gauche */
}
.menu-lat2 a { /* attribut du lien */
    transition-duration: 0.6s; /* durée de l'animation */
    padding:3px 5px; /* marges intérieures */
    height:22px; /* hauteur */
    line-height:22px; /* hauteur de ligne */
    width:32px; /* largeur */
    float:left; /* placé à gauche */
    font-size:13px; /* taille de caractères */
    margin-bottom:5px; /* marge extérieure basse */
    position:relative;
    border-bottom: 2px solid rgba(64,0,0,0.5); /* bordure basse : épaisseur - nature - couleur */
    border-right: 2px solid rgba(64,0,0,0.3); /* bordure droite : épaisseur - nature - couleur */
    border-radius:0px 4px 12px 0px; /* arrondis : ici en haut et en bas à droite */
}
.menu-lat2 a {
    display:block;
 }
.menu-lat2 img { /* attribut de l'image */
    position:absolute;
    left:4px; /* position à gauche */
    top:3px; /* position en hauteur */
}
.menu-lat2 span { /* attribut du texte */
    position:absolute;
    color:#FFFFFF; /* couleur */
    left:-140px; /* position à gauche au repos */
    top:2px; /* position en haut */
}
.menu-lat2 a:hover { /* attribut du lien survolé */
    width:110px; /*largeur*/
}
.menu-lat2 a:hover span { /* attribut du lien (texte) survolé */
    color:#FFFFFF; /* couleur */
    left:42px; /* position à gauche */
    transition-duration: 0.6s; /* durée de l'animation */
}
/* couleur de chaque item */
.menu-lat2 .item:nth-child(1) a{ background:#323232; }
.menu-lat2 .item:nth-child(2) a{ background:#4B4B4B; }
.menu-lat2 .item:nth-child(3) a{ background:#646464; }
.menu-lat2 .item:nth-child(4) a{ background:#7D7D7D; }
</style>


<div class="menu-lat2">
    <div class="contenu_global">
        <div class="item" style="clear:both;">
            <a href="
index.php" title="Lien n°8">
            <img alt="
Lien n°8" src="img/NavLat/icone8.png" title="Lien n°8" />
            <span>
Lien n°8</span></a>
        </div>

        <div class="item" style="clear:both;">
            <a href="
index.php" title="Lien n°9">
            <img alt="
Lien n°9" src="img/NavLat/icone9.png" title="Lien n°9" />
            <span>
Lien n°9</span></a>
        </div>

        <div class="item" style="clear:both;">
            <a href="
index.php" title="Lien n°10">
            <img alt="
Lien n°10" src="img/NavLat/icone10.png" title="Lien n°10" />
            <span>
Lien n°10</span></a>
        </div>

        <div class="item" style="clear:both;">
            <a href="
index.php" title="Lien n°11">
            <img alt="
Lien n°11" src="img/NavLat/icone11.png" title="Lien n°11" />
            <span>
Lien n°11</span></a>
        </div>       
    </div>
</div>

Il est bien sûr possible de personnaliser encore plus chaque item dans les règles :
.menu-latX .item:nth-child(Y) a { ... }

Pour installer proprement ce menu fixe sur un côté de votre site, il faut ne pas faire apparaitre le titre de la boite libre, pour cela faites-le précéder du symbole §

§MenuNavLat par exemple...

et dans votre (ou vos) fichier(s) styleplus.css placez (en remplaçant FB123 par votre n° de boite libre) au moins cela :

.tblbox.FB123  {  /* Corps boite MenuNavLat */
    background: transparent;   
}

Puis déclarez simplement en admin>Config boites, votre nouvelle boite libre sur une ligne du TopBoxes (boites du haut), avec un pourcentage d'occupation non nul (de 10% par exemple mais 1% suffit, ce qui laisse 99% pour les deux emplacements du reste de la ligne).

Ci-dessous, le code complet de la boite libre du menu latéral présente sur ce site pour information...

<style type="text/css">
.menu-lat{
    z-index:99999;
}
.menu-lat .contenu_global{
    position:fixed;
    top:135px;
    right:0px;
}
.menu-lat a {
    transition-duration: 0.6s;
    padding:3px 5px;
    height:22px;
    line-height:22px;
    width:32px;
    float:right;
    font-size:13px;
    margin-bottom:5px;
    position:relative;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-bottom: 2px solid rgba(0,0,0,0.5);
    border-left: 2px solid rgba(0,0,0,0.3);
    border-radius:8px 0px 0px 8px;
    box-shadow:0px 3px 10px rgba(0,0,0,0.7);
}
.menu-lat a {
    display:block;  
 }
.menu-lat img {
    position:absolute;
    right:4px;
    top:3px;
}
.menu-lat span {
    position:absolute;
    color:#FFFFFF;
    font-weight:bold;
    right:-140px;
    top:2px;
}
.menu-lat a:hover {
    width:165px;
}
.menu-lat a:hover span {
    color:#FFFFFF;
    font-weight:bold;
    right:45px;
    transition-duration: 0.6s;
}
.menu-lat .item:nth-child(1) a{ background:#1E2E2F; }
.menu-lat .item:nth-child(2) a{ background:#273E3F; }
.menu-lat .item:nth-child(3) a{ background:#304D4E; }
.menu-lat .item:nth-child(4) a{ background:#325152; }
.menu-lat .item:nth-child(5) a{ background:#375A5B; }
.menu-lat .item:nth-child(6) a{ background:#3C6162; }
.menu-lat .item:nth-child(7) a{ background:#446D6F; }
.menu-lat .item:nth-child(8) a{ background:#4B787A; }
.menu-lat .item:nth-child(9) a{ background:#508183; }
.menu-lat .item:nth-child(10) a{ background:#578B8E; }
</style>


<div class="menu-lat">
    <div class="contenu_global">
        <div class="item" style="clear:both;">
            <a href="index.php" title="Accueil">
            <img alt="Accueil" src="img/NavLat/accueil.png" title="Accueil" />
            <span>Accueil</span></a>
        </div>

        <div class="item" style="clear:both;">
            <a href="http://demoskins.71site.fr/index.php" target="_blank" title="Démo-skins">
            <img alt="Démo-skins" src="img/NavLat/demoskins.png" title="Démo-skins" />
            <span>Démo-skins</span></a>
        </div>

        <div class="item" style="clear:both;">
            <a href="faq.php" title="FAQ">
            <img alt="FAQ" src="img/NavLat/faq.png" title="FAQ" />
            <span>FAQ</span></a>
        </div>

        <div class="item" style="clear:both;">
            <a href="frtpc71.php" title="Forum">
            <img alt="Forum" src="img/NavLat/forum.png" title="Forum" />
            <span>Forum</span></a>
        </div>

        <div class="item" style="clear:both;">
            <a href="links.php" title="Liens">
            <img alt="Liens" src="img/NavLat/liens.png" title="Liens" />
            <span>Liens</span></a>
        </div>

        <div class="item" style="clear:both;">
            <a href="gstbk71.php" title="Livre d'or">
            <img alt="Livre d'or" src="img/NavLat/livredor.png" title="Livre d'or" />
            <span>Livre d'or</span></a>
        </div>

        <div class="item" style="clear:both;">
            <a href="nws71.php" title="Nouvelles">
            <img alt="Nouvelles" src="img/NavLat/nouvelles.png" title="Nouvelles" />
            <span>Nouvelles</span></a>
        </div>

        <div class="item" style="clear:both;">
            <a href="photorama.php" title="Photos">
            <img alt="Photos" src="img/NavLat/photos.png" title="Photos" />
            <span>Photos</span></a>
        </div>

        <div class="item" style="clear:both;">
            <a href="plugins/Sommaire/Sommaire.php" title="Sommaire">
            <img alt="Sommaire" src="img/NavLat/sommaire.png" title="Sommaire" />
            <span>Sommaire</span></a>
        </div>

        <div class="item" style="clear:both;">
            <a href="dwnld71.php" title="Téléchargements">
            <img alt="Téléchargements" src="img/NavLat/telechargements.png" title="Téléchargements" />
            <span>Téléchargements</span></a>
        </div>
    </div>
</div>

NB : Jean-Pierre ( jpleg ) qui me fait le plaisir d'utiliser aussi cette astuce a trouvé un moyen qu'un de ces liens simule le rôle du bouton "Retour" du navigateur. Merci à lui.
Le code utilise du javascript, aussi ne doit-il pas être désactivé. Voir ici :

thrd71.php?lng=fr&pg=387&cat=4#R4

En ayant "fabriqué" l'icône nécessaire, voilà le type de code que l'on pourrait ajouter :

<div class="item" style="clear:both;">
<a href="
javascript:history.go(-1)" title="Retour">
<img alt="
Retour.png" src="img/Mes_Icones/Retour.png" title="Retour" />
<span>
Retour</span></a>
</div>

Pour toute aide afin d'utiliser ce dispositif, vous pouvez poster sur le forum de ce site.


Date de création : 02/03/2017 @ 18:02
Catégorie : Astuces - Changements au survol
Page lue 816 fois


Réactions à cet article

Personne n'a encore laissé de commentaire.
Soyez donc le premier !

Vous êtes ici :   Accueil » Un menu latéral fixe personnalisable
Préférences

Se reconnecter :
Votre nom (ou pseudo) :
Votre mot de passe


  Nombre de membres 35 membres
Connectés :
( personne )
Snif !!!
Lettre d'information
Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.
PpkW
Recopier le code :
11 Abonnés