Script menu et Css

Signaler
Messages postés
3
Date d'inscription
samedi 15 octobre 2005
Statut
Membre
Dernière intervention
26 novembre 2007
-
Messages postés
3
Date d'inscription
samedi 15 octobre 2005
Statut
Membre
Dernière intervention
26 novembre 2007
-
Bonjours,
je  travail sur ce menu. il fonctionne très bien mais tous les liens du site prennent le style du menu.
y aurait-il moyen de crééer une classe du style : #monmenu.li{......}
?
J'ai beau essayer dans tous les sens, je n'y arrive pas.
Merci de votre aide.

Le code :

<script src="<{xoImgUrl /mootools.js}>" type="text/javascript"></script>
<script type="text/javascript">
    Window.onDomReady(function(){
        Window.disableImageCache(); // Not sure it is required but I left it
        $S('#popMenu li a').each(function(el) {   
            var effect = el.effect('background-position', {duration: 500, wait: false, transition: fx.Transitions.circOut, fps: 50}).set(-300);
            el.addEvent('mouseover', effect.goTo.pass(0, effect)).addEvent('mouseout', effect.goTo.pass(-300, effect));
        });
    });
</script>
<style type="text/css">
ul {
list-style: none;
margin: 0; padding: 0;
}
li {
display: block; width: 305px;
margin-bottom: 5px;
}
a
{
display: block; color: #666;
text-decoration: none; padding: 10px 20px;
background: #eee url(<{xoImgUrl /background.png}>) no-repeat -300px 0px;
}
a:hover {
color: #c2c2c2;
}
a span {
width: 261px;
display: block;
}
</style>
               
            <li>[<{$xoops_url}> <{$block.lang_home}>]</li>
            <{foreach item=module from=$block.modules}>
                <li>[<{$xoops_url}>/modules/<{$module.directory}>/ <{$module.name}>]</li>
                <{foreach item=sublink from=$module.sublinks}>
                <li>[<{$sublink.url}> <{$sublink.name}>]</li>
                <{/foreach}>
            <{/foreach}>

3 réponses

Messages postés
1251
Date d'inscription
mercredi 7 août 2002
Statut
Modérateur
Dernière intervention
10 avril 2013

<style type="text/css">
ul {
list-style: none;
margin: 0; padding: 0;
}
li {
display: block; width: 305px;
margin-bottom: 5px;
}
li a
{
display: block; color: #666;
text-decoration: none; padding: 10px 20px;
background: #eee url(<{xoImgUrl /background.png}>) no-repeat -300px 0px;
}
li a:hover {
color: #c2c2c2;
}
li a span {
width: 261px;
display: block;
}
</style>

Nickadele
----------------------------------------------
non, ma belle ne s'appel pas Adèle
Messages postés
3
Date d'inscription
samedi 15 octobre 2005
Statut
Membre
Dernière intervention
26 novembre 2007

Bonjour Nickadele,
Merci pour la réponse, mais ca ne fonctionne pas. je cherche a intégré ce menu dans XOOPS, et les balises "li" et "a" sont déjas définies dans la feuille de style du CMS. serait-il possible que la fonction "#popMenu li a" fasse appel a une classe css du genre : maclasse.li {...etc . de manière a ne pas interférer avec la feuille de style du CMS. quelque chose qui ressemblerais à : "#popMenu maclasse.li maclasse.a"
Merci A+
Messages postés
3
Date d'inscription
samedi 15 octobre 2005
Statut
Membre
Dernière intervention
26 novembre 2007

A force d'essais, voici la solution que je cherchais, pour ceux que ca interresserai. :

<script src="<{xoImgUrl /mootools.js}>" type="text/javascript"></script>
<script type="text/javascript">
    Window.onDomReady(function(){
        Window.disableImageCache(); // Not sure it is required but I left it
        $S('#popmenu li a').each(function(el) {   
            var effect = el.effect('background-position', {duration: 900, wait: false, transition: fx.Transitions.circOut, fps: 50}).set(-300);
            el.addEvent('mouseover', effect.goTo.pass(0, effect)).addEvent('mouseout', effect.goTo.pass(-300, effect));
        });
    });
</script>
 <style type="text/css">
 #popmenu {
}
#popmenu ul {
list-style: none;
margin: 0; padding: 0;
}
#popmenu li {
display: block; width: 305px;
margin-bottom: 5px;
}
#popmenu a
{
display: block; color: #666;
text-decoration: none; padding: 10px 20px;
background: #eee url(<{xoImgUrl /background.png}>) no-repeat -300px 0px;
}
#popmenu a:hover {
color: #c2c2c2;
}
#popmenu a span {
width: 261px;
display: block;
}

</style>

               
            <li>[<{$xoops_url}> <{$block.lang_home}>]</li>
            <{foreach item=module from=$block.modules}>
                <li>[<{$xoops_url}>/modules/<{$module.directory}>/ <{$module.name}>]</li>
                <{foreach item=sublink from=$module.sublinks}>
                <li>[<{$sublink.url}> <{$sublink.name}>]</li>
                <{/foreach}>
            <{/foreach}>

encore merci Nickadele
A+