[Résolu] Application de CSS dans Menu

[Résolu] Application de CSS dans Menu - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Modules, Tags (https://forum.cmsmadesimple.fr/forum-14.html)
+--- Sujet : [Résolu] Application de CSS dans Menu (/thread-2002.html)

[Résolu] Application de CSS dans Menu - Piet - 26/05/2012

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: #1.10.3
#~ Url du site : http://www.reflexions3.be/
#~ Hébergeur / Soft : wampserver
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.10.3
#~ Installed Modules:
#~ CMSMailer: 2.0.2
#~ CMSPrinting: 1.0
#~ FileManager: 1.2.0
#~ MenuManager: 1.7.7
#~ MicroTiny: 1.1.1
#~ ModuleManager: 1.5.3
#~ News: 2.12.3
#~ Search: 1.7
#~ ThemeManager: 1.1.4
#~ Album: 1.10-beta2
#~ Gallery: 1.3
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template: false
#~ output_compression: false
#~ max_upload_size: 2000000
#~ default_upload_permission: 664
#~ url_rewriting: none
#~ page_extension:
#~ 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.3.10
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ E_DEPRECATED: 8192
#~ memory_limit: 128M
#~ max_execution_time: 30
#~ output_buffering: 1
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 8M
#~ upload_max_filesize: 2M
#~ session_save_path: c:/wamp/tmp (0777)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ Server Information:
#~ Server Api: apache2handler
#~ Server Db Type: MySQL (mysql)
#~ Server Db Version: 5.5.20
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour Communauté,

Je suis nouveau sur CMSMS et j'ai évidemment des questions qui peuvent sembler bêtes, mais dont les réponse m'aiderait grandement. J'essaie de convertir le site http://www.reflexions3.be/ en dynamique.

J'ai un menu sur lequel je n'arrive pas à appliquer mon css.
J'utilise le template cssmenu.

Voici le code du gabarit de ma page CMSMS:

Code :
[== XHTML ==]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

{literal}<script type="text/javascript" src="uploads/js/jquery-1.4.4.js"></script>{/literal}

{literal}<script type="text/javascript" src="uploads/js/jquery.mousewheel.js"></script>{/literal}

{literal}<script type="text/javascript" src="uploads/js/jquery.jscrollpane.min.js"></script>{/literal}

{literal}<script type="text/javascript" id="sourcecode">

            $(function()

            {

                $('.scroll-pane').jScrollPane();

                $('.scroll-pane-arrows').jScrollPane(

                    {

                        showArrows: true,

                        horizontalGutter: 10

                    }

                );

            });

        </script>

{/literal}

{cms_stylesheet}

{metadata}

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Accueil - Reflexion[s]3</title>

</head>

<body class="oneColFixCtr">

<div id="bodybckgnd"><img src="uploads/images/background.jpg" alt="" style="display:block; width:100%; height:100%;" /></div>

<div id="bkcontent">

<div id="menu-container">

<div id="menu">

{menu}

<div id="logo"></div>

</div>

</div>

<div id="container">

                <div id="entete">

                    <div id="controls" class="controls"></div>

                </div>

            <div id="mainContent">

            <div id="accueil" class="scroll-pane-arrows">

            {content}

            </div>

                            <div id="thumbs">

                                <ul class="thumbs">

                                    <li><img src="uploads/images/accueil-1.jpg" alt="" /></li>

                                    <li>

                                    <img src="uploads/images/accueil-2.jpg" alt="" />

                                    </li>

                                     <li>

                                        <img src="uploads/images/accueil-3.jpg" alt="" />

                                    </li>

                              </ul>

                </div>

                <!-- Start Advanced Gallery Html Containers -->

                            <div id="gallery" class="content">

                                <div class="slideshow-container">

                                    <div id="slideshow" class="slideshow"><img src="uploads/images/accueil-big.jpg" alt="Title #1" /></div>

                                </div>

                            </div>

            </div>

  </div>

<div id="footer">

  <p><b>Réflexion[s]<sup>3</sup></b> | +32 497 97 57 02

    | <a href="mailto:info@reflexions3.be">info@reflexions3.be</a></p>

  <p>©Copyright 2010 Réflexion[s]<sup>3</sup> All right reserved. </p>

</div>

</div>

{literal}<script type="text/javascript"> 

$(document).ready(function(){

    $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

    $("ul.topnav li a") .mouseover(function() { //When trigger is clicked...

        //Following events are applied to the subnav itself (moving subnav up and down)

        $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

        $(this).parent().hover(function() {

        }, function(){    

            $(this).parent().find("ul.subnav").slideUp('medium'); //When the mouse hovers out of the subnav, move it back up

        });

        //Following events are applied to the trigger (Hover events for the trigger)

        }).hover(function() { 

            $(this).addClass("subhover"); //On hover over, add class "subhover"

        }, function(){    //On Hover Out

            $(this).removeClass("subhover"); //On hover out, remove class "subhover"

    });

});

</script>{/literal}

</body>

</div>

</html>

Mon code original pour le menu:

Code :
[== XHTML ==]

<div id="menu-container">

<div id="menu">

<div id="logo"></div>

<ul class="topnav">  

    <li>

        <a href="index.html">ACCUEIL</a>

    </li> 

    <li>

        <a href="presentation.html">PRESENTATION</a> 

    </li>  

    <li>  

    <a href="#">REFERENCE</a>  

                <ul class="subnav">  

                <li><a href="amenagements-prives.html">Aménagements privés</a></li>  

                <li><a href="amenagements-commerces.html">Aménagements commerces & bureaux</a></li>  

                <li><a href="eclairage-interieurs-prives.html">Eclairage intérieurs privés</a></li>  

                <li><a href="eclairage-exterieurs-prives.html">Eclairage extérieurs privés</a></li>  

                <li><a href="eclairage-interieurs-commerces.html">Eclairage intérieurs commerces & bureaux</a></li>  

                <li><a href="eclairage-exterieurs-commerces.html">Eclairage extérieurs commerces & bureaux</a></li>  

                <!--<li><a href="conceptions.html">Conceptions</a></li> -->

</ul>   

    </li>  

    <li>

            <a href="news.html">NEWS</a>

    </li> 

    <li>

            <a href="contact.html">CONTACT</a>

    </li>   

</ul>

<!-- fin de #menu --></div>

<!-- fin de #menu-container --></div>

Feuille de style du menu:

Code :
[== CSS ==]

#menu {

margin: auto;

width: 940px;

position:relative;

}

