Version imprimable du sujet
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
:
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 ?
'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 ?
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 ?
É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.
Écrit par : delete 15 Jul 2008, 09:30
http://www.smoz.eu/
É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
É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 : 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 : 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 <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...
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
:
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)