Forum CMS Made Simple FR › Général › Modules, Tags v
[RESOLU] Créer menu DropDown*

[RESOLU] Créer menu DropDown*

Sujet fermé 
Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
FlorentCMSMS
Unregistered
 
#1
22/07/2010, 14:55:42
Citation :#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS: 1.6.7
#~ Nom de l'hébergeur : OHV DEDIE PLESK
#~ Informations Système :
#~ ~ ----------------------------------------------
#~ #~ Cms Version: 1.6.7
#~ #~ Installed Modules:
#~ #~ CMSMailer: 1.73.14
#~ #~ FileManager: 1.0.1
#~ #~ MenuManager: 1.6.2
#~ #~ ModuleManager: 1.3.1
#~ #~ News: 2.10.3
#~ #~ nuSOAP: 1.0.1
#~ #~ Printing: 1.0.3
#~ #~ Search: 1.6.1
#~ #~ ThemeManager: 1.1.1
#~ #~ TinyMCE: 2.7.0
#~ #~ Captcha: 0.4.1
#~ #~ CGExtensions: 1.19
#~ #~ Gallery: 1.3
#~ #~ Twitter: 0.0.7
#~ #~ AjaxMadeSimple: 0.1.6
#~ #~ Polls: 0.2.0
#~ #~ SiteMapMadeSimple: 1.2.1
#~ #~ FrontEndUsers: 1.9.3
#~ #~ Config Information:
#~ #~ php_memory_limit:
#~ #~ process_whole_template: false
#~ #~ max_upload_size: 20000000
#~ #~ default_upload_permission: 664
#~ #~ assume_mod_rewrite: true
#~ #~ page_extension: .htm
#~ #~ internal_pretty_urls: false
#~ #~ use_hierarchy: true
#~ #~ Php Information:
#~ #~ phpversion: 5.1.6
#~ #~ md5_function: On (Vrai)
#~ #~ gd_version: 2
#~ #~ tempnam_function: On (Vrai)
#~ #~ magic_quotes_runtime: Off (Faux)
#~ #~ memory_limit: 32M
#~ #~ max_execution_time: 300
#~ #~ safe_mode: Off (Faux)
#~ #~ session_save_path: /var/lib/php/session (0770)
#~ #~ session_use_cookies: On (Vrai)
#~ #~ Server Information:
#~ #~ Server Api: cgi-fcgi
#~ #~ Server Db Type: MySQL (mysql)
#~ #~ Server Db Version: 5.0.45
#~ #~ ----------------------------------------------
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
Bonjour à tous,

J'ouvre un topic dans la continuité de celui ci : http://www.cmsmadesimple.fr/forum/viewtopic.php?id=2736
Je pensais que mon problème était résolu, mais en ajoutant plusieurs sous menus plus rien n'allait ^^.

J'ai donc modifié un peu le code pour obtenir ceci :


Code :
{if $count > 0}
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="</li>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li>" times=$node->prevdepth-$node->depth}
{/if}
{if $node->type == 'sectionheader' and $node->depth == 1}
<li><a href="#">{$node->menutext}</a>
<div class="sub">
{elseif $node->type == 'sectionheader' and $node->depth != 1}
<ul><li><h2><a href="#">{$node->menutext}</a></h2></li>
{else}
<li><a href="{$node->url}">{$node->menutext}</a>
{/if}
{/foreach}
{repeat string="</div>" times=$node->depth-1}
{/if}
Le résultat souhaité approcherait de cela : http://www.sohtanaka.com/web-design/mega...ss-jquery/ (je sais, j'aurais du coder main Confused )

De mon coté un seule différence, ma div ".sub" a une taille et une position bien définie. Cela ressemble à ce que l'on peut voir sur cdiscount, le site de l'OL, le site du PSG par exemple.

Pour ce qui est du code, en version statique le code ressemble à ceci :