/*Style Menu sexy*/

ul.topnav {  

    list-style: none;  

    padding: 0;  

    margin: 0;  

    float: right;  

    width: 480px;  

    background: #222;  

    background: url([[root_url]]/uploads/images/topnav_bg.gif) repeat-x;  

}  

ul.topnav li {  

    float: left;  

    margin: 0;  

    padding: 0 25px 4px 0;  

    position: relative; /*--Declare X and Y axis base for sub navigation--*/  

}  

ul.topnav li a{  

    padding: 5px 5px 0px 5px;  

    color: #999;  

    display: block;  

    text-decoration: none;  

    float: right;  

}  

ul.topnav li a:hover{  

    background: url([[root_url]]/uploads/images/topnav_hover.gif) no-repeat center top; 

    color: #FFF; 

}  

ul.topnav li a:active{  

    background: url([[root_url]]/uploads/images/topnav_hover.gif) no-repeat center top; 

    color: #FFF; 

}  

ul.topnav li span { /*--Drop down trigger styles--*/  

    width: 17px;  

    height: 20px;  

    float: right;  

    background: url([[root_url]]/uploads/images/subnav_btn.gif) no-repeat center top;  

}  

ul.topnav li span.subhover {background-position: center bottombottom; cursor: pointer;} /*--Hover effect for trigger--*/  

ul.topnav li ul.subnav {

    list-style: none;

    position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/

    left: 0;

    top: 23px;

    background: #333;

    margin: 0;

    padding: 0 0 0 0;

    display: none;

    float: left;

    width: 160px;

    border: 1px solid #111;

    text-align: left;

    z-index: 10;

}  

ul.topnav li ul.subnav li{  

    margin: 0; padding: 0 1px 1px 1px;  

    border-top: 1px solid #252525; /*--Create bevel effect--*/  

    border-bottom: 1px solid #444; /*--Create bevel effect--*/  

    clear: both;  

    width: 159px;

    z-index: 10;

}  

html ul.topnav li ul.subnav li a {  

    float: left;  

    width: 133px;  

    background: #333 url(dropdown_linkbg.gif) no-repeat 5px center;  

    padding-left: 20px; 

    padding-bottom: 3px;

    z-index: 10;

}  

html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/  

    background: #222 url(dropdown_linkbg.gif) no-repeat 5px center;  

    z-index: 10;

}

Je n'arrive pas à modifier le template pour que le menu ressemble à l'original (http://www.reflexions3.be/)

Quelqu'un peut-il m'aider à placer mon css ou me diriger vers un template menu plus adapté?

PS, quand je place le code original sans le module menu, il s'affiche et fonctionne parfaitement

En vous remerciant pour votre aide des plus appréciable.
"Moi petit scarabée fait appel à toi maître Wink

[Résolu] Application de CSS dans Menu - Jean le Chauve - 27/05/2012

Bienvenue,
Le template minimal fonctionne très bien pour ce menu.
Tu dois mettre la page REFERENCE en sectionheader, dire au menu qu'elle pointe sur # et ajouter la classe subnav aux pages enfants et topnav au premier ul :

Code :
{* CSS classes used in this template:

.currentpage - The active/current page

.bullet_sectionheader - To style section header

hr.separator - To style the ruler for the separator *} 

{if $count > 0}

{* ajout de topnav *}

<ul class="clearfix topnav">

{foreach from=$nodelist item=node}

{if $node->depth > $node->prevdepth}

{* ajout de subnav à list des enfants *}

{repeat string="<ul class='subnav'>" 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->current == true}

<li><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}

