• 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 haut...rizontal 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

Un menu horizontal dont les icônes se déploient lors du survol de la souris
pour faire apparaitre un titre.

C'est le procédé qui est visible un peu plus haut sur ce site. Sur celui-ci, les contenus reprennent les liens du menu de navigation et du menu latéral fixe avec les mêmes icônes. C'est uniquement pour en montrer le fonctionnement.

Un menu haut...rizontal... Ce mauvais jeu de mot pour rappeler, l'origine de ce procédé, utilisé sous le nom de menuhaut, par jac83 sur son site. Ce type de procédé peut sans doute être rencontré sous des formes similaires ailleurs...

J'ai trouvé le procédé amusant, simple à mettre en place, et j'ai apporté quelques très simples variations (individualisations possibles des largeurs variables et des fonds).

Ci-dessous un exemple, dont le code est détaillé et commenté le plus possible, avec une première partie <style> </style> à mettre au début de l'article ou de la boite libre ou bien sans les balises <style type="text/css"> et </style> dans votre fichier styleplus.css. Et une seconde partie, détaillant le contenu et les liens du menu, à placer où vous le souhaitez dans l'article ou la boite libre.

<style type="text/css">
.conteneur-menu-horizontal { /* attributs du conteneur */
position:relative; /* mettre éventuellement
fixed pour fixer ce menu et le doter d'une position dans la page :
par exemple ci-dessous
top:20px;
left:20px;
*/
height:26px; /* hauteur */
margin:15px 0 0 15px; /* marges extérieures */
}

.menu-horizontal { /* attributs d'un item du menu */
text-align:center;
margin-right:8px; /* marge extérieure droite */
padding:2px; /* marges intérieures */
float:left;
/*background:#XXXXXX;*/ /* pour fixer un background pour tous en remplacement de la série d'individualisation */
position:relative;
width:40px; /* largeur */
height:22px; /* hauteur */
border:2px solid #b4b4b4; /* bordure : épaisseur nature couleur */
border-radius:10px; /* arrondis */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;       
transition: all 1s ease; /* transition : temps et nature */
}