Code :
<ul id="topnav">
/* BOUCLE */
        <li>
            <a href="#">Entête lv 1</a> /*présent dans ma barre de menu */
            <div class="sub">
                <ul>
                    <li><h2><a href="#">Entête lv 1.1</a></h2></li> /*une colone dans ma div .sub */
                    <li><a href="#">Navigation Link</a></li> /* lien 1.1.1 */
                    <li><a href="#">Navigation Link</a></li> /* lien 1.1.2 */
                    <li><a href="#">Navigation Link</a></li> /* lien 1.1.3 */
                    <li><a href="#">Navigation Link</a></li> /* lien 1.1.4 */
                    <li><a href="#">Navigation Link</a></li> /* lien 1.1.5 */
                    <li><a href="#">Navigation Link</a></li> /* lien 1.1.6 */
                    <li><a href="#">Navigation Link</a></li> /* etc. etc.*/
                </ul>
                <ul>
                    <li><h2><a href="#">Entête 1.2</a></h2></li>
                    <li><a href="#">Navigation Link</a></li> /* lien 1.2.1 */
                    <li><a href="#">Navigation Link</a></li> /* etc */
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><h2><a href="#">Entête 1.3</a></h2></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>  /*lien 1.3.1*/
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
            </div>
        </li>
        <li>
/* Les autre blocs ne sont qu'une répétition du code au dessus, seul les variables changent */
            <a href="#" >Entête 2</a>
            <div class="sub">
                <ul>
                    <li><h2><a href="#">2.1</a></h2></li>
                    <li><a href="#">2.1.1</a></li>
                    <li><a href="#">2.1.2</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><h2><a href="#">iPad</a></h2></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><h2><a href="#">iPhone</a></h2></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>  
            </div>
        </li>
        <li>
            <a href="#">Saison</a>
                        <div class="sub">
                <ul>
                    <li><h2><a href="#">Desktop</a></h2></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><h2><a href="#">Laptop</a></h2></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><h2><a href="#">Accessories</a></h2></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
            </div>  
        </li>
        <li>
            <a href="#" >Evènements</a>
                        <div class="sub">
                <ul>
                    <li><h2><a href="#">Desktop</a></h2></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><h2><a href="#">Laptop</a></h2></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><h2><a href="#">Accessories</a></h2></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
            </div>
        </li>
    </ul>
Je viens vous demande un petit coup de main, même en ayant passé quelques heures la dessus, je n'arrive pas à résoudre mon problème Confused.

En vous remerciant par avance Smile

Passez une bonne aprem'
FlorentCMSMS
Unregistered
 
#1
22/07/2010, 14:55:42
Citation :#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS: 1.6.7
#~ Nom de l'hébergeur : OHV DEDIE PLESK
#~ Informations Système :
#~ ~ ----------------------------------------------
#~ #~ Cms Version: 1.6.7
#~ #~ Installed Modules:
#~ #~ CMSMailer: 1.73.14
#~ #~ FileManager: 1.0.1
#~ #~ MenuManager: 1.6.2
#~ #~ ModuleManager: 1.3.1
#~ #~ News: 2.10.3
#~ #~ nuSOAP: 1.0.1
#~ #~ Printing: 1.0.3
#~ #~ Search: 1.6.1
#~ #~ ThemeManager: 1.1.1
#~ #~ TinyMCE: 2.7.0
#~ #~ Captcha: 0.4.1
#~ #~ CGExtensions: 1.19
#~ #~ Gallery: 1.3
#~ #~ Twitter: 0.0.7
#~ #~ AjaxMadeSimple: 0.1.6
#~ #~ Polls: 0.2.0
#~ #~ SiteMapMadeSimple: 1.2.1
#~ #~ FrontEndUsers: 1.9.3
#~ #~ Config Information:
#~ #~ php_memory_limit:
#~ #~ process_whole_template: false
#~ #~ max_upload_size: 20000000
#~ #~ default_upload_permission: 664
#~ #~ assume_mod_rewrite: true
#~ #~ page_extension: .htm
#~ #~ internal_pretty_urls: false
#~ #~ use_hierarchy: true
#~ #~ Php Information:
#~ #~ phpversion: 5.1.6
#~ #~ md5_function: On (Vrai)
#~ #~ gd_version: 2
#~ #~ tempnam_function: On (Vrai)
#~ #~ magic_quotes_runtime: Off (Faux)
#~ #~ memory_limit: 32M
#~ #~ max_execution_time: 300
#~ #~ safe_mode: Off (Faux)
#~ #~ session_save_path: /var/lib/php/session (0770)
#~ #~ session_use_cookies: On (Vrai)
#~ #~ Server Information:
#~ #~ Server Api: cgi-fcgi
#~ #~ Server Db Type: MySQL (mysql)
#~ #~ Server Db Version: 5.0.45
#~ #~ ----------------------------------------------
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
Bonjour à tous,

