Forum CMS Made Simple FR
[Résolu] Gabarit - ancre - Menu - Version imprimable

+- Forum CMS Made Simple FR (https://www.cmsmadesimple.fr/forum)
+-- Forum : Général (https://www.cmsmadesimple.fr/forum/forum-3.html)
+--- Forum : Général (https://www.cmsmadesimple.fr/forum/forum-10.html)
+--- Sujet : [Résolu] Gabarit - ancre - Menu (/thread-1982.html)



[Résolu] Gabarit - ancre - Menu - booky - 16/05/2012

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: #1.10.3
#~ Url du site :
#~ Hébergeur / Soft : ovh
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.10.3
#~ Installed Modules:
#~ CMSMailer: 2.0.2
#~ FileManager: 1.2.0
#~ MenuManager: 1.7.7
#~ ModuleManager: 1.5.3
#~ News: 2.12.3
#~ Printing: 1.1.2
#~ Search: 1.7
#~ ThemeManager: 1.1.4
#~ TinyMCE: 2.9.6
#~ FormBuilder: 0.7.2
#~ Captcha: 0.4.5
#~ CGExtensions: 1.28.2
#~ NMS: 2.4.2
#~ DownCnt: 2.2.0
#~ Slide: 1.0
#~ CMSPrinting: 1.0
#~ MicroTiny: 1.1.1
#~ SEOTools2: 1.0.9
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template: false
#~ output_compression: false
#~ max_upload_size: 64000000
#~ default_upload_permission: 664
#~ url_rewriting: internal
#~ page_extension: .html
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale:
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.2.17
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ memory_limit: 128M
#~ max_execution_time: 120
#~ output_buffering: On
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 64M
#~ upload_max_filesize: 64M
#~ session_save_path: /tmp (1777)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ Server Information:
#~ Server Api: cgi
#~ Server Db Type: MySQL (mysqli)
#~ Server Db Version: 5.0.90
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour, en lisant le topic : http://localhost/cmsms_france/forum_mybb/www/showthread.php?tid=1305 j'ai fait une petite image de ce que je voudrais faire à partir d'un gabarit genre Minimal template. -->http://www.hostingpics.net/viewer.php?id=874157demoGabarit.jpg

je sais comment faire en html/css/et javascript, mais je voudrais que le client puisse administré le contenu.

Des idées Wink ?!

Merci


[Résolu] Gabarit - ancre - Menu - Jean le Chauve - 16/05/2012

C'est gentil d'avoir pris du temps pour créer ton image, mais je n'ai rien compris. Tu fais 4 pages et c'est bon, non ? Quel est le rapport avec l'ancre ?


[Résolu] Gabarit - ancre - Menu - booky - 18/05/2012

slt,
je voudrais afficher le contenu des pages dans les zones d'ancre un comme ici : http://www.webinventif.fr/public/data/df_smooth_scroll.html


[Résolu] Gabarit - ancre - Menu - jce76350 - 18/05/2012

avec TinyMCE tu fais une ancre et un lien

exemple
- ancre
ancre1 dans ta page XXX

- un lien
index.php?page=XXX#ancre1 ou {cms_selflink href='XXX'}#ancre1


[Résolu] Gabarit - ancre - Menu - Jean le Chauve - 18/05/2012

Si tu sais le faire en html, je ne vois pas pourquoi tu te poses des questions :

Dans ton gabarit, tu ajoutes juste avant {content} :
Code :
[== HTML ==]
<div class="header_link">
<a name="top" href="#footer">GO TO FOOTER</a>
<a href="#middle">GO TO MIDDLE</a>

Juste après tu ajoutes :
Code :
[== HTML ==]
</div>
<div class="middle_link">
<a name="middle" href="#top">GO TO TOP</a>
<a href="#footer">GO TO FOOTER</a>
{content block="middle" label="middle"}
</div>
<div class="footer_link">
<a name="footer" href="#top">GO TO HEADER</a>
<a href="#middle">GO TO MIDDLE</a>
{content block="footer" label="footer"}
</div>



[Résolu] Gabarit - ancre - Menu - booky - 18/05/2012

ok ...
mais comment administré le contenu des blocs dans l'admin?
et si l'éditeur rajoute une page sera-t-elle prise en compte dans le menu?
j'ai trouvé une demo de script jQuery encore plus précise sur le fonctionnement que je souhaite..
http://www.webdesignweb.fr/sources/scrollto/index.html


[Résolu] Gabarit - ancre - Menu - Jean le Chauve - 18/05/2012

{content block="middle" label="middle"} va afficher un bloc de contenu supplémentaire appelé "middle" dans la page d'administration, en dessous du contenu normal (voir la doc sur : extensions->balises->content).
Si tu désires que les ancres soient dans le menu de navigation comme dans ton dernier lien, tu crées des pages, non pas "contenu, mais "lien page interne".

Ex : tu crées une page avec tes 3 ancres qui s'appelle "test", c'est une page de contenu attachée au gabarit montré plus haut.
Tu crées une page "top" qui est un lien de redirection vers l'ancre top. Tu mets dans les paramètres additionnels : #top et dans "page de destination : test.
Et ainsi de suite pour tes 2 autres pages d'ancre (middle et footer).


[Résolu] Gabarit - ancre - Menu - Jean le Chauve - 18/05/2012

Mais ça n'ira pas pour ton nouveau Jquery...
Il va falloir travailler autrement, laisses-moi 2 minutes de réflexion.


[Résolu] Gabarit - ancre - Menu - booky - 18/05/2012

ok pas soucis je cherche aussi Wink


[Résolu] Gabarit - ancre - Menu - Jean le Chauve - 18/05/2012

Il faut que tu saches exactement ce que tu veux. Y-aura-t-il d'autre pages, car dans le lien donné plus haut, il n'y en a qu'une...


[Résolu] Gabarit - ancre - Menu - booky - 18/05/2012

Effectivement il y a juste une page genre l'index.php
et le menu seras en fixed


[Résolu] Gabarit - ancre - Menu - Jean le Chauve - 18/05/2012

Et tu veux utiliser le JQuery montré au-dessus ? Si oui, il ne faut pas utiliser cette méthode, tu le vois bien dans le code source.
Et tu ne sais pas combien de blocs devront être affiché ? Ce sera au gré du client, je suppose.


[Résolu] Gabarit - ancre - Menu - booky - 18/05/2012

Tout à fait c'est le client qui gère.
le jQuery est juste un exemple..


[Résolu] Gabarit - ancre - Menu - Jean le Chauve - 18/05/2012

Citation :le jQuery est juste un exemple..
Non, ta réponse ne convient pas, tu es trop vague.


[Résolu] Gabarit - ancre - Menu - Jean le Chauve - 18/05/2012

Y-a-t-il un nombre maximum de blocs ? Ce qui serait logique, sinon ta navigation va déborder.


[Résolu] Gabarit - ancre - Menu - booky - 18/05/2012

Pardon le lien jquery en demo que j'ai mis dans le post plus au (http://www.webdesignweb.fr/sources/scrollto/index.html)


[Résolu] Gabarit - ancre - Menu - Jean le Chauve - 18/05/2012

Citation :et le menu seras en fixed
Faut savoir, si c'est "fixed", il y a un nombre de blocs définis...
Tu vois bien qu'il n'y a que des divs dans le html pour ce JQuery, pas d'ancre.


[Résolu] Gabarit - ancre - Menu - booky - 18/05/2012

si si j'ai bien vu qu'il n’y avait que des divs c'est pour ça que je voulais passer par des ancres.
l'éditeur ne connais pas le html , ça risque d'être compliqué pour lui.


[Résolu] Gabarit - ancre - Menu - Jean le Chauve - 18/05/2012

Mais non, c'est à toi de gérer tout ça, ça n'a rien à voir avec l'éditeur.
Ce que tu souhaites est tout à fait possible, mais tu dois définir une limite, sinon ta navigation va dépasser. Comme tu le vois sur la démo, il n'y a que 6 "blocs".
Comment faire pour adapter exactement la démo :
Code :
<div id="header">
    
    <div id="menu">
        <ul>
            <li><a href="#top">Accueil</a></li>
            <li><a href="#img1">Image 1</a></li>
            <li><a href="#img2">Image 2</a></li>
            <li><a href="#img3">Image 3</a></li>
            <li><a href="#img4">Image 4</a></li>
            <li><a href="#img5">Image 5</a></li>
            <li><a href="#img6">Image 6</a></li>
        </ul>
    </div><!-- #menu -->
    
</div><!-- #header -->

<div id="container">
    
    <div id="top"></div>
    
    <div id="img1"></div>
    <div class="image-ombre"><img src="img/1.jpg" alt="image 1" title="image 1" /></div>
    
    <div id="img2"></div>
    <div class="image-ombre"><img src="img/2.jpg" alt="image 2" title="image 2" /></div>
    
    <div id="img3"></div>
    <div class="image-ombre"><img src="img/3.jpg" alt="image 3" title="image 3" /></div>
    
    <div id="img4"></div>    
    <div class="image-ombre"><img src="img/4.jpg" alt="image 4" title="image 4" /></div>
    
    <div id="img5"></div>
    <div class="image-ombre"><img src="img/5.jpg" alt="image 5" title="image 5" /></div>
    
    <div id="img6"></div>
    <div class="image-ombre"><img src="img/6.jpg" alt="image 6" title="image 6" /></div>

    <div id="espace-bas"></div>
    
</div><!-- #container -->
On va commencer par créer les 6 blocs, je t'expliquerai après comment faire une navigation dynamique.
Je te donne ce code dans 2 minutes.


[Résolu] Gabarit - ancre - Menu - Jean le Chauve - 18/05/2012

Edit : voir post suivant.


[Résolu] Gabarit - ancre - Menu - Jean le Chauve - 18/05/2012

Voilà le code complet avec affichage ou non de la navigation et des blocs suivant leur remplissage :
Code :
<body>
{capture name=bloc1}{content block="bloc1" label="bloc1"}{/capture}
{capture name=bloc2}{content block="bloc2" label="bloc2"}{/capture}
{capture name=bloc3}{content block="bloc3" label="bloc3"}{/capture}
{capture name=bloc4}{content block="bloc4" label="bloc4"}{/capture}
{capture name=bloc5}{content block="bloc5" label="bloc5"}{/capture}
<div id="header">
    <div id="menu">
        <ul>
            <li><a href="#top">Accueil</a></li>
            <li><a href="#img1">Image 1</a></li>
            {if $smarty.capture.bloc1 ne ""}
            <li><a href="#img2">Image 2</a></li>
            {/if}
            {if $smarty.capture.bloc2 ne ""}
            <li><a href="#img3">Image 3</a></li>
            {/if}
            {if $smarty.capture.bloc3 ne ""}
            <li><a href="#img4">Image 4</a></li>
            {/if}
            {if $smarty.capture.bloc4 ne ""}
            <li><a href="#img5">Image 5</a></li>
            {/if}
            {if $smarty.capture.bloc5 ne ""}
            <li><a href="#img6">Image 6</a></li>
            {/if}
        </ul>
    </div><!-- #menu -->
</div><!-- #header -->
<div id="container">
    <div id="top"></div>
    <div id="img1"></div>
    <div class="image-ombre">{content}</div>
    {if $smarty.capture.bloc1 ne ""}
    <div id="img2"></div>
    <div class="image-ombre">{$smarty.capture.bloc1}</div>
    {/if}
    {if $smarty.capture.bloc2 ne ""}
    <div id="img3"></div>
    <div class="image-ombre">{$smarty.capture.bloc2}</div>
    {/if}
    {if $smarty.capture.bloc3 ne ""}
    <div id="img4"></div>    
    <div class="image-ombre">{$smarty.capture.bloc3}</div>
    {/if}
    {if $smarty.capture.bloc4 ne ""}
    <div id="img5"></div>
    <div class="image-ombre">{$smarty.capture.bloc4}</div>
    {/if}
    {if $smarty.capture.bloc5 ne ""}
    <div id="img6"></div>
    <div class="image-ombre">{$smarty.capture.bloc5}</div>
    {/if}
    <div id="espace-bas"></div>
</div><!-- #container -->
</body>