Fork me on GitHub




(1) 2 »


alain01
Multimenu : donnez ici vos exemples de réalisation
#1
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
Bonjour,

Merci de ne pas poluer ce topic par des questions du genre "j'ai un bug dans..." mais venez ici donner vos liens de sites qui utilisent le module multimenu de façon originale en n'oubliant pas d'indiquer dans quel bloc se trouve multimenu et quel est le type de munu utilisé.
Le but de ce topic est simplement de vous montrer ce qu'il est possible de faire avec Multimenu et de nous donner à tous de nouvelles idées originales.

Je commence...

Le site : Le site de la Ligue Rhône-Alpes de Volleyball

Bloc de gauche : Menu principal
Type : menu dynamique vertical

Bloc de gauche : Proposer une info
Type : [image] avec texte

Navigation en haut (Accueil / La Ligue / La Sportive / Arbitrage / La Technique / Le Beach)
Type : menu dynamique horizontal css
Nota : intégré au thème
Remarque : j'ai pu ainsi virer mon "menuTigra" et ainsi je pilote mes menus depuis l'interface XOOPS et pas depuis un transfert de fichiers FTP menutigra.

Posté le : 23/04/2006 19:49

Edité par alain01 sur 24/04/2006 11:51:38

Open in new window
Partager Twitter Partagez cette article sur GG+
Rapport Haut
blueteen
Re: Multimenu : donnez ici vos exemples de réalisation
#2
Xoops accro
Inscrit: 15/07/2004 11:16
Messages: 4763
salut !
bonne idée !
très réussie ton intégration !
tu as eu beaucoup de modifications à faire pour faire apparaître les 'V' lors du passage de la souris (et pour le bandeau bleu sur les menus déroulés) ?
que du css non ?
que penses-tu du principe de préciser le code modifié (ou alors juste à la demande expresse) ?

un peu plus classique, mais qui nous montre une personnalisation graphique réussie :
http://www.aka.org/