J'ouvre un topic dans la continuité de celui ci : http://www.cmsmadesimple.fr/forum/viewtopic.php?id=2736
Je pensais que mon problème était résolu, mais en ajoutant plusieurs sous menus plus rien n'allait ^^.

J'ai donc modifié un peu le code pour obtenir ceci :


Code :
{if $count > 0}
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="</li>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li>" times=$node->prevdepth-$node->depth}
{/if}
{if $node->type == 'sectionheader' and $node->depth == 1}
<li><a href="#">{$node->menutext}</a>
<div class="sub">
{elseif $node->type == 'sectionheader' and $node->depth != 1}
<ul><li><h2><a href="#">{$node->menutext}</a></h2></li>
{else}
<li><a href="{$node->url}">{$node->menutext}</a>
{/if}
{/foreach}
{repeat string="</div>" times=$node->depth-1}
{/if}
Le résultat souhaité approcherait de cela : http://www.sohtanaka.com/web-design/mega...ss-jquery/ (je sais, j'aurais du coder main Confused )

De mon coté un seule différence, ma div ".sub" a une taille et une position bien définie. Cela ressemble à ce que l'on peut voir sur cdiscount, le site de l'OL, le site du PSG par exemple.

Pour ce qui est du code, en version statique le code ressemble à ceci :

Code :
<ul id="topnav">
/* BOUCLE */
        <li>
            <a href="#">Entête lv 1</a> /*présent dans ma barre de menu */
            <div class="sub">
                <ul>
                    <li><h2><a href="#">Entête lv 1.1</a></h2></li> /*une colone dans ma div .sub */
                    <li><a href="#">Navigation Link</a></li> /* lien 1.1.1 */
                    <li><a href="#">Navigation Link</a></li> /* lien 1.1.2 */
                    <li><a href="#">Navigation Link</a></li> /* lien 1.1.3 */
                    <li><a href="#">Navigation Link</a></li> /* lien 1.1.4 */
                    <li><a href="#">Navigation Link</a></li> /* lien 1.1.5 */
                    <li><a href="#">Navigation Link</a></li> /* lien 1.1.6 */
                    <li><a href="#">Navigation Link</a></li> /* etc. etc.*/
                </ul>
                <ul>
                    <li><h2><a href="#">Entête 1.2</a></h2></li>
                    <li><a href="#">Navigation Link</a></li> /* lien 1.2.1 */
                    <li><a href="#">Navigation Link</a></li> /* etc */
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><h2><a href="#">Entête 1.3</a></h2></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>  /*lien 1.3.1*/
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
            </div>
        </li>
        <li>
/* Les autre blocs ne sont qu'une répétition du code au dessus, seul les variables changent */
            <a href="#" >Entête 2</a>
            <div class="sub">
                <ul>
                    <li><h2><a href="#">2.1</a></h2></li>
                    <li><a href="#">2.1.1</a></li>
                    <li><a href="#">2.1.2</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><h2><a href="#">iPad</a></h2></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><h2><a href="#">iPhone</a></h2></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>  
            </div>
        </li>
        <li>
            <a href="#">Saison</a>
                        <div class="sub">
                <ul>
                    <li><h2><a href="#">Desktop</a></h2></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><h2><a href="#">Laptop</a></h2></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><h2><a href="#">Accessories</a></h2></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
            </div>  
        </li>
        <li>
            <a href="#" >Evènements</a>
                        <div class="sub">
                <ul>
                    <li><h2><a href="#">Desktop</a></h2></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><h2><a href="#">Laptop</a></h2></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                    <li><h2><a href="#">Accessories</a></h2></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
            </div>
        </li>
    </ul>
Je viens vous demande un petit coup de main, même en ayant passé quelques heures la dessus, je n'arrive pas à résoudre mon problème Confused.

En vous remerciant par avance Smile

Passez une bonne aprem'
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#2
22/07/2010, 15:10:26
FlorentCMSMS a écrit :Pour ce qui est du cote, en version statique le code ressemble à ceci.
Donne le code statique exact (avec le current et tous les enfants du current ouverts).
Sinon, je vais aussi y passer des heures Wink.
Tutoriels vidéos cmsms
Site web Trouver
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#2
22/07/2010, 15:10:26
FlorentCMSMS a écrit :Pour ce qui est du cote, en version statique le code ressemble à ceci.
Donne le code statique exact (avec le current et tous les enfants du current ouverts).
Sinon, je vais aussi y passer des heures Wink.
Tutoriels vidéos cmsms
Site web Trouver
FlorentCMSMS
Unregistered
 
