Aide - Recherche - Membres - Calendrier
Version complète : Menu Horizontal + 1 Niveau
Forum osCommerce-fr > Adapter OsCommerce MS2 > Echanges développeurs
delete
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 Stu Nicholls 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)
azer
merci pour ton menu jeteste ca
delete
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...

cocomino
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
delete
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.

delete
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 ?
delete
Changement d'avatar en vue ... on va rendre conique la clope, un spécialiste photoshop sur place ?

tongue.gif
nephelion
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


delete
http://www.smoz.eu/ tongue.gif
cocomino
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
nephelion
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

oceaneB
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

servalone
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
delete
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;    
?>
-steph44
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
delete
Tu prends les lignes de CSS et tu les mets dans ton Stylesheet.css ... c'est tout !
-steph44
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
azer
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 ?
aurelou
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....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 !!!
aurelou
Finalement j'ai trouvé toute seule... wink.gif

Il faut remplacer les "[if IE 7]" par "[if gte IE 7]".
Bonbec
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
scientoufik
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.com

Mais 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,
gaet
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.
did-eye
: biggrin.gif
juste ce que je cherchais merci !
Une question, je cherche à afficher un sous niveau supplémentaire
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.
Invision Power Board © 2001-2013 Invision Power Services, Inc.