menu de navigation horizontal :
switch vertical (il n'y a pas de sous-liens pour les anonymes).
légèrement modifié pour gérer automatiquement les puces qui se trouvent entre les liens.

pour les menus dans la colonne de gauche : switch vertical

Posté le : 24/04/2006 09:40
Partager Twitter Partagez cette article sur GG+
Rapport Haut
alain01
Re: Multimenu : donnez ici vos exemples de réalisation
#3
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
Salut,
Pas de problème pour donner mon code,
le but de ce topic étant que chacun apporte son "+" afin que de nouvelles idées originales jaillissent et que cela puisse inspirer nos (dont moi) Xoopsiens.

Pour le menu du haut, AUCUNE modification dans le fichier template,

j'ai "juste" ajouté quelques lignes dans les 2 fichers css liés au menu dynamique css horizontal.

Ces 2 fichiers sont :
/modules/multiMenu/modules/multiMenu/script/08/basic_dd.css (Firefox et autres naigateurs)
/modules/multiMenu/modules/multiMenu/script/08/basic_dd_ie.css (IE)

de plus j'ai ajouté 2 images :
vu_vert.gif (la coche jaune ombrée) sur fond bleu
vu-gris.gif , le fond bleu sans coche

Bien sur, vu-gris.gif peut-être une coche grisée, mais j'ai préféré ne rien mettre, car sinon, l'affichage est un peu chargé.

Enfin, pour la bande bleue, c'est un lien type "note"

Ci-dessous le fichier basic_dd.css
Citation :

/* common styling */
/* set up the overall width of the menuhcss div, the font and the margins */

li { margin-left: 0;}

.menuhcss {
font-family: arial, sans-serif;
margin:0 0;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menuhcss ul {
padding:0;
margin:0;
list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menuhcss ul li {
float:left;
position:relative;
list-style-type: none;
}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menuhcss ul li a, .menuhcss ul li a:visited {
display: block;
text-align: left;
text-decoration: none;
height: 20px;
color: #093F7D;
border: 1px solid #FFCC33;
border-width: 0px 1px 0px 1px;
background: transparent;
line-height: 20px;
font-size: 11px;
padding-left: 5px;
}
/* make the dropdown ul invisible */
.menuhcss ul li ul {
display: none;
}

/* specific to non IE browsers */
/* set the background and foreground color of the main menuhcss li on hover */
.menuhcss ul li:hover a {
color: #FFCC33; /*background:#b3ab79;*/
background: #6096d4;
}
/* make the sub menuhcss ul visible and position it beneath the main menuhcss list item */
.menuhcss ul li:hover ul {
display:block;
position:absolute;
top:21px;
}
/* style the background and foreground color of the submenu links */
.menuhcss ul li:hover ul li a {
display: block;
background: #FFCC33;
color: #093F7D;
padding-left: 17px;
text-align: left;
background-image: url(vu_gris.gif);
background-repeat: repeat-y;
background-position: left;

}
/* style the background and forground colors of the links on hover */
.menuhcss ul li:hover ul li a:hover {
padding-left: 17px;
background-image: url(vu_vert.gif);
background-repeat: no-repeat;
background-position: left;

}

/*
.menuhcss ul li:hover ul li.cat a {
background:#ffffff;
color:red;
}

.menuhcss ul li:hover ul li.note a {
background:#ffffff;
color:green;
}
*/

.menuhcss ul li:hover a.cat {
background:#ffffff;
color:red;
}

.menuhcss ul li:hover a.cat:hover{
background:#ffffff;
color:blue;
}

.menuhcss ul li:hover a.note {
background: #6096d4;
color: #ffCC33;
font-style: italic;
background-image: url(vu_gris.gif);

}

.menuhcss ul li:hover a.note:hover {
background:#ffCC33;
color:blue;

Attacher un fichier:


gif  vu_vert.gif (0.86 KB)
1488_444c94f7c356e.gif 15X20 px

gif  vu_gris.gif (0.81 KB)
1488_444c950be753d.gif 15X20 px

Posté le : 24/04/2006 11:04

Edité par alain01 sur 24/04/2006 11:55:42

Open in new window
Partager Twitter Partagez cette article sur GG+
Rapport Haut
blueteen
Re: Multimenu : donnez ici vos exemples de réalisation
#4
Xoops accro
Inscrit: 15/07/2004 11:16
Messages: 4763
merci !
en fait pour le bandeau bleu, je parlais bien de : vu_gris.gif
ça rend bien

ps : je te laisse essayer le template sur ton autre sujet, pour régler ton souci avec la note et le lien créé dessus.

Posté le : 24/04/2006 11:12
Partager Twitter Partagez cette article sur GG+
Rapport Haut
alanpix
Re: Multimenu : donnez ici vos exemples de réalisation
#5
Aspirant
Inscrit: 14/03/2006 22:45
Messages: 34
Super le site de la ligue de Volley (cool ça donne envie de s'investir dans multimenu !!!
J'ai un comportement un peu capricieux du menu horizontal sous Firefox : le déroulant ne se maintient qu'en descendant rapidement la souris, callage CSS ?

Posté le : 24/04/2006 12:49
Partager Twitter Partagez cette article sur GG+
Rapport Haut
blueteen
Re: Multimenu : donnez ici vos exemples de réalisation
#6
Xoops accro
Inscrit: 15/07/2004 11:16
Messages: 4763
il faudrait peut-être remonter le sous-menu d'1px.
en effet si on est sur la bordure du lien principal, le sous-menu se ferme, donc il faut peut-être faire chevaucher à peine le sous-menu !

Posté le : 24/04/2006 12:52
Partager Twitter Partagez cette article sur GG+
Rapport Haut
alain01
Re: Multimenu : donnez ici vos exemples de réalisation
#7
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
effectivement, pour régler ce problème j'ai mis :
border-width: 0px 1px 0px 1px;
ce qui enleve les bordures hautes et basses.
Il faut placer le menu niveau 2 à la même hauteur que la fin de hauteur du menu niveau 1.

Posté le : 24/04/2006 14:21

Open in new window
Partager Twitter Partagez cette article sur GG+
Rapport Haut
PinMaster
Re: Multimenu : donnez ici vos exemples de réalisation
#8
Supporter Xoops
Inscrit: 02/10/2004 14:09
Messages: 370
Moi, c'est simple... j'utilise un combo personnel ce qui a pour effet de rendre le menu très compact.
-> Pour le voir : www.lipom.org

C'est le menu principal...

Posté le : 25/04/2006 17:07
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Solo71
Re: Multimenu : donnez ici vos exemples de réalisation
#9
Admin Frxoops
Inscrit: 04/02/2003 07:37
De Belgique
Messages: 3376
Tu peux mettre le code de ta combo ?


Posté le : 25/04/2006 19:38
Partager Twitter Partagez cette article sur GG+
Rapport Haut
PinMaster
Re: Multimenu : donnez ici vos exemples de réalisation
#10
Supporter Xoops
Inscrit: 02/10/2004 14:09
Messages: 370
Bien chef

Alors commençons par le template :
<!-- Start multiMenu <{$block.mm}> -->
<{counter start=0 print=false}><{assign var=top value="1"}><{assign var=dl value="0"}><{assign var=dd value="0"}>
<dl id="dyn_menu"><{foreach item=imenu from=$block.contents}>
<{if $submenu == "4"}>
<!-- Categorie -->
    <{if $dl == 1}></ul></dd></dl></li><{/if}><{if $dd == 1}></ul></dd><{/if}><{assign var=top value="1"}><{assign var=dd value="0"}><{assign var=dl value="0"}>
    <dt onclick="javascript:dyn_montre('dyn_smenu<{$count}>');" onmouseover="this.className='bg_dtahover'" onmouseout="this.className='bg_dta';" class="bg_dta"><{$link}><{$title}><{$image}><{$a}></dt>
<{elseif $submenu == "0"}>
<!-- Main link -->
    <{if $dd == 0}><dd id='dyn_smenu<{$count}>'><ul><{/if}>
    <{counter assign=count print=false}>
     <{if $imenu.submenu == "1" OR $imenu.submenu == "2"}>
    <{if $dl==1}></ul></dd></dl></li><{assign var=dl value="0"}><{/if}>
    <{if $dl == 0}><li><dl class="dyn_menuA"><{assign var=dl value="1"}><{/if}>
        <dt class="dyn_menudt" onmouseover="javascript:dyn_montreA('dyn_smenuA<{$count}>');" onmouseout="javascript:dyn_montreA();"><a <{if $linkurl}><{$target}>href="<{$linkurl}>"<{/if}> title="<{$alt_title}>"><img src="<{$xoops_url}>/modules/multiMenu/script/images/arrow2.gif" align="right" alt="<{$alt_title}>" /><{$image}><{$title}></a></dt><dd id="dyn_smenuA<{$count}>" onmouseover="javascript:dyn_montreA('dyn_smenuA<{$count}>');" onmouseout="javascript:dyn_montreA();"><ul>
    <{else}>
        <{if $dl == 1}></ul></dd></dl></li><{assign var=dl value="0"}><{/if}>
        <li class="dyn_menuli"><a <{if $linkurl}><{$target}>href="<{$linkurl}>"<{/if}> title="<{$alt_title}>"><{$image}><{$title}></a></li>
    <{/if}>
    <{assign var=top value="0"}><{assign var=dd value="1"}>
<{elseif $submenu == "1" OR $submenu == "2"}>
<!-- Sublinks -->
        <li><a <{if $linkurl}><{$target}>href="<{$linkurl}>" <{/if}>title="<{$alt_title}>"><{$image}><{$title}></a></li>
    <{assign var=top value="0"}>
<{elseif $submenu == "3"}>
<!-- Note -->
        <li class="dyn_note"><{$link}><{$title}><{$image}><{$a}></li>
    <{assign var=top value="1"}>
<{/if}>

<{assign var=submenu     value=$imenu.submenu}>
<{assign var=linkurl     value=$imenu.linkurl}>
<{assign var=link     value=$imenu.link}>
<{assign var=counter     value=$count}>
<{assign var=target     value=$imenu.target}>
<{assign var=alt_title     value=$imenu.alt_title}>
<{assign var=image     value=$imenu.image}>
<{assign var=title     value=$imenu.title}>
<{assign var=a         value=$imenu.a}>

<{/foreach}>

<{if $submenu == "4"}>
<!-- Categorie -->
    <{if $dd == 1}></ul></dd><{/if}>
    <{assign var=top value="1"}>
    <dt onclick="javascript:dyn_montre('dyn_smenu<{$count}>');" onmouseover="this.className='bg_dtahover'" onmouseout="this.className='bg_dta';" class="bg_dta"><{$link}><{$title}><{$image}><{$a}></dt>
    <{assign var=dd value="0"}>
<{elseif $submenu == "0"}>
<!-- Main link -->
    <{if $dd == 0}><dd id='dyn_smenu<{$count}>'><ul><{/if}>
    <{counter assign=count print=false}>
        <li class="dyn_menuli"><a <{if $linkurl}><{$target}>href="<{$linkurl}>" <{/if}>title="<{$alt_title}>"><{$image}><{$title}></a></li>
    <{assign var=top value="0"}><{assign var=dd value="1"}>
<{elseif $submenu == "1" OR $submenu == "2"}>
<!-- Sublinks -->
        <li><a <{if $linkurl}><{$target}>href="<{$linkurl}>"<{/if}> title="<{$alt_title}>"><{$image}><{$title}></a></li>
    <{assign var=top value="0"}>
<{elseif $submenu == "3"}>
<!-- Note -->
    <li class="dyn_note"><{$link}><{$title}><{$image}><{$a}></li>
    <{counter assign=count print=false}>
    <{assign var=top value="1"}>
<{/if}>
    <{if $dd == 1}></ul></dd><{/if}>
</dl><br/><{$smarty.server.HTTP_USER_AGENT}>
<!-- End multiMenu <{$block.mm}> -->


Le partie javascript :
// Javascript dédié au menu dynamique du site LiPoM
function dyn_montre(id) {
var d = document.getElementById(id);
    if (document.getElementById('dyn_smenu')) {document.getElementById('dyn_smenu').style.display='none';}
    if (document.getElementById('dyn_smenuA')) {document.getElementById('dyn_smenuA').style.display='none';}
    for (var i = 1; i<=30; i++) {
        if (document.getElementById('dyn_smenu'+i)) {document.getElementById('dyn_smenu'+i).style.display='none';}
        if (document.getElementById('dyn_smenuA'+i)) {document.getElementById('dyn_smenuA'+i).style.display='none';}
    }
if (d) {d.style.display='block';}
}
function dyn_montreA(id) {
var d = document.getElementById(id);
    if (document.getElementById('dyn_smenuA')) {document.getElementById('dyn_smenuA').style.display='none';}
    for (var i = 1; i<=30; i++) {
        if (document.getElementById('dyn_smenuA'+i)) {document.getElementById('dyn_smenuA'+i).style.display='none';}
    }
if (d) {d.style.display='block';}
}


Le css dédié IE :
/* Definition utilisee pour le bloc multimenu */
#dyn_menu {
    width: 100%;
    cursor: pointer;
}
dl, dt, dd, ul, li {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
#dyn_menu dd {
    display: none;
}
#dyn_menu a {
    text-decoration: none;
}
#dyn_menu dt {
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-weight: bold;
    border:1px solid #d6ffff;
    background: #76809C;
    color: #d6ffff;
}
#dyn_menu .bg_dta {
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-weight: bold;
    border:1px solid #d6ffff;
    background: #76809C;
    color: #d6ffff;
    display: block;
}
#dyn_menu .bg_dta a {
    color: #d6ffff;
}
#dyn_menu .bg_dtahover {
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-weight: bold;
    border:1px solid #16357A;
    background: #d6ffff;
    color: #16357A;
}
#dyn_menu .bg_dtahover a {
    color: #16357A;
}
.dyn_menuA dd {
    position :absolute;
    z-index: 100;
    left : 17.2em;
    margin-top: -2.3em;
    width: 10em;
    background: #A9BFCB;
    border: 1px solid #76809C;
}
#dyn_menu .dyn_menuA dt {
    height: 100%;display: block;
    margin-bottom: 1px; margin-top: -13px;
    border: 0 none;
    text-align: center;
    background: #fff;
}
#dyn_menu .dyn_menuA dt a {
    display: block;
    border-left: 8px solid #BDCEE0;
    color: #334D55; background-color: #FFFFFF;
}
#dyn_menu .dyn_menuA dt a:hover {
    border-left: 8px solid #DD6900;
    color: #FFFFFF;  background-color: #BDCEE0;
}
.dyn_menuli, .dyn_menuA li {
    margin-bottom: 1px; margin-left: -16px;
    border: 0 none;
    text-align: center;
    background: #fff;
}
.dyn_menuli a, .dyn_menuA li a {
    height: 100%;
    display: block;
    padding: 4px; 
     border-left: 8px solid #BDCEE0;
    color: #334D55; background-color: #FFFFFF;
}
.dyn_menuli a:hover, .dyn_menuA li a:hover {
    height: 100%;
    color: #FFFFFF;  background-color: #BDCEE0;
    border-left: 8px solid #DD6900;
}
.dyn_menuA li {
    font-size: 85%;
}
.dyn_note {
    cursor: default;
    text-align: center;
    margin-bottom: 1px; padding: 4px;
    color: #76809C; background-color: #BDCEE0;
}