#3
22/07/2010, 15:24:00
Voilà j'ai modifié, dis moi si tu veux d'autre éléments.

Pour schématiser : je survole mon entête de section LV 1, la div .sub apparait, à l'interieur, plusieurs colones. Les h2 (entête lv 1.1) sont les titres de colones, et les li a sont les liens ( 1.1.1 )

L'"ul" topnav est à sortir de la boucle.
FlorentCMSMS
Unregistered
 
#3
22/07/2010, 15:24:00
Voilà j'ai modifié, dis moi si tu veux d'autre éléments.

Pour schématiser : je survole mon entête de section LV 1, la div .sub apparait, à l'interieur, plusieurs colones. Les h2 (entête lv 1.1) sont les titres de colones, et les li a sont les liens ( 1.1.1 )

L'"ul" topnav est à sortir de la boucle.
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#4
22/07/2010, 15:43:43
Il n'y a que 2 niveaux ? Et il me semble tellement simpliste par rapport aux sites que tu nous a mis en référence.
Est-ce que c'est celui-ci http://www.sohtanaka.com/web-design/mega...ss-jquery/ ?
ou 1 comme le psg ?
Parce qu'il y a une sacrée différence.
Fais-moi plaisir, va sur ce site, parcours tous les menus et dis-moi lequel tu veux et je te le ferai :
http://www.cssplay.co.uk/menus/index.html
Tutoriels vidéos cmsms
Site web Trouver
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#4
22/07/2010, 15:43:43
Il n'y a que 2 niveaux ? Et il me semble tellement simpliste par rapport aux sites que tu nous a mis en référence.
Est-ce que c'est celui-ci http://www.sohtanaka.com/web-design/mega...ss-jquery/ ?
ou 1 comme le psg ?
Parce qu'il y a une sacrée différence.
Fais-moi plaisir, va sur ce site, parcours tous les menus et dis-moi lequel tu veux et je te le ferai :
http://www.cssplay.co.uk/menus/index.html
Tutoriels vidéos cmsms
Site web Trouver
FlorentCMSMS
Unregistered
 
#5
22/07/2010, 15:51:57
Il y a trois niveau :

-> Entête LV 1 qui apparait dans ma barre de menu
-> Entête lv 1.1 qui apparait dans ma div, qui correspond au titre de ma colone
-> Lien lv 1.1.1

Exemple : [Image: subnav_1.jpg]

Je regarde sur le site que tu m'a proposé si quelque chose approche de ce que je recherche ^
FlorentCMSMS
Unregistered
 
#5
22/07/2010, 15:51:57
Il y a trois niveau :

-> Entête LV 1 qui apparait dans ma barre de menu
-> Entête lv 1.1 qui apparait dans ma div, qui correspond au titre de ma colone
-> Lien lv 1.1.1

Exemple : [Image: subnav_1.jpg]

Je regarde sur le site que tu m'a proposé si quelque chose approche de ce que je recherche ^
FlorentCMSMS
Unregistered
 
#6
22/07/2010, 15:59:01
http://www.cssplay.co.uk/menus/drop_lists.html -> Dans cet esprit, mais visuellement approchant de PSG.Fr ou de OLWEB.fr
FlorentCMSMS
Unregistered
 
#6
22/07/2010, 15:59:01
http://www.cssplay.co.uk/menus/drop_lists.html -> Dans cet esprit, mais visuellement approchant de PSG.Fr ou de OLWEB.fr
jce76350 Hors ligne
Administrateur
*******
Messages : 11,007
Sujets : 230
Inscription : Sep 2007
Réputation : 1
#7
22/07/2010, 16:07:53
re,

>#~ Cms Version: 1.6.7
Il semble que cela ne soit pas une version actuelle
http://www.cmsmadesimple.fr/forum/viewtopic.php?id=2770
Une correction de sécurité de la version 1.6.7
J-C Etiemble v 2.2.xx
Site web Trouver
jce76350 Hors ligne
Administrateur
*******
Messages : 11,007
Sujets : 230
Inscription : Sep 2007
Réputation : 1
#7
22/07/2010, 16:07:53
re,

>#~ Cms Version: 1.6.7
Il semble que cela ne soit pas une version actuelle
http://www.cmsmadesimple.fr/forum/viewtopic.php?id=2770
Une correction de sécurité de la version 1.6.7
J-C Etiemble v 2.2.xx
Site web Trouver
FlorentCMSMS
Unregistered
 