/* série d'individualisation des backgrounds -à supprimer éventuellement- */
.menu-horizontal:nth-child(1) {background:#CFAEFB;}
.menu-horizontal:nth-child(2) {background:#9C65E0;}
.menu-horizontal:nth-child(3) {background:#4FA7FF;}
.menu-horizontal:nth-child(4) {background:#84FF84;}
.menu-horizontal:nth-child(5) {background:#FFFF6F;}
.menu-horizontal:nth-child(6) {background:#FFCB8A;}
.menu-horizontal:nth-child(7) {background:#FE978B;}

.menu-horizontal:hover .menu-horizontal-titre { /* item menu et titre visibles lorsque item survolé */
opacity:1; /* 1 : donc visible */
transform:scale(1); /* échelle 1 : donc visible */
}

.menu-horizontal:hover { /* attributs item menu survolé */
text-align:right;
/*width:XXXpx;*/ /* pour fixer une largeur pour tous en remplacement de la série d'individualisation */
/*background:#XXXXXX;*/ /* pour fixer un background pour tous */
box-shadow:-1px 1px 1px #1b1b1b; /* ombre portée -peut être supprimée- */
}

/* série d'individualisation des largeurs des items menus survolés -à supprimer éventuellement */
.menu-horizontal:nth-child(1):hover {width:170px;}
.menu-horizontal:nth-child(2):hover {width:145px;}
.menu-horizontal:nth-child(3):hover {width:140px;}
.menu-horizontal:nth-child(4):hover {width:110px;}
.menu-horizontal:nth-child(5):hover {width:100px;}
.menu-horizontal:nth-child(6):hover {width:70px;}
.menu-horizontal:nth-child(7):hover {width:100px;}
 
.menu-horizontal-titre { /* attributs titres */
margin-left:5px; /* marge extérieure gauche */
width:170px; /* largeur du titre non survolé (au moins la largeur maximum des individualisations */
position: absolute;
bottom:0px; /* position basse */
text-align: left;
vertical-align:middle; /* alignement vertical au milieu */
line-height:26px; /* hauteur */
opacity:0; /* 0 : donc non visible */
transform:scale(0); /* échelle 0 : donc non visible */
transform-origin:30px 50%; /* origine de la transformation : ici à 30px à droite, 50% de la hauteur */
-webkit-transition: all 1.1s ease;
-moz-transition: all 1.1s ease;
-ms-transition: all 1.1s ease;       
transition: all 1.1s ease; /* transition : temps et nature */
}
.menu-horizontal-titre a, .menu-horizontal-titre a:hover { /* attributs des liens et liens survolés */
text-decoration:none;
font-weight:bold; /* en gras */
color: #000000; /* couleur */
}
</style>


<div class="conteneur-menu-horizontal">
    <div class="menu-horizontal" title="
Courriers & emails"><a href="index.php"><img src="img/NavLat/icone1.png" /></a>
        <div class="menu-horizontal-titre"><a href="
index.php">Courriers et e-mails</a></div>
    </div>

    <div class="menu-horizontal" title="Les statistiques"><a href="index.php"><img src="img/NavLat/icone2.png" /></a>
        <div class="menu-horizontal-titre"><a href="
index.php">Les statistiques</a></div>
    </div>

    <div class="menu-horizontal" title="Les documents"><a href="index.php"><img src="img/NavLat/icone3.png" /></a>
        <div class="menu-horizontal-titre"><a href="
index.php">Les documents</a></div>
    </div>

    <div class="menu-horizontal" title="Les vidéos"><a href="index.php"><img src="img/NavLat/icone4.png" /></a>
        <div class="menu-horizontal-titre"><a href="
index.php">Les vidéos</a></div>
    </div>

    <div class="menu-horizontal" title="Les liens"><a href="index.php"><img src="img/NavLat/icone5.png" /></a>
        <div class="menu-horizontal-titre"><a href="
index.php">Les liens</a></div>
    </div>

    <div class="menu-horizontal" title="GPS"><a href="index.php"><img src="img/NavLat/icone6.png" /></a>
        <div class="menu-horizontal-titre"><a href="
index.php">GPS</a></div>
    </div>

    <div class="menu-horizontal" title="Réglages"><a href="index.php"><img src="img/NavLat/icone7.png" /></a>
        <div class="menu-horizontal-titre"><a href="
index.php">Réglages</a></div>
    </div>
</div>

Mes icônes sont dans le dossier img/NavLat, il faut adapter à votre configuration. Les liens renvoient tous à index.php, là aussi, il faut adapter. title=".............." sert à renseigner l'info-bulles qui apparait au survol (on peut le supprimer, éventuellement).

On peut fixer ce menu, mais la possibilité de le faire dans une boite libre en haut dans l'admin de GuppY est plus simple bien sûr...

Les transitions ci-dessus sont de deux types : opacité et échelle, mais on peut n'utiliser que l'un ou l'autre. Dans le menu équivalent du site, il n'y a que opacité.

----------=====+++++=====----------

Comme d'habitude, pour installer proprement ce menu sur votre site, il faut ne pas faire apparaitre le titre de la boite libre, pour cela faites-le précéder du symbole §

§MenuHorizontal par exemple...

et dans votre fichier styleplus placez (en remplaçant FB888 par votre n° de boite libre) au moins cela :

.tblbox.FB888  {  /* Corps boite MenuHorizontal */
    background: transparent;   
}

Puis déclarez simplement votre nouvelle boite libre sur une ligne du Topboxes (boites du haut) avec le pourcentage d'occupation souhaité (de 75% par exemple)...

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


Date de création : 12/08/2017 @ 10:06
Catégorie : Astuces - Changements au survol
Page lue 252 fois

Vous êtes ici :   Accueil » Un menu haut...rizontal 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.
RHatNW
Recopier le code :
11 Abonnés