Et pour finir le css dédié firefox/netscape
/* Définition utilisée pour le bloc multimenu */
#dyn_menu {
    width: 100%;
    cursor: pointer;
}
dl, dt, dd, ul, li {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
#dyn_menu dd {
    display: none;
}
#dyn_menu a {
    text-decoration: none;
} 
#dyn_menu dt {
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-weight: bold;
    border:1px solid;
    background: #76809C;
    color: #d6ffff;
}
#dyn_menu dt a {
    color: #d6ffff;
    display: block;
    border: 0 none;
} 
#dyn_menu dt:hover {
    background: #d6ffff;
    color: #16357A;
}
#dyn_menu dt a:hover {
    background: #d6ffff;
    color: #16357A;
}
 
.dyn_menuA dd {
    position :absolute;
    z-index: 100;
    left : 18em;
    margin-top: -2em;
    width: 10em;
    background: #A9BFCB;
    border: 1px solid #76809C;
}
#dyn_menu .dyn_menuA dt {
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #fff;
    border: 0 none;
    margin-bottom: 1px;
}
#dyn_menu .dyn_menuA dt a {
    border-left: 8px solid #BDCEE0;
    color: #334D55; background-color: #FFFFFF;
}
#dyn_menu .dyn_menuA dt a:hover {
    color: #FFFFFF;  background-color: #BDCEE0;
    border-left: 8px solid #DD6900;
}
.dyn_menuli, .dyn_menuA li {
    text-align: center;
    background: #fff;
}
.dyn_menuli a, .dyn_menuA li a {
    display: block;
    margin-bottom: 1px; padding: 4px;
    border: 0 none;
    border-left: 8px solid #BDCEE0;
    color: #334D55; background-color: #FFFFFF;
}
.dyn_menuli a:hover, .dyn_menuA li a:hover {
    color: #FFFFFF;  background-color: #BDCEE0;
    border-left: 8px solid #DD6900;
}
.dyn_menuA li {
    font-size: 85%;
}
.dyn_note {
    cursor: default;
    text-align: center;
    margin-bottom: 1px; padding: 4px;
    color: #76809C; background-color: #BDCEE0;
}


Et voilou, à bientôt.

Posté le : 26/04/2006 13:24
Partager Twitter Partagez cette article sur GG+
Rapport Haut

 Haut   Précédent   Suivant
(1) 2 »



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

87 Personne(s) en ligne (72 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 87 | Plus ...