#8
22/07/2010, 16:15:53
Merci, je m'en occupe ^
FlorentCMSMS
Unregistered
 
#8
22/07/2010, 16:15:53
Merci, je m'en occupe ^
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#9
22/07/2010, 16:47:15
Je peux te faire celui du lien (et de la photo) http://www.sohtanaka.com/web-design/mega...ss-jquery/
Tu verras d'ailleurs que j'ai bien fait de me méfier, il faut une classe personnalisée à chaque lien de niveau 1 et il n'y a que deuxniveaux, pas trois. Les entêtes de niveau 1.1 sont de même niveau que les liens qui se trouvent en dessous.
Attention, ce menu est entièrement différent de celui du psg ou de olweb.

Et celui-ci ne te conviendrait pas : http://www.cssplay.co.uk/menus/drop-table.html ?
Tutoriels vidéos cmsms
Site web Trouver
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#9
22/07/2010, 16:47:15
Je peux te faire celui du lien (et de la photo) http://www.sohtanaka.com/web-design/mega...ss-jquery/
Tu verras d'ailleurs que j'ai bien fait de me méfier, il faut une classe personnalisée à chaque lien de niveau 1 et il n'y a que deuxniveaux, pas trois. Les entêtes de niveau 1.1 sont de même niveau que les liens qui se trouvent en dessous.
Attention, ce menu est entièrement différent de celui du psg ou de olweb.

Et celui-ci ne te conviendrait pas : http://www.cssplay.co.uk/menus/drop-table.html ?
Tutoriels vidéos cmsms
Site web Trouver
FlorentCMSMS
Unregistered
 
#10
22/07/2010, 16:56:03
En réalité les classes personnalisées pour le premier niveau sont useless, dans ma version statique je les ai enlevés et ça fonctionne toujours.

En réalité j'ai modifié et le CSS et un peu le jQuery du menu pour qu'il ressemble à celui du psg.

Je veux bien que tu me file un coup de main ^^pour ce menu, et pourquoi pas tester avec celui de cssplay.co.uk en bonus :p
FlorentCMSMS
Unregistered
 
#10
22/07/2010, 16:56:03
En réalité les classes personnalisées pour le premier niveau sont useless, dans ma version statique je les ai enlevés et ça fonctionne toujours.

En réalité j'ai modifié et le CSS et un peu le jQuery du menu pour qu'il ressemble à celui du psg.

Je veux bien que tu me file un coup de main ^^pour ce menu, et pourquoi pas tester avec celui de cssplay.co.uk en bonus :p
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#11
22/07/2010, 18:19:44
FlorentCMSMS a écrit :En réalité les classes personnalisées pour le premier niveau sont useless, dans ma version statique je les ai enlevés et ça fonctionne toujours.

En réalité j'ai modifié et le CSS et un peu le jQuery du menu pour qu'il ressemble à celui du psg.

Je veux bien que tu me file un coup de main ^^pour ce menu, et pourquoi pas tester avec celui de cssplay.co.uk en bonus :p
C'est donc que tu l'as testé en statique !
Tu peux me donner un lien pour le voir en action ?
Celui du cssplay, c'est un gros boulot, si l'autre fonctionne, je préfère m'abstenir...
Tutoriels vidéos cmsms
Site web Trouver
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#11
22/07/2010, 18:19:44
FlorentCMSMS a écrit :En réalité les classes personnalisées pour le premier niveau sont useless, dans ma version statique je les ai enlevés et ça fonctionne toujours.

En réalité j'ai modifié et le CSS et un peu le jQuery du menu pour qu'il ressemble à celui du psg.

Je veux bien que tu me file un coup de main ^^pour ce menu, et pourquoi pas tester avec celui de cssplay.co.uk en bonus :p
C'est donc que tu l'as testé en statique !
Tu peux me donner un lien pour le voir en action ?
Celui du cssplay, c'est un gros boulot, si l'autre fonctionne, je préfère m'abstenir...
Tutoriels vidéos cmsms
Site web Trouver
FlorentCMSMS
Unregistered
 
#12
22/07/2010, 21:20:14
Voilà ce que ça donne en version online, ultra simplifiée :

http://iflows.byethost10.com/
FlorentCMSMS
Unregistered
 
