menu horizontal

Commencé par VV93,

12 messages dans ce sujet

Posté(e) · Signaler ce message

bonjour a tous

merci dans un premier temps pour votre aide

j'aimerai savoir si quelqu'un pourrai m'aider a faire un menu horizontal et non verticale comme il existe par défaut

je pas mal galèrer pour cela et la ma tête est pleine merci

Partager ce message

Lien à poster
Partager sur d’autres sites

Posté(e) · Signaler ce message

bonjour a tous

merci dans un premier temps pour votre aide

j'aimerai savoir si quelqu'un pourrai m'aider a faire un menu horizontal et non verticale comme il existe par défaut

je pas mal galèrer pour cela et la ma tête est pleine merci

Auriez vous un modèle à nous montrer ce serait plus simple car il y a 200 méthodes pour faire des menus horizontaux

Partager ce message

Lien à poster
Partager sur d’autres sites

Posté(e) · Signaler ce message

Auriez vous un modèle à nous montrer ce serait plus simple car il y a 200 méthodes pour faire des menus horizontaux

voila un menu qui me semble correspondre a ce que je veux

http://slindi.com/

incluant les sous menus

exemple :

1-hi-fi

-->a Televisions

-->a1 plasma

merci de ce que vous faite pour peel

Partager ce message

Lien à poster
Partager sur d’autres sites

Posté(e) · Signaler ce message

bonsoir,

le code php

<ul class="menu2">

<?php

$sqla="select * from ".$db_prefixe."_categories where etat='1' order by ordre asc";

$qcat=mysql_query($sqla);

