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>
/* ================================================================
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
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;
?>
// 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)




