Version imprimable du sujet

Cliquez ici pour voir ce sujet dans son format original

Forum osCommerce-fr _ Echanges développeurs _ Menu Horizontal + 1 Niveau

Écrit par : delete 27 Jun 2008, 09:47

Voici un bout de code qui malheureusement ne me servira pas (changement de dernière minute), autant que ca profite à quelqu'un d'autre :

Menu horizontal en CSS pur, sans JS, avec affichage du premier niveau de sous-catégories et avec 1 seule requête SQL.

Le CSS vient de chez http://www.cssplay.co.uk/ merci a lui pour ces prouesses en CSS.

Le CSS est donc modifiable pour moduler le menu à sa guise.

CSS:

CODE
<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/doors_drop_line_three.html
Copyright © 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* for this demo only */
/* #nav {margin:20px 0 80px 0;}*/

/* the styling */

#nav {float:left; width:1000px; height:auto; text-align:center ; background: url(../images/cssmenubackground.gif) repeat-x bottom; position:relative;

}

#nav .select, #nav .current {margin:0; padding:0; list-style:none; display:block;}

#nav li {display:inline; margin:0; padding:0;height:auto;}

#nav .select a,
#nav .current a {display:block; height:21px; float:left; padding:0 0 0 3px; text-decoration:none; font-size:11px; font-family: Verdana, Arial, sans-serif; line-height:25px; white-space:nowrap; margin-left:2px; }
* html #nav .select a, * html #nav .current a {width:1px;}

#nav .select a b,
#nav .current a b {height:100%; display:block; padding:0 8px 0 0; color:navy;}

#nav .select a:hover,
#nav .select li:hover a {background-position:0 -75px; cursor:pointer;}

#nav .select a:hover b,
#nav .select li:hover a b {background-position:100% ;color:blue;}

#nav .sub {display:none;}

/* for IE5.5 and IE6 only */
#nav table {position:absolute; border-collapse:collapse; left:0; top:0; font-size:11px;}

#nav .current a {background-position:0 -75px; border-color:#046;}
#nav .current a b {background-position:100% -75px; color:#ff6;}


#nav .sub li a:hover,
#nav .select a:hover .sub li a:hover,
#nav .select li:hover .sub li a:hover {background:#005984 /* url(dropline/sub_sep.gif) top right no-repeat*/ ; color:#fff; }

#nav .sub_active .current_sub a,
#nav .sub_active a:hover {background:#005984 /* url(dropline/sub_sep.gif) top right no-repeat */ ; color:#fff; }

#nav .select li a:hover .sub,
#nav .select li:hover .sub {display:block; position:absolute; width:1000px ; top:21px; left:0; background:#CCCCCC; padding:0; z-index:100; }

#nav .sub, #nav .sub_active {margin:0; padding:0; list-style:none;}
#nav .sub_active {display:block; position:absolute; width:1000px; top:20px; left:0; background:#CCCCCC; padding:0; z-index:10; color:#000; }
* html #nav .sub_active, * html #nav .select a:hover .sub {z-index:-1; margin-top:0; }

#nav .sub_active a {height:25px; float:left; text-decoration:none; line-height:24px; white-space:nowrap; font-weight:normal;}
#nav .sub_active a,
#nav .select a:hover .sub li a,
#nav .select li:hover .sub li a {display:inline; background:#CCCCCC /* url(dropline/sub_sep.gif) top right no-repeat */ ; padding:0 12px; margin:0; font-size:11px; width:auto; white-space:nowrap; font-weight:normal; border:0; color:navy; height:25px; line-height:24px; }
</style>


Et mon menu que j'aimais tant unsure.gif :
Code
<?php
// 2008-06-27 - horizontal_menu.php - by delete -  http://www.oscommerce-fr.info/forum/index.php?showtopic=55755
//
// Paramètres
$cat_limit    = 99;  // Limite du nombre de catégories
$subcat_limit = 99;  // Limite du nombre de sous catégories
$header   = '<div id="nav">';
$footer   = '</div>';
//
// Fin du paramètrage

// Catégories avec sous-catégories
//
$menu_item      = '<ul class="select"><li><a href="%s"><b>%s</b><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">';
$menu_item_stop = '</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>';

