Création de menus CSS en ligne

[Invité]

Bienvenue, Invité. Veuillez vous connecter ou vous inscrire.

Connexion avec identifiant et mot de passe

[Skud29]

Salut,

Pour les personnes qui sont intéressées, j'ai découvert un site pour créer des menus en CSS:

IzzyMenu

Pas mal de style sont disponible. Un seul petit bémol, les sous menus fonctionnent en JavaScript. Pour le fonctionnement, il faut ajouter le code ci-dessous dans "Includes/my_header.php"

Code:

echo "<script src=\"LE CHEMIN DU FICHIER JS\" type=\"text/javascript\"></script>\n";

Vous pouvez voir un exemple sur mon site : GTR Evolution France

[geori]

super 

pour les novices sais tu nous faire une petite marche à suivre étape par étape (par ex un menu avec dropline comme sur ton site), ce serait sympa

Merci à toi

PS: ton site est super 

[Skud29]

Salut Geori, merci pour les compliments 

Je me lance dans un petit tutoriel alors.

On va commencer par créer un menu sur IzzyMenu avec des sous menus

** Pour ajouter des sous menu il faut être enregistré, c'est du rapide **

Dans l’interface IzzyMenu, Rendez-vous dans “Menu Structure”

    * Etape 1 : Cliquez sur le “+” vert
    * Etape 2 : Cliquez sur le nouveau menu
    * Etape 3 : Déplacez ce menu sur le menu “pere” desiré
    * Etape 4 : Lâchez tout !

*Image en pièce jointe*

Une fois votre menu terminé, cliquez sur "sav" puis sur "download" en bas de votre menu (Icône bleu)

Maintenant on va ajouter notre beau menu sur PragmaMx:

Je vais prendre pour exemple le thème "mx-mysticjade" disponible dans les téléchargements.

Commencer par décompresser l'archive télécharger via IzzyMenu, celui-ci contient votre menu ( IzzyMenu.html, le fichier javascript, le dossier d'images)

** Copier les images du dossiers "images" du menu, dans celui du thème **

Ouvrez "IzzyMenu.html" puis le "theme.html" du template "mx-mysticjade"

On va déjà ajouter le CSS du menu dans le "layout.css" du thème (Le CSS du menu est incorporé dans le "IzzyMenu.html")

Pour cela, copiez le CSS du menu et collez le à la suite dans "layout.css". Il y a juste quelques modifications à faire une fois le code CSS collé dans "layout.css"

Recherchez les liens vers les images. Ex:

Code:

background:#FFF url(images/bmid_101.gif);

Et remplacez par:

Code:

background:#FFF url(../images/bmid_101.gif);

Voila pour le CSS, maintenant, on va s'occuper du code HTML:

Voici le code du menu d'origine du thème:

Code:

      <div id="toolbar">
        <div id="nav">
          <ul>
            <li>{MENUITEM_1}
            </li>
            <li>{MENUITEM_2}
            </li>
            <li>{MENUITEM_3}
            </li>
            <li>{MENUITEM_4}
            </li>
          </ul>
        </div>
      </div>

Remplacez par le code du ficher "IzzyMenu.html":

Code:

<div id="MainMenu">
<div id="tab">
<ul>
<li class="item_active"><a href="./"><span>Accueil</span></a></li>
<li><a href="subpage.html" onMouseover="cssdropdown.dropit(this,event,'dropmenu_54056')"><span>News</span></a></li>
<li><a href="subpage.html"><span>Forum</span></a></li>
..... LE RESTE DU CODE....

Le menu est maintenant ajouté au thème. Pour le fonctionnement des sous menus, il faut ajouter le code ci-dessous dans "Includes/my_header.php"

Code:

echo "<script src=\"LE CHEMIN DU FICHIER JS\" type=\"text/javascript\"></script>\n";

*** Une meilleure solution pour le javascript a été donnée par Diabolo, merci à lui ( Voir la réponse) ***

Voila !  N'oubliez pas de vider le cache du thème une fois celui-ci sur votre FTP.

[Diabolo]

Slt,
Je fais une petite appartées concernant le fichier javascript.
au lieu de le mettre le code dans my_header.php et mettre le js dans le système on peut mettre tout ça dans le répertoire du thème en lui même.

On créé un répertoire /js/ dans votre thème et contenant votre fichier.js

Ensuite dans theme.html au début du code entre les commentaires more header on rajoute

