[Résolu] Reproduction Menu Html5 vers CmsMs

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
#1
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.12
#~ Url du site :
#~ Hébergeur / Soft :
#~ Informations Système :
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~



Bonjour la communaute,

Je tente de reproduire un template Html5 sur cmsms malheureusement quand il s'agit du menu je bloque.

Si il y a une ame charitable parmis vous qui serais me donner un coup de main ca serait super gentil.

Template original (brubelessaouira.com/template_ori) / Site (brubelessaouira.com/index.php)

un grand merci d'avance
#1
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.12
#~ Url du site :
#~ Hébergeur / Soft :
#~ Informations Système :
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~



Bonjour la communaute,

Je tente de reproduire un template Html5 sur cmsms malheureusement quand il s'agit du menu je bloque.

Si il y a une ame charitable parmis vous qui serais me donner un coup de main ca serait super gentil.

Template original (brubelessaouira.com/template_ori) / Site (brubelessaouira.com/index.php)

un grand merci d'avance
#2
Code :
[== HTML ==]
<ul>
            <li>
                <a data-type="submenu" href="#">Home</a>
                <ul>
                    <li><a href="home.html">One page</a></li>
                    <li><a href="index.html">Classic</a></li>
                </ul>
            </li>
            <li><a href="room.html">Room</a></li>
            <li>
               <a data-type="submenu" href="#">Pages</a>
                <ul>
                    <li><a href="gallery.html">Gallery</a></li>
                    <li><a href="package-list.html">Package List</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="team.html">Team</a></li>
                    <li><a href="widgets.html">Widgets</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="404.html">404</a></li>
                </ul>
            </li>
           <li>
              <a data-type="submenu" href="#">Blog</a>
              <ul class="has-sub">
                <li><a href="blog-list-full.html">Blog list full</a></li>
                <li><a href="blog-list-column-left.html">Blog left column</a></li>
                <li><a href="blog-list-column-right.html">Blog right column</a></li>
                <li><a href="blog-left-article.html">Blog left article</a></li>
                <li><a href="blog-right-article.html">Blog right article</a></li>
              </ul>
           </li>
           <li>
              <a data-type="submenu" href="#">Contact</a>
              <ul class="has-sub">
                <li><a href="contact-full.html">Contact full width</a></li>
                <li><a href="contact-left-column.html">Contact left column</a></li>
                <li><a href="contact-right-column.html">Contact right column</a></li>
              </ul>
           </li>
           <li>
              <a data-type="submenu" href="#">Elements</a>
              <ul class="has-sub">
                <li><a href="elements-accordions.html">Accordions</a></li>
                <li><a href="elements-button.html">Button</a></li>
                <li><a href="elements-grids.html">Columns</a></li>
                <li><a href="elements-notifications.html">Notifications</a></li>
                <li><a href="elements-progress-bar.html">Progress Bar</a></li>
                <li><a href="elements-tabs-and-pills.html">Tabs and Pills</a></li>
                <li><a href="elements-typography.html">Typography</a></li>
                <li><a href="elements-media.html">Media list and Panels</a></li>
              </ul>
           </li>
           <li><a href="#" class="top-button"><span class="icon-top glyphicon glyphicon-chevron-up"></span></a></li>
        </ul>
#2
Code :
[== HTML ==]
<ul>
            <li>
                <a data-type="submenu" href="#">Home</a>
                <ul>
                    <li><a href="home.html">One page</a></li>
                    <li><a href="index.html">Classic</a></li>
                </ul>
            </li>
            <li><a href="room.html">Room</a></li>
            <li>
               <a data-type="submenu" href="#">Pages</a>
                <ul>
                    <li><a href="gallery.html">Gallery</a></li>
                    <li><a href="package-list.html">Package List</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="team.html">Team</a></li>
                    <li><a href="widgets.html">Widgets</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="404.html">404</a></li>
                </ul>
            </li>
           <li>
              <a data-type="submenu" href="#">Blog</a>
              <ul class="has-sub">
                <li><a href="blog-list-full.html">Blog list full</a></li>
                <li><a href="blog-list-column-left.html">Blog left column</a></li>
                <li><a href="blog-list-column-right.html">Blog right column</a></li>
                <li><a href="blog-left-article.html">Blog left article</a></li>
                <li><a href="blog-right-article.html">Blog right article</a></li>
              </ul>
           </li>
           <li>
              <a data-type="submenu" href="#">Contact</a>
              <ul class="has-sub">
                <li><a href="contact-full.html">Contact full width</a></li>
                <li><a href="contact-left-column.html">Contact left column</a></li>
                <li><a href="contact-right-column.html">Contact right column</a></li>
              </ul>
           </li>
           <li>
              <a data-type="submenu" href="#">Elements</a>
              <ul class="has-sub">
                <li><a href="elements-accordions.html">Accordions</a></li>
                <li><a href="elements-button.html">Button</a></li>
                <li><a href="elements-grids.html">Columns</a></li>
                <li><a href="elements-notifications.html">Notifications</a></li>
                <li><a href="elements-progress-bar.html">Progress Bar</a></li>
                <li><a href="elements-tabs-and-pills.html">Tabs and Pills</a></li>
                <li><a href="elements-typography.html">Typography</a></li>
                <li><a href="elements-media.html">Media list and Panels</a></li>
              </ul>
           </li>
           <li><a href="#" class="top-button"><span class="icon-top glyphicon glyphicon-chevron-up"></span></a></li>
        </ul>