// Catégories sans sous-catégories
//
$menu_alone_item  = '<ul class="select"><li><a href="%s"><b>%s</b><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>';
$menu_alone_item_stop = '</ul><!--[if lte IE 6]></a><![endif]--></li></ul>';

// Sous Catégories
//
$menu_sub_item  = '<li><a href="%s">%s</a></li>';

$cat_top  = array();
$cat_tree = array();

$cat_query  = tep_db_query('SELECT c.`parent_id`, c.`categories_id`, c.`sort_order`, d.`categories_name` FROM ' . TABLE_CATEGORIES . ' c, ' . TABLE_CATEGORIES_DESCRIPTION . ' d WHERE c.categories_id = d.categories_id and d.language_id="' . $languages_id . '" ORDER BY c.sort_order, d.categories_name');

// Construction des tableau cat/sous-cat  
//
while( $line= tep_db_fetch_array($cat_query) )
{
    if ( ! $line['parent_id'] )
        $cat_top[$line['categories_id']] = $line;
    else
        $cat_tree[$line['parent_id']][] = $line;
}

echo $header;

    // Catégories Principales
    //
    foreach ($cat_top as $key=>$cat)
    {
      if ( ! $cat_limit-- ) break;
      
        // Il y a des Sous-Catégories
        //
        if ( is_array($cat_tree[$key]) )
        {
      // Construction du chemin vers la catégorie
            //
            $path = tep_href_link(FILENAME_DEFAULT, tep_get_path($cat['categories_id']));

      printf($menu_item, $path, $cat['categories_name']);

      // Nombre max de sous catégories à afficher
      $subcat_limit_counter = $subcat_limit;
      
          // Sous-Catégories (Catégorie + 1 Niveau)
          //
            foreach($cat_tree[$key]  as $sub_key=>$sub_cat)
            {
               if ( ! $subcat_limit_counter-- ) break;
              
              // Construction du chemin vers la sous-catégorie
              //
              $path = tep_href_link(FILENAME_DEFAULT, tep_get_path($sub_cat['categories_id']));

        printf($menu_sub_item , $path, $sub_cat['categories_name']);
            }
            printf($menu_item_stop);
        }
        else // Pas de Sous-Catégories
        {
              // Construction du chemin vers la catégorie
              //
              $path = tep_href_link(FILENAME_DEFAULT, tep_get_path($cat['categories_id']));

          printf($menu_alone_item , $path, $cat['categories_name']);
          printf($menu_alone_item_stop);
        }
    
    }
echo $footer;    
?>


Pour l'image de fond il suffit de faire un petit gif de 2 pixels de large avec un dégradé et ca a un bon rendu (voir le CSS : ../images/cssmenubackground.gif)

Écrit par : azer 1 Jul 2008, 19:20

merci pour ton menu jeteste ca

Écrit par : delete 1 Jul 2008, 22:28

Je me suis même amusé a faire des "tag clouds" avec ce menu, le rendu est excellent avec quelque modifs que je n'hésiterais pas a poster à l'occasion si ca intéresse quelqu'un...


Écrit par : coconimo 2 Jul 2008, 09:00

slt,
sans vouloir être casse noisette, est il possible que cochon qui fume nous mette un print ecran de ça ? cool.gif
'ci bcp
cdt

Écrit par : delete 2 Jul 2008, 21:13

Déjà qu'on essaye de m'interdire de fumer dans mon bureau, même ici ça va être interdit ? twisted.gif ninja.gif

C'est sur une MS2 avec la base standard donc les effets tags ne sont pas prononcés, mais avec pas mal de rubriques et de produits, c'est pas mal.

http://imageshack.us

Écrit par : delete 13 Jul 2008, 21:32

J'ai fait l'effort ... et pourtant je ne suis pas partisans des up's mais aujourd'hui je le fait ! j'arrête de fumer ?

Écrit par : delete 13 Jul 2008, 22:31

Changement d'avatar en vue ... on va rendre conique la clope, un spécialiste photoshop sur place ?

tongue.gif

Écrit par : nephelion 15 Jul 2008, 09:09

je m'en vais tester le menu horizontal, merci beaucoup.

ps : pour ton avatar, je te rappelle qu'ici on est sur un forum public et qu'il est interdit de fumer, et même d'inciter à fumer. mrgreen.gif



Écrit par : delete 15 Jul 2008, 09:30

