osCommerce France : Accueil Forum Portail osCommerce France Réponses aux questions Foire aux contributions

Bienvenue invité ( Connexion | Inscription )

> Menu Horizontal + 1 Niveau, Code : Menu avec sous catégories
delete
posté 27 Jun 2008, 09:47
Message #1


2eme dan OSC
Icône de groupe

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 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)


Ce message a été modifié par delete - 27 Jun 2008, 09:49.
Go to the top of the page
 
 
Start new topic
Réponse(s)
azer
posté 1 Jul 2008, 19:20
Message #2


Ceinture verte OSC
Icône de groupe

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
Go to the top of the page
 

Les messages de ce sujet
- delete   Menu Horizontal + 1 Niveau   27 Jun 2008, 09:47
- - azer   merci pour ton menu jeteste ca   1 Jul 2008, 19:20
- - delete   Je me suis même amusé a faire des "tag clouds...   1 Jul 2008, 22:28
- - coconimo   slt, sans vouloir être casse noisette, est il poss...   2 Jul 2008, 09:00
- - delete   Déjà qu'on essaye de m'interdire de fumer ...   2 Jul 2008, 21:13
- - delete   J'ai fait l'effort ... et pourtant je ne s...   13 Jul 2008, 21:32
- - delete   Changement d'avatar en vue ... on va rendre co...   13 Jul 2008, 22:31
- - nephelion   je m'en vais tester le menu horizontal, merci ...   15 Jul 2008, 09:09
- - delete   http://www.smoz.eu/   15 Jul 2008, 09:30
- - coconimo   heu ... je n'ai vu aucune incitation dans les ...   15 Jul 2008, 09:31
- - nephelion   ca marche super le menu, il me reste que juste que...   15 Jul 2008, 10:01
- - oceaneB   Citation (delete @ 2 Jul 2008, 00:28) Je ...   28 Sep 2008, 16:15
- - servalone   Bonjour, Et tout d'abord bravo pour ton trava...   20 Nov 2008, 12:58
- - delete   Tu as raison, il y avait un petit bug et en plus m...   20 Nov 2008, 18:39
- - -steph44   Salut Delete , Je vais encore passé pour une bil...   20 Nov 2008, 23:00
- - delete   Tu prends les lignes de CSS et tu les mets dans to...   20 Nov 2008, 23:27
- - -steph44   bonsoir et merci delete , franchement... je me m...   20 Nov 2008, 23:37
- - azer   je comprend pas jai bien le css de chargé , je voi...   21 Nov 2008, 03:24
- - aurelou   Bonjour, J'ai installé ce menu qui fonctionna...   15 Mar 2011, 15:12
- - aurelou   Finalement j'ai trouvé toute seule... Il fau...   15 Mar 2011, 15:52
- - Bonbec   Bonjour, Petite faute à la 3ème ligne du code, dan...   15 Mar 2011, 16:33
- - scientoufik   Bonjour, Quelle est la difference entre cette con...   6 Nov 2011, 19:18
- - gaet   Bonjour, j'ai voulu tester ce bout de contrib,...   5 Jan 2012, 12:02
- - did-eye   : juste ce que je cherchais merci ! Une ques...   7 Feb 2013, 16:56


Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



RSS Version bas débit Nous sommes le : 28th March 2024 - 21:33
Ce site est déclaré auprès de la commision Nationale
de l'Informatique et des Libertés (déclaration n°: 1043896)