while ( $cc=mysql_fetch_array($qcat)){

$cat=$cc['nom'];

$cid=$cc['id'];

?>

<li class="top">

<a href="<?php echo $wwwroot;?>/categorie/<?php echo $nomc;?>-<?php echo $cid;?>.html" class="top_link"><span class="down">

<?php echo $cat;?>

</span></a>

<ul class="sub">

<li><a href="<?php echo $wwwroot;?>/index.php?catid=<?php echo $cid;?>&trie=croiss&<?php echo $filtre;?>" class="fly">Prix croissants</a></li>

<li><a href="<?php echo $wwwroot;?>/index.php?catid=<?php echo $cid;?>&trie=decroiss&<?php echo $filtre;?>" class="fly">Prix décroissants</a></li>

</ul>

</li>

</ul>

et ensuite le css

.menu2 {

padding:0px;

margin:0;

list-style:none;

height:25px;

background: url(http://soundofarthur.com/images/barre.jpg) repeat-x;

position:relative;

font-family:arial, verdana, sans-serif;

}

.menu2 li.top {

display:block;

float:left;

position:relative;

}

.menu2 li a.top_link {

color : #FFF;

cursor : pointer;

display : block;

float : left;

font-family : Helvetica;

font-size : 11px;

font-weight : bold;

height : 25px;

line-height : 25px;

padding-bottom : 0;

padding-left : 12px;

padding-right : 0;

padding-top : 0;

text-decoration : none;

}

.menu2 li a.top_link span {

float:left;

display:block;

padding:0 24px 0 12px;

height:25px;

}

/* la barre du haut avec la hauteur et l'image */

.menu2 li a.top_link span.down {

float:left;

display:block;

padding:0 2px 0 12px;

height:25px;

background:url(http://soundofarthur.com/images/barre.jpg) no-repeat right top;

}

/* les liens de la barre du haut */

.menu2 li a.top_link:hover {

background-repeat : no-repeat;

color : #fff;

}

/* les liens de la barre du haut avec le hover en rouge */

.menu2 li:hover > a.top_link {

background-repeat : no-repeat;

color : #FF0000;

}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.menu2 a:hover {

visibility:visible;

}

.menu2 li:hover {

position:relative;

z-index:200;

}

/* keep the 'next' level invisible by placing it off screen. */

.menu2 ul, .menu2 :hover ul ul, .menu2 :hover ul :hover ul ul,.menu2 :hover ul :hover ul :hover ul ul,.menu2 :hover ul :hover ul :hover ul :hover ul ul {

position:absolute;

left:-9999px;

top:-9999px;

width:0;

height:0;

margin:0;

padding:0;

list-style:none;

}

.menu2 :hover ul.sub {

left:14px;

top:25px;

background: #F0F0F0;

padding:0;

border:1px solid #999999;

white-space:nowrap;

width:110px;

height:auto;

}

.menu2 :hover ul.sub li {

display:block;

height:20px;

position:relative;

float:left;

width:110px;

}

/* menu des liens prix croissant */

.menu2 :hover ul.sub li a {

border-bottom-color : #fff;

border-bottom-style : solid;

border-bottom-width : 0;

border-left-color : #fff;

border-left-style : solid;

border-left-width : 0;

border-right-color : #fff;

border-right-style : solid;

border-right-width : 0;

border-spacing : 2pt 2pt;

border-top-color : #fff;

border-top-style : solid;

border-top-width : 0;

color : #000000;

display : block;

font-size : 11px;

height : 20px;

line-height : 20px;

text-decoration : none;

text-indent : 5px;

width : 110px;

}

.menu2 :hover ul.sub li a.fly {

background:#F0F0F0 url(menplus.gif) 80px 7px no-repeat;

}

.menu2 :hover ul.sub li a:hover {

background:#C0C0C0;

color:#FFFFFF;

}

.menu2 :hover ul.sub li a.fly:hover {

background:#COCOCO url(prodrop2/arrow_over.gif) 80px 7px no-repeat;

color:#FFFFFF;

}

.menu2 :hover ul li:hover > a.fly {

background-color : #COCOCO;

background-image : url(prodrop2/arrow_over.gif);

background-position : 80px 7px;

background-repeat : no-repeat;

color : #000000;

}

.menu2 :hover ul :hover ul,.menu2 :hover ul :hover ul :hover ul,.menu2 :hover ul :hover ul :hover ul :hover ul,.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul {

background-color : #F0F0F0;

height : auto;

left : 110px;

padding-bottom : 0;

padding-left : 0;

padding-right : 0;

padding-top : auto;

border:1px solid #999999;

top : 0px;

white-space : nowrap;

width : 110px;

z-index : 200;

}

ça devrait donner qqchose logiquement .....

c'est ce qu'il y a sur soundofarthur.com

Partager ce message

Lien à poster
Partager sur d’autres sites

Posté(e) · Signaler ce message

bonsoir,

le code php

<ul class="menu2">

<?php

$sqla="select * from ".$db_prefixe."_categories where etat='1' order by ordre asc";

$qcat=mysql_query($sqla);

while ( $cc=mysql_fetch_array($qcat)){

$cat=$cc['nom'];

$cid=$cc['id'];

?>

<li class="top">

<a href="<?php echo $wwwroot;?>/categorie/<?php echo $nomc;?>-<?php echo $cid;?>.html" class="top_link"><span class="down">

<?php echo $cat;?>

</span></a>

<ul class="sub">

<li><a href="<?php echo $wwwroot;?>/index.php?catid=<?php echo $cid;?>&trie=croiss&<?php echo $filtre;?>" class="fly">Prix croissants</a></li>

<li><a href="<?php echo $wwwroot;?>/index.php?catid=<?php echo $cid;?>&trie=decroiss&<?php echo $filtre;?>" class="fly">Prix décroissants</a></li>

</ul>

</li>

</ul>

et ensuite le css

.menu2 {

padding:0px;

margin:0;

list-style:none;

height:25px;

background: url(http://soundofarthur.com/images/barre.jpg) repeat-x;

position:relative;

font-family:arial, verdana, sans-serif;

}

.menu2 li.top {

display:block;

float:left;

position:relative;

}

.menu2 li a.top_link {

color : #FFF;

cursor : pointer;

display : block;

float : left;

font-family : Helvetica;

font-size : 11px;

font-weight : bold;

height : 25px;

line-height : 25px;

padding-bottom : 0;

padding-left : 12px;

padding-right : 0;

padding-top : 0;

text-decoration : none;

}

.menu2 li a.top_link span {

float:left;

display:block;

padding:0 24px 0 12px;

height:25px;

}

/* la barre du haut avec la hauteur et l'image */

.menu2 li a.top_link span.down {

float:left;

display:block;

padding:0 2px 0 12px;

height:25px;

background:url(http://soundofarthur.com/images/barre.jpg) no-repeat right top;

}

/* les liens de la barre du haut */

.menu2 li a.top_link:hover {

background-repeat : no-repeat;

color : #fff;

}

/* les liens de la barre du haut avec le hover en rouge */

.menu2 li:hover > a.top_link {

background-repeat : no-repeat;

color : #FF0000;

}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.menu2 a:hover {

visibility:visible;

}

.menu2 li:hover {

position:relative;

z-index:200;

}

/* keep the 'next' level invisible by placing it off screen. */

.menu2 ul, .menu2 :hover ul ul, .menu2 :hover ul :hover ul ul,.menu2 :hover ul :hover ul :hover ul ul,.menu2 :hover ul :hover ul :hover ul :hover ul ul {

position:absolute;

left:-9999px;

top:-9999px;

width:0;

height:0;

margin:0;

padding:0;

list-style:none;

}

.menu2 :hover ul.sub {

left:14px;

top:25px;

background: #F0F0F0;

padding:0;

border:1px solid #999999;

white-space:nowrap;

width:110px;

height:auto;

}

.menu2 :hover ul.sub li {

display:block;

height:20px;

position:relative;

float:left;

width:110px;

}

/* menu des liens prix croissant */

.menu2 :hover ul.sub li a {

border-bottom-color : #fff;

border-bottom-style : solid;

border-bottom-width : 0;

border-left-color : #fff;

border-left-style : solid;

border-left-width : 0;

border-right-color : #fff;

border-right-style : solid;

border-right-width : 0;

border-spacing : 2pt 2pt;

border-top-color : #fff;

border-top-style : solid;

border-top-width : 0;

color : #000000;

display : block;

font-size : 11px;

height : 20px;

line-height : 20px;

text-decoration : none;

text-indent : 5px;

width : 110px;

}

.menu2 :hover ul.sub li a.fly {

background:#F0F0F0 url(menplus.gif) 80px 7px no-repeat;

}

.menu2 :hover ul.sub li a:hover {

background:#C0C0C0;

color:#FFFFFF;

}

.menu2 :hover ul.sub li a.fly:hover {

background:#COCOCO url(prodrop2/arrow_over.gif) 80px 7px no-repeat;

color:#FFFFFF;

}

.menu2 :hover ul li:hover > a.fly {

background-color : #COCOCO;

background-image : url(prodrop2/arrow_over.gif);

background-position : 80px 7px;

background-repeat : no-repeat;

color : #000000;

}

.menu2 :hover ul :hover ul,.menu2 :hover ul :hover ul :hover ul,.menu2 :hover ul :hover ul :hover ul :hover ul,.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul {

background-color : #F0F0F0;

height : auto;

left : 110px;

padding-bottom : 0;

padding-left : 0;

padding-right : 0;

padding-top : auto;

border:1px solid #999999;

top : 0px;

white-space : nowrap;

width : 110px;

z-index : 200;

}

ça devrait donner qqchose logiquement .....

c'est ce qu'il y a sur soundofarthur.com

Chapo pour le code

Bon je suis en train de compiler la v4, je le mettrais à dispo dans un module téléchargeable pour tt le monde

Partager ce message

Lien à poster
Partager sur d’autres sites

Posté(e) · Signaler ce message

pas franchement top le code ... ( j'ai ete un peut vite je crois) :huh:

y marche pas j'ai oublier }

</li>

=====>>>> la ICI }

</ul>

et ensuite le css

.menu2 {

bonne compilation :)

Partager ce message

Lien à poster
Partager sur d’autres sites

Posté(e) · Signaler ce message

pas franchement top le code ... ( j'ai ete un peut vite je crois) :huh:

y marche pas j'ai oublier }

bonne compilation :)

super mais les 2 bouts de code je les mets ou

Partager ce message

Lien à poster
Partager sur d’autres sites

Posté(e) · Signaler ce message

alors le css dans une feuille de syle /lib/css/menu.css

du coup il faut appeler cette feuille de style apres la ligne 21 de /modeles/haut.php

<link rel="stylesheet" href="<?php echo $wwwroot;>/lib/css/menu.css " type="text/css" media="screen" />

et le code php il faut le mettre ..... heu .... disons apres la ligne 233 de /modeles/haut.php

mais si vous maitrisez pas trop de php et le code de PEEL .... ça risque d'etre chaud !!!

Faites des backup de vos fichiers sans modif avant toutes manipulation :huh:

Bon courage

Partager ce message

Lien à poster
Partager sur d’autres sites

Posté(e) · Signaler ce message

alors le css dans une feuille de syle /lib/css/menu.css

du coup il faut appeler cette feuille de style apres la ligne 21 de /modeles/haut.php

<link rel="stylesheet" href="<?php echo $wwwroot;>/lib/css/menu.css " type="text/css" media="screen" />

et le code php il faut le mettre ..... heu .... disons apres la ligne 233 de /modeles/haut.php

mais si vous maitrisez pas trop de php et le code de PEEL .... ça risque d'etre chaud !!!

Faites des backup de vos fichiers sans modif avant toutes manipulation :huh:

Bon courage

merci a toi

Partager ce message

Lien à poster
Partager sur d’autres sites

Posté(e) · Signaler ce message

merci a toi

j'ai juste une version 5.3 alors ca devrais pas le faire

Partager ce message

Lien à poster
Partager sur d’autres sites

Posté(e) · Signaler ce message

je ne pense pas que la version soit en cause par rapport au code

l'interet de peel c'est que la version peut etre adaptable et donc evolutive

c'est pour ça que je dis de faire un fichier css particulier

quand au menu il suffit de le mettre dans une fonction elle meme dans un fichier fonction_perso.php

comme ça rien n'est ecrasé ( saufe l'appel à la fonction) quand on change de version de peel

Partager ce message

Lien à poster
Partager sur d’autres sites

Posté(e) · Signaler ce message

je ne pense pas que la version soit en cause par rapport au code

l'interet de peel c'est que la version peut etre adaptable et donc evolutive

c'est pour ça que je dis de faire un fichier css particulier

quand au menu il suffit de le mettre dans une fonction elle meme dans un fichier fonction_perso.php

comme ça rien n'est ecrasé ( saufe l'appel à la fonction) quand on change de version de peel

MERCI je vais testé

Partager ce message

Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !


Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.


Connectez-vous maintenant
Aller sur la liste des sujets Module PEEL Premium pour PEEL SHOPPING

Twitter Advisto ecommerce

Facebook PEEL Shopping