Code:

<!-- START more_header -->
    <script type="text/javascript" src="js/fichier.js"></script>
<!-- END more_header -->

(remplacer fichier.js par le nom de votre fichier)

Et dans le fichier function.php de votre thème il faut décommenter (enlever les deux // au début) la ligne de code suivante:

Code:

// $part[] = array('"js/', '"' . MX_THEME_DIR . '/js/');

ce qui donne

Code:

$part[] = array('"js/', '"' . MX_THEME_DIR . '/js/');

C'est pour retrouver le bon chemin du fichier .js


C'est plus clair comme cela ça permet de ne pas avoir de js externes (du thème) qui trainent dans le système et on touche pas à my_header car c'est inhérent au thème.

Dans tous les cas les deux solutions sont correctes   et bravo pour cet tutorial  

[Skud29]

Merci Diabolo, clair, c'est mieux comme ça !

[Diabolo]

Oui en fait la finalité est la même mais la structure est plus lisible: Chaque chose à sa place

En résumé, pour rajouter du code dans le header de votre site:

- Soit en php dans /include/my_header.php  (Cest un fichier qui n'est pas modifié lors des mises à jour)
- Soit entre les commentaires header du thème (Méthode conseillée car c'est inhérent au template)

Ensuite avec 0.1.11 au sein d'un module on peut désormais également faire un appel spécifique, exemple avec le fichier function.php et le theme par défaut dans la fonction themeindex:

Code:

pmxHeader::add_style('themes/' . basename(dirname(__FILE__)) . '/style/news.css');

Ainsi lorsqu'on affiche le module news en accueil on appel le css add-hoc et seulement sur ce module 

[geori]

 

un grand merci

[Diabolo]

Slt,
J'étais en train de pense à améliorer l'intégration du menu avec par exemple mettre les fichiers de configuration du menu dans le fichier setting.php du thème, je regarde ça 

[Diabolo]

Dans ma méthode j'ai oublié de préciser pour mettre le fichier js dans le thème

dans le fichier function.php de votre thème il faut décommenter (enlever les deux // au début) la ligne de code suivante:

Code:

// $part[] = array('"js/', '"' . MX_THEME_DIR . '/js/');

ce qui donne

Code:

$part[] = array('"js/', '"' . MX_THEME_DIR . '/js/');

C'est pour retrouver le bon chemin du fichier .js

C'est corrigé

@skud ça fonctionnait même sans cette modif ?

[petitjo86]

Bonjour,

Je trouve ce style de menu, superbe, mais je n'arrive pas a creer un sous menu, je suis bien enregistrer, mais quand je prends l'intitulé "Subpage name.html" et que je le fais glisser sur la page superieur, bien il ne se met pas en sous menu, il reste tel quel 

Ais je loupé un truc?

Merci de votre aide.

@+ Petit jo

[petitjo86]

Re,

J'ai réussi à creer mes sous menu, désolé pour le dérangement 

@+ Petit Jo

[petitjo86]

Salut,

J'aurais une petite question concernant les liens dans le sous menu, de quel forme doivent il être, car lorsque je télécharge le fichier, les liens ne sont pas fonctionnel et sous cette forme

Code:

<div id="dropmenu_653241" class="dropmenudiv">
<ul>
<li><a href="#"><span>Fiche d'identité</span></a></li>
<li><a href="#"><span>Mot du Président</span></a></li>
<li><a href="#"><span>Organigramme</span></a></li>
<li><a href="#"><span>Histoire</span></a></li>
<li><a href="#"><span>Palmares</span></a></li>
</ul>
</div>

Je pense qu'a la place du "#" il faut avoir le lien qui pointe vers sa page, mais sous quel forme 

Merci,

@+ Petit Jo

[Skud29]

Slt PetitJo,

Pour les liens interne ex:

Code:

<div id="dropmenu_653241" class="dropmenudiv">
<ul>
<li><a href="modules.php?name=Web_Links"><span>Fiche d'identité</span></a></li>
.................
</ul>
</div>

Pour les liens externe c'est l'adresse complète ex:

Code:

<div id="dropmenu_653241" class="dropmenudiv">
<ul>
<li><a href="http://www.pragmamx.fr"><span>Fiche d'identité</span></a></li>
.................
</ul>
</div>

[petitjo86]

Salut Skud29,

Je regarde ça de suite et un grand merci pour la réponse rapide 

@+ Petit Jo