<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}

{* on transforme le section header de la page parent en lien # *}

<li class="sectionheader"><a href="#">{$node->menutext}</a>

{elseif $node->type == 'separator'}

<li style="list-style-type: none;"> <hr class="separator" />

{else}

<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>

</ul>

{/if}

[Résolu] Application de CSS dans Menu - Piet - 29/05/2012

Merci votre seigneurie Le Chauve Wink

Mes styles s'appliquent très bien maintenant.

J'ai cependant un souci avec mon script qui déroule le menu. Dans les faits, il ne le déroule pas du tout...

Il y a t-il une fonction différente à appeler ou un bout de code à rajouter pour qu'il fonctionne?

Mon script:

Code :
[== JavaScript ==]

{literal}<script type="text/javascript"> 

$(document).ready(function(){

    $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

    $("ul.topnav li a") .mouseover(function() { //When trigger is clicked...

        //Following events are applied to the subnav itself (moving subnav up and down)

        $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

        $(this).parent().hover(function() {

        }, function(){    

            $(this).parent().find("ul.subnav").slideUp('medium'); //When the mouse hovers out of the subnav, move it back up

        });

        //Following events are applied to the trigger (Hover events for the trigger)

        }).hover(function() { 

            $(this).addClass("subhover"); //On hover over, add class "subhover"

        }, function(){    //On Hover Out

            $(this).removeClass("subhover"); //On hover out, remove class "subhover"

    });

});

</script>{/literal}

Ma page:

Code :
[== XHTML ==]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

{literal}<script type="text/javascript" src="uploads/js/jquery-1.4.4.js"></script>{/literal}

{literal}<script type="text/javascript" src="uploads/js/jquery.mousewheel.js"></script>{/literal}

{literal}<script type="text/javascript" src="uploads/js/jquery.jscrollpane.min.js"></script>{/literal}

{literal}<script type="text/javascript" id="sourcecode">

            $(function()

            {

                $('.scroll-pane').jScrollPane();

                $('.scroll-pane-arrows').jScrollPane(

                    {

                        showArrows: true,

                        horizontalGutter: 10

                    }

                );

            });

        </script>

{/literal}

{cms_stylesheet}

{metadata}

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Accueil - Reflexion[s]3</title>

</head>

<body class="oneColFixCtr">

<div id="bodybckgnd"><img src="uploads/images/background.jpg" alt="" style="display:block; width:100%; height:100%;" /></div>

<div id="bkcontent">

<div id="menu-container">

<div id="menu">

{menu}

<div id="logo"></div>

</div>

</div>

<div id="container">

                <div id="entete">

                    <div id="controls" class="controls"></div>

                </div>

            <div id="mainContent">

            <div id="accueil" class="scroll-pane-arrows">

            {content}

            </div>

                            <div id="thumbs">

                                <ul class="thumbs">

                                    <li><img src="uploads/images/accueil-1.jpg" alt="" /></li>

                                    <li>

                                    <img src="uploads/images/accueil-2.jpg" alt="" />

                                    </li>

                                     <li>

                                        <img src="uploads/images/accueil-3.jpg" alt="" />

                                    </li>

                              </ul>

                </div>

                <!-- Start Advanced Gallery Html Containers -->

                            <div id="gallery" class="content">

                                <div class="slideshow-container">

                                    <div id="slideshow" class="slideshow"><img src="uploads/images/accueil-big.jpg" alt="Title #1" /></div>

                                </div>

                            </div>

            </div>

  </div>

<div id="footer">

  <p><b>Réflexion[s]<sup>3</sup></b> | +32 497 97 57 02

    | <a href="mailto:info@reflexions3.be">info@reflexions3.be</a></p>

  <p>©Copyright 2010 Réflexion[s]<sup>3</sup> All right reserved. </p>

</div>

</div>

{literal}<script type="text/javascript"> 

$(document).ready(function(){

    $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

    $("ul.topnav li a") .mouseover(function() { //When trigger is clicked...

        //Following events are applied to the subnav itself (moving subnav up and down)

        $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

        $(this).parent().hover(function() {

        }, function(){    

            $(this).parent().find("ul.subnav").slideUp('medium'); //When the mouse hovers out of the subnav, move it back up

        });

        //Following events are applied to the trigger (Hover events for the trigger)

        }).hover(function() { 

            $(this).addClass("subhover"); //On hover over, add class "subhover"

        }, function(){    //On Hover Out

            $(this).removeClass("subhover"); //On hover out, remove class "subhover"

    });

});

</script>{/literal}

</body>

</div>

</html>

Mon template Menu:

Code :
[== Indéfini ==]

{* CSS classes used in this template:

.currentpage - The active/current page

.bullet_sectionheader - To style section header

hr.separator - To style the ruler for the separator *} 

{if $count > 0}

{* ajout de topnav *}

<ul class="clearfix topnav">

{foreach from=$nodelist item=node}

{if $node->depth > $node->prevdepth}

{* ajout de subnav à list des enfants *}

{repeat string="<ul class='subnav'>" 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->current == true}

<li><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}

