Sign in to follow this  
Followers 0

menu horizontal

Started by VV93,,

12 posts in this topic

Posted · Report post

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

Share this post

: post
Share on other sites

Posted · Report post

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

Share this post

: post
Share on other sites

Posted · Report post

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

Share this post

: post
Share on other sites

Posted · Report post

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

Share this post

: post
Share on other sites

Posted · Report post

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

Share this post

: post
Share on other sites

Posted · Report post

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 :)

Share this post

: post
Share on other sites

Posted · Report post

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

Share this post

: post
Share on other sites

Posted · Report post

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

Share this post

: post
Share on other sites

Posted · Report post

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

Share this post

: post
Share on other sites

Posted · Report post

merci a toi

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

Share this post

: post
Share on other sites

Posted · Report post

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

Share this post

: post
Share on other sites

Posted · Report post

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é

Share this post

: post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing Module PEEL Premium pour PEEL SHOPPING

Twitter Advisto ecommerce

Facebook PEEL Shopping