Menu Horizontal + 1 Niveau, Code : Menu avec sous catégories |
Bienvenue invité ( Connexion | Inscription )
Menu Horizontal + 1 Niveau, Code : Menu avec sous catégories |
27 Jun 2008, 09:47
Message
#1
|
|
2eme dan OSC Groupe : Bannis Messages : 3022 Inscrit : 12-November 07 Lieu : Massilia Membre no 19718 |
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 : 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) Ce message a été modifié par delete - 27 Jun 2008, 09:49. |
|
1 Jul 2008, 19:20
Message
#2
|
|
Ceinture verte OSC Groupe : Membres Messages : 744 Inscrit : 26-January 03 Lieu : paris Membre no 775 |
merci pour ton menu jeteste ca
-------------------- OSC addict - ms2fr - mail : azerosc (at) gmail.com
|
|
Version bas débit | Nous sommes le : 29th March 2024 - 10:37 |
Ce site est déclaré auprès de la commision Nationale de l'Informatique et des Libertés (déclaration n°: 1043896) |