#12
22/07/2010, 21:20:14
Voilà ce que ça donne en version online, ultra simplifiée :

http://iflows.byethost10.com/
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#13
22/07/2010, 23:59:53
Je prends le code source de cette page là ?
Je te ferai ça demain, ça devrait aller vite.
Tutoriels vidéos cmsms
Site web Trouver
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#13
22/07/2010, 23:59:53
Je prends le code source de cette page là ?
Je te ferai ça demain, ça devrait aller vite.
Tutoriels vidéos cmsms
Site web Trouver
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#14
23/07/2010, 08:55:30
J'ai besoin de savoir si ce que tu appelles entête de niveau 1 ou 2 sont des contenus ou des entêtes de section (type de contenu dans l'admin création de page)
Ex : dans les liens de ton menu : Products et Desktop
Si je clique sur Products, est-ce que je tombe sur une page avec un contenu ?
Idem pour Desktop.
Tutoriels vidéos cmsms
Site web Trouver
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#14
23/07/2010, 08:55:30
J'ai besoin de savoir si ce que tu appelles entête de niveau 1 ou 2 sont des contenus ou des entêtes de section (type de contenu dans l'admin création de page)
Ex : dans les liens de ton menu : Products et Desktop
Si je clique sur Products, est-ce que je tombe sur une page avec un contenu ?
Idem pour Desktop.
Tutoriels vidéos cmsms
Site web Trouver
FlorentCMSMS
Unregistered
 
#15
23/07/2010, 09:06:43
Hello, donc :

( Hierarchie : 1)Products : entête de section
(1.1)Desktop / (1.2) Laptop / (1.3) Accessories : Entête de section
FlorentCMSMS
Unregistered
 
#15
23/07/2010, 09:06:43
Hello, donc :

( Hierarchie : 1)Products : entête de section
(1.1)Desktop / (1.2) Laptop / (1.3) Accessories : Entête de section
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#16
23/07/2010, 09:17:15 (Modification du message : 23/07/2010, 09:17:35 par Jean le Chauve.)
Zut, ça va être plus complexe.
Bah, plus de satisfactions quand ça marchera Wink
Tutoriels vidéos cmsms
Site web Trouver
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#16
23/07/2010, 09:17:15 (Modification du message : 23/07/2010, 09:17:35 par Jean le Chauve.)
Zut, ça va être plus complexe.
Bah, plus de satisfactions quand ça marchera Wink
Tutoriels vidéos cmsms
Site web Trouver
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#17
23/07/2010, 09:21:33
On se comprend bien ? Aucun de tes level 1 ne sont des contenus. Ils sont tous des entêtes de section et n'ont aucun contenu, mais ont tous des enfants et petit-enfants.
Tutoriels vidéos cmsms
Site web Trouver
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#17
23/07/2010, 09:21:33
On se comprend bien ? Aucun de tes level 1 ne sont des contenus. Ils sont tous des entêtes de section et n'ont aucun contenu, mais ont tous des enfants et petit-enfants.
Tutoriels vidéos cmsms
Site web Trouver
FlorentCMSMS
Unregistered
 
#18
23/07/2010, 09:54:20
Voilà ^^. En gros le lv 1 sont les menus parents présents dans ma barre de navigation, les <h2> sont aussi des entêtes de section, mais enfants du lvl 1, et mes liens par colones, sont respectivement enfants de ces <h2>
FlorentCMSMS
Unregistered
 
