creer un menu avec des images differente suivant la page affichée

[khrystoff]

Re : creer un menu avec des images differente suivant la page affichée

@rajoz : je te remercie pour toute l'aide que tu m'apportes ... c'est tres altruiste de ta part et cela me permet de me remettre petit a petit dans une dynamique ...

[lefabdu51]

Re : creer un menu avec des images differente suivant la page affichée

Bonjour [COLOR=#3E3E3E]lefabdu51,

Merci beaucoup pour ces infos sur l'intégration possible de Bootstrap dans Beez3.

Ce qui me gêne dans Beez3 ce sont les 17 surcharges déjà existantes en particulier celles pour com_content. Dans Protostar il n'y en a aucune ce qui me facilite la vie pour en créer.

C'est ce qui fait la différence entre les deux.
Tu doit modifier de l'existant. Et pour beaucoup de gens, cela s' avères suffisant.
Ils n'ont pas à tout réecrire.

Un autre avantage de Protostar est qu'il est pensé directement pour Bootstrap.

Le nombre de fichiers css du template Beez indique une autre methode d'organisation.
Les noms sont suffisament éloquents.

Il y a beaucoup de points communs.
Notament le gestionnaire de templates.
Au niveau gestion de l'arborescence, les possibilités sont simple et efficace.
Les deux intègrent le même framework, un par défaut , l'autre non.
Les deux intègrent des fichiers less.
Une partie des styles du template Beez sont des fichiers css dérivés du fichier turq.less.

un gros manque dans Beez: un fichier personal.less.

J'utilise l'un ou l'autre suivant les projets. Dans certains cas, Beez est beaucoup plus flexible que Protostar, et vice versa...

[khrystoff]

Re : creer un menu avec des images differente suivant la page affichée

... zut !! un petit bug persiste et je ne comprends pas car tout es onglet sont similaires
les 2 derniers onglet ne sont actif que sur la partie basse du "bouton" alors que tout les autres sont actif sur l'ensemble du pavé de couleur.

une idée ?

[Rajoz]

Re : creer un menu avec des images differente suivant la page affichée

une image ?

[khrystoff]

Re : creer un menu avec des images differente suivant la page affichée

@rajoz cela ressemble ressemble à celle que tu avais publier plus haut
sauf que les 2 derniers onglets ne sont pas actifs partout, juste dans la partie basse
ce que je trouve bizarre puisque il n'y a pas de code particulier pour eux comparés aux autre dans ce tu m'as transmis

[khrystoff]

Re : creer un menu avec des images differente suivant la page affichée

voici 2 images .. la premiere montre le lien actif et la 2em le lien inactif alors que je suis juste un peu plus haut .... il y a juste ce probleme sur les 2 derniers onglets

[Rajoz]

Re : creer un menu avec des images differente suivant la page affichée

Bonjour khrystoff,

Je ne peux pas voir les images. Cela ne marche pas dans le mode "Réponse rapide". Pour qu'elles soient visibles il faut d'abord cliquer sur "Aller en mode avancé".

Amicalement,
Rajoz

[khrystoff]

Re : creer un menu avec des images differente suivant la page affichée

desolé

donc je remet les 2 fichiers par la reponse avancée :






merci de ton aide

[Rajoz]

Re : creer un menu avec des images differente suivant la page affichée

Bonjour khrystoff,

Ouf, c'est plus facile à comprendre avec des images. Cela aurait été quand même encore plus facile avec un lien sur le site qui m'aurait permis directement de voir et d'utiliser des outils comme Firebug. Vivement que ton site soit en ligne.

Le problème vient de la zone réservée pour la taille de police et le recherche. Cette zone est assez haute et empiète sur le menu. La solution que j'ai utilisée c'est de mettre un z-index pour que le menu soit devant cette zone.

Comme je l'avais dit dans un post, pendant le WE j'ai regardé comment adapter ce menu aux petits écrans. Plutôt que de corriger l'ancien CSS je préfère t'envoyer le nouveau CSS qui comporte en amélioration :

• correction du problème du débordement de la zone taille police et recherche
• animation de l'icône lors du survol du lien de menu
• fonctionnement du menu sur des écrans de différentes tailles (responsive)

Dans le zip ci-joint :

• le nouveau fichier custom.css pour remplacer le précédent (si tu l'avais modifié attention à reproduire tes modifications)
• et une icône (icon-background.png) qui sert de fond pour les icônes du menu et qui doit être copiée dans images/icons (si copiée ailleurs il faudra modifier la ligne 28 du CSS)

menu-beez3new.zip

Amicalement,
Rajoz

[pulsarinformatique]

Re : creer un menu avec des images differente suivant la page affichée

Bonjour

J'ai une question un peu similaire
je sais que je peux definir pour des elements de menu une icone mais comment puis-je desactiver dans un module de menu cette fonction?

En effet j'ai plusieurs modules de menu sur un meme menu et je voudrais tantot un affichage texte, tantot un affichage graphique. merci en tous cas

Cyril

[Rajoz]

Re : creer un menu avec des images differente suivant la page affichée

Bonjour Cyril,

Je suppose que les icônes sont ajoutées aux liens de menu dans l'onglet "Type de liens" avec "Image du lien" et Ajouter un titre au menu". Cela permet d'avoir à la fois une icône et le texte du lien.

Pour que les icônes puissent s'afficher dans un module de menu et pas dans un autre. Je pense que le plus simple c'est de créer une classe que l'on peut appeler par exemple noimage.

Dans le module de menu où l'on ne veut pas que les icônes s'affichent, on ajoute dans Paramètres avancés, dans "Suffixe CSS de menu" la classe noimage (avec un espace devant).

Le code html pour ce menu va devenir du genre :

<ul class="nav menu noimage">
    <li class="item-nnn">
        <a href="#" >
             <img src="icone.jpg" alt="Titre" />
              <span class="image-title">Titre</span>
        </a>
    </li>
    ...

Il faut ensuite définir la classe noimage dans le fichier custom.css ou à la fin de template.css (selon le template) :

.nav.menu.noimage img { display: none; visibility: hidden; }

De même, si l'on ne veut que les icônes et pas les textes on peut créer une classe notext à utiliser dans le "Suffixe CSS de menu" du module :

.nav.menu.notext .image-title { display: none; visibility: hidden; }

Ne pas mettre ensemble noimage et notext sinon on n'y voit plus rien du tout

Amicalement,
Rajoz

[pulsarinformatique]

Re : creer un menu avec des images differente suivant la page affichée

MErci

J'ai fait au final un override du module et dans default_component.php j'ai modifié les lignes qui affichaient l'image.
Cyril

[khrystoff]

Re : creer un menu avec des images differente suivant la page affichée

bonjour
je reprends ma discussion ayant du laiser un peu le developpement de ce site pendant qq temps
je n'arrive pas a mettre le menu d'en haut sur toute la largeur de la page meme en bidouillant mes fichier CSS
comment dois je m(y prendre ?
merci
voici le lien pour plus de facilité
http://www.latulipenoire-cetes.fr/new/

[-Tony-]

Re : creer un menu avec des images differente suivant la page affichée

Bonjour
Essaye ca ligne 19 custom.css:

#header ul.menu li a {width: 12%;}

[khrystoff]

Re : creer un menu avec des images differente suivant la page affichée

merci pour ta proposition
mais cela ne reponds pas a ma demande
j'aimerais vrament avoir le menu du haut qui occupe toute la largeur sans espace a gauche ou a droite ?

comment dois je faire ?

merci