http://www.smoz.eu/ tongue.gif

Écrit par : coconimo 15 Jul 2008, 09:31

heu ... je n'ai vu aucune incitation dans les posts précédents .... blink.gif mrgreen.gif
edit : pfff, c'est quoi ce lien Delete ? même pas une boutique oscommerce ! mellow.gif wink.gif twisted.gif

Écrit par : nephelion 15 Jul 2008, 10:01

ca marche super le menu,
il me reste que juste quelques ajustements à faire.

@delete : joli site ton lien, ça me donne envie de m'y remettre rolleyes.gif


Écrit par : oceaneB 28 Sep 2008, 16:15

Citation (delete @ 2 Jul 2008, 00:28) *
Je me suis même amusé a faire des "tag clouds" avec ce menu, le rendu est excellent avec quelque modifs que je n'hésiterais pas a poster à l'occasion si ca intéresse quelqu'un...



Bonjour à tous ,

Moi qui tourne en rond depuis plus d'un mois sur mon menu , une petite contribe "home made by delete " me tenterai bien

ou au pire si quelqu'un pourrais me conseiller sur un menu css horizontal plutôt jolie je lui serais GRANDEMENT reconnaissant .

OceaneB


Écrit par : servalone 20 Nov 2008, 12:58

Bonjour,

Et tout d'abord bravo pour ton travail, c'est magnifique. Par contre j'ai un bug assez bizarre. Car si le menu fonctionne à merveille, il "additionne" les liens précédemment visités dans les liens suivant.
Par exemple :

a la première visite sur le site on a comme liens dans le menu :

http://www.monsite.com/categorie01-c-127.html
http://www.monsite.com/categorie02-c-129.html
http://www.monsite.com/categorie03-c-131.html

etc...

Après être allez dans la catégorie 02 par exemple les liens se transforment en :

http://www.monsite.com/categorie01-c-129-127.html
http://www.monsite.com/categorie02-c-129-129.html
http://www.monsite.com/categorie03-c-129-131.html

etc...

A long terme il interprète ça comme des sous catégories et donc çà casse la navigation :s

Je ne sais pas si il existe une solution? Mon site tourne avec URL rewriting SEO.

Merci d'avance et j'espère à bientôt.

Servalone

Écrit par : delete 20 Nov 2008, 18:39

Tu as raison, il y avait un petit bug et en plus maintenant c'est beaucoup mieux car je n'utilises plus tep_get_path donc ca fait des requetes sql en moins

Code
<?php
// 2008-06-27 - horizontal_menu.php - by delete -  http://www.oscommerce-fr.info/forum/index.php?showtopic=55755
//
// Paramètres
$cat_limit    = 99;  // Limite du nombre de catégories
$subcat_limit = 99;  // Limite du nombre de sous catégories
$header   = '<div id="nav">';
$footer   = '</div>';
//
// Fin du paramètrage

// Catégories avec sous-catégories
//
$menu_item      = '<ul class="select"><li><a href="%s"><b>%s</b><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">';
$menu_item_stop = '</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>';

// Catégories sans sous-catégories
//
$menu_alone_item  = '<ul class="select"><li><a href="%s"><b>%s</b><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>';
$menu_alone_item_stop = '</ul><!--[if lte IE 6]></a><![endif]--></li></ul>';

// Sous Catégories
//
$menu_sub_item  = '<li><a href="%s">%s</a></li>';

$cat_top  = array();
$cat_tree = array();

$cat_query  = tep_db_query('SELECT c.`parent_id`, c.`categories_id`, c.`sort_order`, d.`categories_name` FROM ' . TABLE_CATEGORIES . ' c, ' . TABLE_CATEGORIES_DESCRIPTION . ' d WHERE c.categories_id = d.categories_id and d.language_id="' . $languages_id . '" ORDER BY c.sort_order, d.categories_name');

// Construction des tableau cat/sous-cat  
//
while( $line= tep_db_fetch_array($cat_query) )
{
    if ( ! $line['parent_id'] )
        $cat_top[$line['categories_id']] = $line;
    else
        $cat_tree[$line['parent_id']][] = $line;
}