#18
23/07/2010, 09:54:20
Voilà ^^. En gros le lv 1 sont les menus parents présents dans ma barre de navigation, les <h2> sont aussi des entêtes de section, mais enfants du lvl 1, et mes liens par colones, sont respectivement enfants de ces <h2>
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#19
23/07/2010, 10:04:22
ok.
Tutoriels vidéos cmsms
Site web Trouver
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#19
23/07/2010, 10:04:22
ok.
Tutoriels vidéos cmsms
Site web Trouver
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#20
23/07/2010, 14:32:20 (Modification du message : 23/07/2010, 14:35:30 par Jean le Chauve.)
Et voilà :
Code :
{if $count > 0}
<div id="nav_list">
<ul id="topnav">
{foreach from=$nodelist item=node}
{if (($node->depth < $node->prevdepth) && ($node->depth > 1)) }
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
{elseif $node->depth < $node->prevdepth && $node->depth == 1 }
</li></ul>
{elseif $node->index > 0 && $node->type != 'sectionheader' }</li>
{/if}
{if $node->type == 'sectionheader' && $node->depth == 1 && $node->index == 0}
<li class="sectionheader1"> <a href="{$node->url}"> {$node->menutext} </a><div class="sub">
{elseif $node->type == 'sectionheader' && $node->depth == 1}
</div></li><li class="sectionheader1"> <a href="{$node->url}"> {$node->menutext} </a><div class="sub">
{elseif $node->type == 'sectionheader' && $node->depth == 2}
<ul><li class="sectionheader2"><h2><a href="{$node->url}"> {$node->menutext} </a></h2>
{else}
<li><a href="{$node->url}"> {$node->menutext}</a>
{/if}
{if $node->index == $count-1}</li></ul>{/if}
{/foreach}
</div></li></ul></div>
{/if}
Ce n'est pas optimisé, mais ça marche.
La plus grosse difficulté provenait du fait que tu ne veux pas ouvrir d'<ul> pour tes liens du niveaux 3.
Tutoriels vidéos cmsms
Site web Trouver
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#20
23/07/2010, 14:32:20 (Modification du message : 23/07/2010, 14:35:30 par Jean le Chauve.)
Et voilà :
Code :
{if $count > 0}
<div id="nav_list">
<ul id="topnav">
{foreach from=$nodelist item=node}
{if (($node->depth < $node->prevdepth) && ($node->depth > 1)) }
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
{elseif $node->depth < $node->prevdepth && $node->depth == 1 }
</li></ul>
{elseif $node->index > 0 && $node->type != 'sectionheader' }</li>
{/if}
{if $node->type == 'sectionheader' && $node->depth == 1 && $node->index == 0}
<li class="sectionheader1"> <a href="{$node->url}"> {$node->menutext} </a><div class="sub">
{elseif $node->type == 'sectionheader' && $node->depth == 1}
</div></li><li class="sectionheader1"> <a href="{$node->url}"> {$node->menutext} </a><div class="sub">
{elseif $node->type == 'sectionheader' && $node->depth == 2}
<ul><li class="sectionheader2"><h2><a href="{$node->url}"> {$node->menutext} </a></h2>
{else}
<li><a href="{$node->url}"> {$node->menutext}</a>
{/if}
{if $node->index == $count-1}</li></ul>{/if}
{/foreach}
</div></li></ul></div>
{/if}
Ce n'est pas optimisé, mais ça marche.
La plus grosse difficulté provenait du fait que tu ne veux pas ouvrir d'<ul> pour tes liens du niveaux 3.
Tutoriels vidéos cmsms
Site web Trouver
FlorentCMSMS
Unregistered
 
#21
23/07/2010, 15:28:38
Une nouvelle fois un Grand MERCI ! ^^Ca fonctionne presque parfaitement ( seul mon menu "Accueil" ne fonctionne pas ^^, mais je le ferais en dur ). Je passe un coup de CSS la dessus et ça sera parfait Smile.

( Promis je vous montrerais le site final Smile )

Merci.
FlorentCMSMS
Unregistered
 
#21
23/07/2010, 15:28:38
Une nouvelle fois un Grand MERCI ! ^^Ca fonctionne presque parfaitement ( seul mon menu "Accueil" ne fonctionne pas ^^, mais je le ferais en dur ). Je passe un coup de CSS la dessus et ça sera parfait Smile.

( Promis je vous montrerais le site final Smile )

Merci.
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#22
23/07/2010, 15:43:22
Bin oui, tu m'as affirmé que tous les niveaux 1 étaient des entêtes de section et avaient tous des enfants.
Tutoriels vidéos cmsms
Site web Trouver
Jean le Chauve Hors ligne
Posting Freak
*****
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation : 0
#22
23/07/2010, 15:43:22
Bin oui, tu m'as affirmé que tous les niveaux 1 étaient des entêtes de section et avaient tous des enfants.
Tutoriels vidéos cmsms
Site web Trouver
FlorentCMSMS
Unregistered
 
#23
23/07/2010, 16:35:54
C'est le cas pour tous, hormis l'accueil, mais ton code me convient très bien ^^. Je passe en résolu.

Encore merci Jean Smile
FlorentCMSMS
Unregistered
 
#23
23/07/2010, 16:35:54
C'est le cas pour tous, hormis l'accueil, mais ton code me convient très bien ^^. Je passe en résolu.

Encore merci Jean Smile
Sujet fermé 


Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)