<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}

{* on transforme le section header de la page parent en lien # *}

<li class="sectionheader"><a href="#">{$node->menutext}</a>

{elseif $node->type == 'separator'}

<li style="list-style-type: none;"> <hr class="separator" />

{else}

<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>

</ul>

{/if}

Je n'arrive pas à comprendre pourquoi il ne joue pas ce script alors que d'autres fonctionnent sur la page.

Un petit coup de main serait le bienvenu

En vous remerciant,

Cordialement,
Piet

[Résolu] Application de CSS dans Menu - Jean le Chauve - 29/05/2012

Tu n'as pas un lien vers ton site test (tu pourrais le mettre dans un sous dossier de ton site actuel) ?
Sinon, utilise FireBug pour trouver l'erreur.

[Résolu] Application de CSS dans Menu - Piet - 01/06/2012

Bonjour,

J'ai installé mon site en ligne à l'adresse:
http://www.reflexions3.be/cmsms/

J'ai normalement un menu déroulant sous l'onglet 'REFERENCES' (avec une petite icone flèche verte vers le bas) mais on dirait que le script associé ne fonctionne pas. Il y a une page enfant dans cet onglet
http://www.reflexions3.be/cmsms/index.php?page=amenagements-prives

Visuellement, ça devrait se dérouler comme dans la page 'CONTACT'
http://www.reflexions3.be/cmsms/index.php?page=contact
dans laquelle j'ai intégré un autre gabarit complété manuellement pour le menu.

Firebug ne m'indique pas d'erreur de script, donc je penche plutôt sur un problème d'appel du script.
Mais je ne sais pas où regarder.

Quelqu'un aurait-il une piste à me soumettre?

Cordialement,
Pierre
Développeur du dimanche (et un peu du vendredi aussi Wink

)

[Résolu] Application de CSS dans Menu - jissey - 01/06/2012

bonjour,
il semblerait que tu es au moins 2 gabarits.
Dans la page aménagements privés, c'est le menu CMSMS ou tu l'as codé en dur?

[Résolu] Application de CSS dans Menu - Piet - 01/06/2012

Là, c'est du dur, mais il doit ressembler à ça...

[Résolu] Application de CSS dans Menu - Piet - 01/06/2012

J'ai trouvé le problème, mais je n'ai pas encore la solution... Big Grin

Mon menu n'affiche pas le premier enfant de 'reference'.
Ca doit donc venir du gabarit menu, je suppose.

J'ai ajouté 2 autres pages test et ça s'affiche correctement.

Si une bonne âme peut regarder le code et me dire si tout semble en ordre, car moi je ne vois pas où se situe le souci.

Code :
[== XHTML ==]

{* CSS classes used in this template:

.currentpage - The active/current page

.bullet_sectionheader - To style section header

hr.separator - To style the ruler for the separator *} 

{if $count > 0}

{* ajout de topnav *}

<ul class="clearfix topnav">

{foreach from=$nodelist item=node}

{if $node->depth > $node->prevdepth}

{* ajout de subnav à list des enfants *}

{repeat string="<ul class='subnav'>" 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->current == true}

<li><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}

<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}

{* on transforme le section header de la page parent en lien # *}

<li class="sectionheader"><a href="#">{$node->menutext}</a>

{elseif $node->type == 'separator'}

<li style="list-style-type: none;"> <hr class="separator" />

{else}

<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>

</ul>

{/if}

Merci d'avance !
Cordialement,

Pierre

[Résolu] Application de CSS dans Menu - Jean le Chauve - 01/06/2012

Mets-toi en mod_rewriting, ça devrait corriger ton problème.
En fait, l'ancre de ton ancien site pointe vers index.html# et ici vers cms/#

[Résolu] Application de CSS dans Menu - Piet - 01/06/2012

Quand on est lent, on avance lentement, ma page était tout simplement masquée dans les options...

J'aurais sans doute encore besoin de votre aide soon :p

Merci de vos précieux conseils...