echo $header;

    // Catégories Principales
    //
    foreach ($cat_top as $key=>$cat)
    {
      if ( ! $cat_limit-- ) break;
      
        // Il y a des Sous-Catégories
        //
        if ( is_array($cat_tree[$key]) )
        {
      // Construction du chemin vers la catégorie
            //
             $path = tep_href_link(FILENAME_DEFAULT, 'cPath=' . $cat['categories_id']);


      printf($menu_item, $path, $cat['categories_name']);

      // Nombre max de sous catégories à afficher
      $subcat_limit_counter = $subcat_limit;
      
          // Sous-Catégories (Catégorie + 1 Niveau)
          //
            foreach($cat_tree[$key]  as $sub_key=>$sub_cat)
            {
               if ( ! $subcat_limit_counter-- ) break;
              
              // Construction du chemin vers la sous-catégorie
              //
              $path = tep_href_link(FILENAME_DEFAULT, 'cPath=' . $cat['categories_id'] . '_' . $sub_cat['categories_id']);


        printf($menu_sub_item , $path, $sub_cat['categories_name']);
            }
            printf($menu_item_stop);
        }
        else // Pas de Sous-Catégories
        {
              // Construction du chemin vers la catégorie
              //
                          $path = tep_href_link(FILENAME_DEFAULT, 'cPath=' . $cat['categories_id']);

          printf($menu_alone_item , $path, $cat['categories_name']);
          printf($menu_alone_item_stop);
        }
    
    }
echo $footer;    
?>

Écrit par : -steph44 20 Nov 2008, 23:00

Salut Delete smile.gif ,
Je vais encore passé pour une bille blush.gif , mais comme ton menu me plais beaucoup, j'ai voulu le tester et j'ai comme un probleme confused.gif
J'ai creer un fichier horizontal_menu.php dans lequel j'ai mis ton code smile.gif et j'ai fait la meme chose avec le css smile.gif
Mon probleme, c'est que j'imagine que ton code appel les info du css pour la mise en forme et... ben j'ai pas trouvé comment et ou doit je faire appel du css dans le fichier php blush.gif
Merci beaucoup pour ta reponse smile.gif
A bientot,
steph

Écrit par : delete 20 Nov 2008, 23:27

Tu prends les lignes de CSS et tu les mets dans ton Stylesheet.css ... c'est tout !

Écrit par : -steph44 20 Nov 2008, 23:37

bonsoir et merci delete biggrin.gif ,
franchement... je me metterai des baffes wacko.gif tongue.gif
pourquoi faut'il que je cherche les complications quand cela est simple... wacko.gif tongue.gif

meric beaucoup pour ta reponse rapide wink.gif
Bonne fin de soirée et a bientôt biggrin.gif
steph

Écrit par : azer 21 Nov 2008, 03:24

je comprend pas jai bien le css de chargé , je vois la ligne des categories , et quand je passe la souris sur les categeroies je vois bien que le texte bouge legerement ( onmouseover) mais aucun declenchement de menu deroulant , est ce que ca peut etre le css quil faudrait que je bidouille ?

Écrit par : aurelou 15 Mar 2011, 15:12

Bonjour,

J'ai installé ce menu qui fonctionnait parfaitement, comme ceci (la case "tapis par taille" ne fait pas partie du menu) :


Mais j'ai installé Internet explorer 8 et je remarque qu'il y a un bug avec ce navigateur. Lorsque j'entre dans la fiche d'un produit, voici comment le menu s'affiche :


Le bug ne survient que quand j'entre dans la fiche d'un produit, sinon tout est normal. Avec les autres navigateurs tout marche bien aussi.

Je n'ai pas de sous-catégories.

Voici mes codes dans le header :

Citation
<table border="0" summary="" width="100%" cellspacing="0" cellpadding="0">
<tr class="headerNavigation">
<td class="main" align="center" valign="center" BGCOLOR="#DF7B2A" style="width: 110px; border: 1px solid #FFFFFF""><font color="#FFFFFF"><b>Tapis par taille &nbsp;&nbsp;<img src="images/puce3.gif"></b></td>
<td>

<?php
// 2008-06-27 - horizontal_menu.php - by delete - http://www.oscommerce-fr.info/forum/index.php?showtopic=55755
//
// Paramètres
$cat_limit = 99; // Limite du nombre de catégories
$subcat_limit = 99; // Limite du nombre de sous catégories
$header = '<div id="menu">';
$footer = '</div>';
//
// Fin du paramètrage