#3
Je te le ferai demain, mais il a quelque chose de bizarre, ce menu : pourquoi n'a-t-il pas de class="has-sub" pour les <ul> sous Home et Pages ?
A première vue, cette classe ne sert à rien (n'est pas utilisée ni dans menu.css, ni, il me semble, dans jquery.menu.min.js).
Pourrais-tu tester avec le menu en dur sans cette classe et me dire si ça fonctionne quand même ?
#3
Je te le ferai demain, mais il a quelque chose de bizarre, ce menu : pourquoi n'a-t-il pas de class="has-sub" pour les <ul> sous Home et Pages ?
A première vue, cette classe ne sert à rien (n'est pas utilisée ni dans menu.css, ni, il me semble, dans jquery.menu.min.js).
Pourrais-tu tester avec le menu en dur sans cette classe et me dire si ça fonctionne quand même ?
#4
Hello Jean, mon sauveur de voisin :-) apres sahin meubles tu me sauves la mise encore une fois...

Effectivement j'ai vire le has-sub et rien de changer :-)

Un tout grand merci en tout cas :-) a l'occasion je t'inviterais a boire un cafe pour ta precieuse aide
#4
Hello Jean, mon sauveur de voisin :-) apres sahin meubles tu me sauves la mise encore une fois...

Effectivement j'ai vire le has-sub et rien de changer :-)

Un tout grand merci en tout cas :-) a l'occasion je t'inviterais a boire un cafe pour ta precieuse aide
#5
Salut,
J'ai bien étudié ce menu : il est extrêmement simple à reproduire et est entièrement piloté par JQuery.

Mais, l'as-tu compris et es-tu certain qu'il te convienne ?
Il n'affiche que 2 niveaux et les pages de 1er niveau et qui ont des enfants doivent être des sectionheader (entête de section).
Code :
{strip}
{if $count > 0}
    <ul>
        {foreach from=$nodelist item=node}
            {if $node->depth > $node->prevdepth}
                {repeat string="<ul>" times=$node->depth-$node->prevdepth}
            {elseif $node->depth < $node->prevdepth}
                {repeat string="</li></ul>" times=$node->prevdepth-$node->depth}</li>
            {elseif $node->index > 0}</li>
            {/if}
            
            {if $node->depth == 1 && $node->children_exist == true}
                <li><a data-type="submenu" href="#">{$node->menutext}</a>
            {else}
                <li><a href="{$node->url}">{$node->menutext}</a>
            {/if}
        {/foreach}
        {repeat string="</li></ul>" times=$node->depth-1}</li>
        {* flèche située en bas et à droite servant à remonter en haut de la page *}
                <li><a href="#" class="top-button"><span class="icon-top glyphicon glyphicon-chevron-up"></span></a></li>
    </ul>
{/if}
{/strip}

Si tu regardes la playlist de mes tutos vidéos, les n° 7 et 8 tentent d'expliquer comment fonctionne l'algorithme des menus de cmsms V1 ainsi que dans ce tuto texte.
#5
Salut,
J'ai bien étudié ce menu : il est extrêmement simple à reproduire et est entièrement piloté par JQuery.

Mais, l'as-tu compris et es-tu certain qu'il te convienne ?
Il n'affiche que 2 niveaux et les pages de 1er niveau et qui ont des enfants doivent être des sectionheader (entête de section).
Code :
{strip}
{if $count > 0}
    <ul>
        {foreach from=$nodelist item=node}
            {if $node->depth > $node->prevdepth}
                {repeat string="<ul>" times=$node->depth-$node->prevdepth}
            {elseif $node->depth < $node->prevdepth}
                {repeat string="</li></ul>" times=$node->prevdepth-$node->depth}</li>
            {elseif $node->index > 0}</li>
            {/if}
            
            {if $node->depth == 1 && $node->children_exist == true}
                <li><a data-type="submenu" href="#">{$node->menutext}</a>
            {else}
                <li><a href="{$node->url}">{$node->menutext}</a>
            {/if}
        {/foreach}
        {repeat string="</li></ul>" times=$node->depth-1}</li>
        {* flèche située en bas et à droite servant à remonter en haut de la page *}
                <li><a href="#" class="top-button"><span class="icon-top glyphicon glyphicon-chevron-up"></span></a></li>
    </ul>
{/if}
{/strip}

Si tu regardes la playlist de mes tutos vidéos, les n° 7 et 8 tentent d'expliquer comment fonctionne l'algorithme des menus de cmsms V1 ainsi que dans ce tuto texte.
#6
Bonjour Jean,

Desole du retard de la reponse, je viens de tester c'est perfect comme d'hab :-)
Non je n'ai pas etudie le menu, template achete par le client...
par contre je te remercie enormement je vais de suite consulte tes tutos videos ainsi que le tuto txt :-)

Take care et encore un enorme MERCI MERCI MERCI....
#6
Bonjour Jean,

Desole du retard de la reponse, je viens de tester c'est perfect comme d'hab :-)
Non je n'ai pas etudie le menu, template achete par le client...
par contre je te remercie enormement je vais de suite consulte tes tutos videos ainsi que le tuto txt :-)

Take care et encore un enorme MERCI MERCI MERCI....


Atteindre :


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