// Catégories avec sous-catégories
//
$menu_item = '<ul class="select"><li><a href="%s"><b>%s</b><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">';
$menu_item_stop = '</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>';

// Catégories sans sous-catégories
//
$menu_alone_item = '<ul class="select"><li><a href="%s"><b>%s</b><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>';
$menu_alone_item_stop = '</ul><!--[if lte IE 6]></a><![endif]--></li></ul>';

// Sous Catégories
//
$menu_sub_item = '<li><a href="%s">%s</a></li>';

$cat_top = array();
$cat_tree = array();

$cat_query = tep_db_query('SELECT c.`parent_id`, c.`categories_id`, c.`sort_order`, d.`categories_name` FROM ' . TABLE_CATEGORIES . ' c, ' . TABLE_CATEGORIES_DESCRIPTION . ' d WHERE c.categories_id = d.categories_id and d.language_id="' . $languages_id . '" ORDER BY c.sort_order, d.categories_name');

// Construction des tableau cat/sous-cat
//
while( $line= tep_db_fetch_array($cat_query) )
{
if ( ! $line['parent_id'] )
$cat_top[$line['categories_id']] = $line;
else
$cat_tree[$line['parent_id']][] = $line;
}

echo $header;

// Catégories Principales
//
foreach ($cat_top as $key=>$cat)


{
if ( ! $cat_limit-- ) break;

// Il y a des Sous-Catégories
//
if ( is_array($cat_tree[$key]) )
{
// Construction du chemin vers la catégorie
//

$path = tep_href_link(FILENAME_DEFAULT, tep_get_path($cat['categories_id']));

printf($menu_item, $path, $cat['categories_name']);

// Nombre max de sous catégories à afficher
$subcat_limit_counter = $subcat_limit;

// Sous-Catégories (Catégorie + 1 Niveau)
//
foreach($cat_tree[$key] as $sub_key=>$sub_cat)
{
if ( ! $subcat_limit_counter-- ) break;

// Construction du chemin vers la sous-catégorie
//
$path = tep_href_link(FILENAME_DEFAULT, tep_get_path($sub_cat['categories_id']));

printf($menu_sub_item , $path, $sub_cat['categories_name']);
}
printf($menu_item_stop);
}
else // Pas de Sous-Catégories
{
// Construction du chemin vers la catégorie
//
$path = tep_href_link(FILENAME_DEFAULT, tep_get_path($cat['categories_id']));

printf($menu_alone_item , $path, $cat['categories_name']);
printf($menu_alone_item_stop);
}

}
echo $footer;
?>




<div style="float:right"><?php echo $languages_string;?></div>


</td>
</tr>
</table>


Merci beaucoup pour votre aide !!!

Écrit par : aurelou 15 Mar 2011, 15:52

Finalement j'ai trouvé toute seule... wink.gif

Il faut remplacer les "[if IE 7]" par "[if gte IE 7]".

Écrit par : Bonbec 15 Mar 2011, 16:33

Bonjour,
Petite faute à la 3ème ligne du code, dans la partie style="width: 110px; border: 1px solid #FFFFFF"", il y a une apostrophe de trop à la fin

Écrit par : scientoufik 6 Nov 2011, 19:18

Bonjour,

Quelle est la difference entre cette contribution et celle ci: http://addons.oscommerce.com/info/8155/v,23 ?

En fait ce que j'aimerai faire c'est un menu de ce type http://www.cuisineaddict.comMais je n'ai pas trouvé de contribution. Quelqu'un saurait il à partir de quel code je pourrai partir pour faire cette contrib? Merci d'avance.

Cordialement,

Écrit par : gaet 5 Jan 2012, 12:02

Bonjour, j'ai voulu tester ce bout de contrib, cependant je n'ai pas l'affichage des sous catégories sous IE alors que tout est normal sous mozilla. Je suis sous IE8 et j'ai bien changé [if IE 7] par [if gte IE7] dans horizontal_menu.php
Sinon si quelqu'un peut m'aiguiller sur une contrib de ce style (menu horizontal) facile a mettre en place.

Écrit par : did-eye 7 Feb 2013, 16:56

: biggrin.gif
juste ce que je cherchais merci !
Une question, je cherche à afficher un sous niveau supplémentaire

Propulsé par Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)