Aide - Recherche - Membres - Calendrier
Version complète : Menu déroulant
Forum osCommerce-fr > Oscommerce 2.3 > Design OsC2.3
Knight-Charles
Bonjour à tous,
Sur un de mes sites Oscommerce 2.3, j'essaye d'instller un menu déroulant au passage de la souris.
Avec les différentes contributions (Dynamenu, Ul catégories ...), j'arrive bien à insérer les sous-menus mais ceux-ci restent visibles!!
C'est-là que je coince.
Si quelqu'un peut me donner une piste, j'en serais très content.
A bientôt.
FoxP2
sans code ? ça va être difficile. huh.gif
à moins que monsieur miracle passe par là ...
attention tout de même aux add-on estampillés oscommerce 2.2.x, ils ne seront plus forcément fonctionnels sur la 2.3.x
Knight-Charles
Bonjour,
Merci de ta réponse très rapide.
Dans l'ordre :
je vais mettre une copie du code de mon fichier header.php
une copie du code du fichier dm_categories.php (issus de la contribution Dynmenu)
et une copie d'écran du résultat (sachant que je souhaiterai que l emenu s'affcihe au survol de la souris).

D'abord le header.php où j'ai rajouté à l'endroit ou je souhaite que le menu s'affiche, le code suivant
Ligne 89 :
<?php include(DIR_WS_BOXES . 'dm_categories.php'); ?>

Code
<?php
/*
  $Id$</STRONG></P> <P><STRONG>  osCommerce, Open Source E-Commerce Solutions
  <A href="http://www.oscommerce.com">http://www.oscommerce.com</A></STRONG></P> <P><STRONG>  Copyright (c) 2010 osCommerce</STRONG></P> <P><STRONG>  Released under the GNU General Public License
*/</STRONG></P> <P><STRONG>  if ($messageStack->size('header') > 0) {
    echo '<div class="grid_24">' . $messageStack->output('header') . '</div>';
  }</STRONG></P> <P><STRONG>?></STRONG></P> <P><STRONG> <script type="text/javascript"><!--//--><![CDATA[//><!--</STRONG></P> <P><STRONG>sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
  sfEls[i].onmouseover=function() {
   this.className+=" sfhover";
  }
  sfEls[i].onmouseout=function() {
   this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  }
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);</STRONG></P> <P><STRONG>//--><!]]></script>
</STRONG></P> <P><STRONG></STRONG> </P> <P><STRONG><div id="header" class="grid_24">
<div class="cl_both">
            <a class="logo fl_left" href="<?php echo tep_href_link(FILENAME_DEFAULT);?>"><?php echo tep_image(DIR_WS_IMAGES.'logo.png', STORE_NAME, '', '', '')?></a>
            <div class="fl_right navigation_block" align="right">
              
                    <div class="languages fl_right"><?php
if (!isset($lng) || (isset($lng) && !is_object($lng))) {
include(DIR_WS_CLASSES . 'language.php');
$lng = new language;
}
$languages_string = '';
reset($lng->catalog_languages);
$i = 0;
while (list($key, $value) = each($lng->catalog_languages)) {
if ($i)  $languages_string .= tep_image(DIR_WS_IMAGES.'spacer.gif','','','',' class="languages_img"');
$languages_string .= '<a href="' . tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('language', 'currency')) . 'language=' . $key, $request_type) . '">' . tep_image(DIR_WS_LANGUAGES . $value['directory'] . '/images/' . $value['image'], $value['name'],'','','') . '</a>';
$i++;
}
echo $languages_string;?></div>
                    <div class="currencies fl_right">
                     <label class="fl_left"><?php echo MODULE_BOXES_CURRENCIES_BOX_TITLE?>: </label><?php
echo tep_draw_form('currencies', tep_href_link(basename($PHP_SELF), '', $request_type, false), 'get');
reset($currencies->currencies);
$currencies_array = array();
while (list($key, $value) = each($currencies->currencies)) {
$currencies_array[] = array('id' => $key, 'text' => $value['title']);
}
$hidden_get_variables = '';
reset($HTTP_GET_VARS);
while (list($key, $value) = each($HTTP_GET_VARS)) {
if ( ($key != 'currency') && ($key != tep_session_name()) && ($key != 'x') && ($key != 'y') ) {
$hidden_get_variables .= tep_draw_hidden_field($key, $value);
}
}
echo tep_draw_pull_down_menu('currency', $currencies_array, $currency, 'onChange="this.form.submit();" class="select fl_right"') . $hidden_get_variables . tep_hide_session_id();
echo '</form>';
?></div>
            </div>
</div></STRONG></P><STRONG> <P>
<script type="text/javascript">
  $("#headerShortcuts").buttonset();
</script>
</div>
<div class="grid_24 ui-widget menu_shape">
   <ul class="menu fl_left">  </P> <P>            <li class="menu_item un <?php if ($tab_sel == tep_href_link(FILENAME_DEFAULT)) echo "selected"?>"><a onClick="document.location='<?php echo tep_href_link(FILENAME_DEFAULT);?>'"><?php printf(MODULE_BOXES_MANUFACTURER_INFO_BOX_HOMEPAGE,"")?></a></li>
            <li class="menu_item <?php if ($tab_sel == tep_href_link(FILENAME_PRODUCTS_NEW)) echo "selected"?>"><a onClick="document.location='<?php echo tep_href_link(FILENAME_PRODUCTS_NEW);?>'"><?php echo MODULE_BOXES_WHATS_NEW_BOX_TITLE;?></a>
<?php include(DIR_WS_BOXES . 'dm_categories.php'); ?>
</li>     </P> <P> <li class="menu_item <?php if ($tab_sel == tep_href_link(FILENAME_SPECIALS)) echo "selected"?>"><a onClick="document.location='<?php echo tep_href_link(FILENAME_SPECIALS);?>'"><?php echo MODULE_BOXES_SPECIALS_BOX_TITLE?></a></li>
<?php if (tep_session_is_registered('customer_id')) { </P> <P>$login_link = tep_href_link('logoff.php');
$login_title= HEADER_TITLE_LOGOFF;
} else{
$login_link = tep_href_link('login.php');
$login_title= HEADER_TITLE_LOGIN;
}
?>              
            <li class="menu_item <?php if (($tab_sel == tep_href_link(FILENAME_LOGIN)) || ($tab_sel == tep_href_link(FILENAME_LOGOFF))) echo "selected"?>"><a onClick="document.location='<?php echo $login_link;?>'"><?php echo $login_title;?></a></li>
              <?php if (tep_session_is_registered('customer_id')) { </P> <P>$acc_link = tep_href_link('account.php');
$acc_title= HEADER_TITLE_MY_ACCOUNT;
} else{
$acc_link = tep_href_link('create_account.php');
$acc_title= HEADER_TITLE_CREATE_ACCOUNT;
}
?>                        
            <li class="menu_item <?php if (($tab_sel == tep_href_link(FILENAME_CREATE_ACCOUNT)) || ($tab_sel == tep_href_link(FILENAME_CREATE_ACCOUNT_SUCCESS))) echo "selected"?>"><a onClick="document.location='<?php echo $acc_link;?>'"><?php echo $acc_title;?></a></li>
            
   </ul>
    <div class="cart_bg fl_right">
               <div><b><?php echo MODULE_BOXES_SHOPPING_CART_BOX_TITLE;?></b>
<?php
if ($cart->count_contents() > 0) {
?>
<a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART)?>"><?php echo $cart->count_contents()?><?php echo HEADER_SHOPPING_CART_BOX_CART_EMPTY?></a>
<?php    
}else{
?>
<a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART)?>">0<?php echo HEADER_SHOPPING_CART_BOX_CART_EMPTY?></a>
<?php
}
?>
</div>
    </div>                                
</div>
<?php if (( $tab_sel == tep_href_link(FILENAME_DEFAULT)) && (!isset($_GET['cPath'])) && (!isset($HTTP_GET_VARS['manufacturers_id']))) { ?>
<div class="grid_24">
<?php include(DIR_WS_INCLUDES . 'modules/boxes/' . FILENAME_SLIDER_HEADER);?>
</div>
<div class="grid_24 banners">
<?php include(DIR_WS_INCLUDES . 'modules/boxes/' . FILENAME_BANNER_HEADER);?>
</div>
<?php</P> <P>}else{
}
?></P> <P><?php
  if (isset($HTTP_GET_VARS['error_message']) && tep_not_null($HTTP_GET_VARS['error_message'])) {
?>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
  <tr class="headerError">
    <td class="headerError"><?php echo htmlspecialchars(stripslashes(urldecode($HTTP_GET_VARS['error_message']))); ?></td>
  </tr>
</table>
<?php
  }</P> <P>  if (isset($HTTP_GET_VARS['info_message']) && tep_not_null($HTTP_GET_VARS['info_message'])) {
?>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
  <tr class="headerInfo">
    <td class="headerInfo"><?php echo htmlspecialchars(stripslashes(urldecode($HTTP_GET_VARS['info_message']))); ?></td>
  </tr>
</table>
<?php
  }
?>


Puis le fichier dm_categories.php


Code
<?php
/*
  $Id: dm_categories.php,v 1.00 2006/05/07 01:13:58 nate_02631 Exp $

  Ties the store category menu into the PHP Layers Menu library, allowing display
of categories as DTHML drop-down or fly-out menus, collapsable tree-style menus
or horizontal/vertical indented plain menus.</STRONG></P> <P><STRONG>  osCommerce, Open Source E-Commerce Solutions
  <A href="http://www.oscommerce.com">http://www.oscommerce.com</A></STRONG></P> <P><STRONG>  Copyright (c) 2006 Nate Welch <A href="http://www.natewelch.com">http://www.natewelch.com</A></STRONG></P> <P><STRONG>  Released under the GNU General Public License
*/</STRONG></P> <P><STRONG>// BEGIN Configuration Options</STRONG></P> <P><STRONG>  // Set the value below corresponding to the type of menu you want to render
// 0 = Horizontal Drop-down; 1 = Vertical Flyout; 2 = Tree Menu;
// 3 = Plain Horizontal Menu; 4 = Plain Vertical Menu
// Include the appropriate stylesheet in your store stylesheet, and if rendering
// types '0' or '1', you must also echo (output) the "menu footer" variable
// in your store footer as described in the readme (or submenus won't work)
$menu_type = 1;

  // Set to false to display the menu output only. Set to true to display in
// a regular box. The former is useful for better integrating the menu with your layout.
$show_dmcats_as_box = true;    

  // Set to 'true' to assign TITLE tags to each of the menu's items, 'false' to leave blank
$menu_use_titles = true;

  // Name of the icon file to be used preceding menu items. Leave blank for no icons.
// NOTE: Does not apply to plain style menus. Icon should be in the /images directory
$menu_icon_file = '';

// Width and height of icons used in menus (does not apply to plain menus).
$menu_icon_width = 16;
$menu_icon_height = 16;

  // Set the graphic to be used for the forward arrow and down arrow images used in
// drop-down and fly-out menus. Images must reside in your catalog's /images directory
$menu_fwdarrowimg  = 'forward-arrow.png';  
  $menu_downarrowimg = 'down-arrow.png';  

// Indicates whether or not to render your entire category list or just the root categories
// and the currently selected submenu tree. Rendering the full list is useful for dynamic menu
// generation where you want the user to have instant access to all categories. The other option
// is the default oSC behaviour, when the subcats aren't available until the parent is clicked,
// more suitable for plain-style menus
$show_full_tree = true;  

// For tree menus, set to true to have only nodes corresponding to the current category path
// expanded. If set to false, the tree menu will retain expanded/collapse nodes the user has
// selected (as well as expanding any for categories they've entered)
$menu_tree_current_path = true;    

  // Set the three numerical values below to adjust the offset of submenus in
  // horizontal drop-down and vertical fly-out menus. Values adjust the following (in order)
  // Top Offset: # of pixels from top border of previous menu the submenu appears
  // Right Offset: # of pixels from right border of previous menu the submenu appears
  // Left Offset: # of pixels from left border of previous menu the submenu appears
  // if the submenu pops to left (i.e. if window border is reached).  Negative values are allowed.
  $menu_layer_offset = array (0,4,4);

// Show icons on tree menus? If set to false, only expand/collapse icons and connecting lines are shown
$GLOBALS['dm_tree_folder_icons'] = true;</STRONG></P> <P><STRONG> // This is the HTML that you would like to appear before/after your categories menu if *not*
// displaying in a standard "box". This is useful for reconciling tables or clearing
// floats, depending on your layout needs. For example if not including in a box in the
// default osC template, you would need opening/closing <tr><td> tags...
$before_nobox_html = '';
  $after_nobox_html = ''; </STRONG></P> <P><STRONG>// END Configuration Options
// Misc setting to make folder icon clickable to expand tree menu nodes
$GLOBALS['dm_tree_titleclick'] = true; </STRONG></P> <P><STRONG>// Initialize HTML and info_box class if displaying inside a box
if ($show_dmcats_as_box) {
    echo '<tr><td>';
    $info_box_contents = array();
    $info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);
    new infoBoxHeading($info_box_contents, true, false);    
}</STRONG></P> <P><STRONG>// Generate the menu data output (uses configuration options above)
$categories_string = tep_make_cat_dmlist();</STRONG></P> <P><STRONG>// Include required libraries based on menu type
require_once 'includes/functions/dynamenu/lib/PHPLIB.php';
require_once 'includes/functions/dynamenu/lib/layersmenu-common.inc.php';</STRONG></P> <P><STRONG>if ($menu_type < 2) { // Setup for DHTML style menus</STRONG></P> <P><STRONG>    ?>
        <script language="JavaScript" type="text/javascript">
            <!--
                <?php require_once 'includes/functions/dynamenu/libjs/layersmenu-browser_detection.js'; ?>
            // -->
        </script>
        <script language="JavaScript" type="text/javascript" src="includes/functions/dynamenu/libjs/layersmenu-library.js"></script>
        <script language="JavaScript" type="text/javascript" src="includes/functions/dynamenu/libjs/layersmenu.js"></script>
    <?php
  
    require_once 'includes/functions/dynamenu/lib/layersmenu.inc.php';
    $mid = new LayersMenu($menu_layer_offset[0],$menu_layer_offset[1],$menu_layer_offset[2],1);</STRONG></P> <P><STRONG>} elseif ($menu_type > 2) { // Setup for plain style menus</STRONG></P> <P><STRONG>    require_once 'includes/functions/dynamenu/lib/plainmenu.inc.php';
    $mid = new PlainMenu();</STRONG></P> <P><STRONG>} else {  // Setup for tree style menus
  
  ?>
        <script language="JavaScript" type="text/javascript">
            <!--
                <?php require_once 'includes/functions/dynamenu/libjs/layersmenu-browser_detection.js'; ?>
        
        <?php
        
           if ($menu_tree_current_path) {
              echo "\n".'var menu_tree_current_path = true';        
          } else {
              echo "\n".'var menu_tree_current_path = false';          
          }
        
        ?>
        // -->
        </script>
        <script language="JavaScript" type="text/javascript" src="includes/functions/dynamenu/libjs/layerstreemenu-cookies.js"></script>
    <?php</STRONG></P> <P><STRONG>        require_once 'includes/functions/dynamenu/lib/treemenu.inc.php';
        $mid = new TreeMenu();</STRONG></P> <P><STRONG>}</STRONG></P> <P><STRONG>// Set menu config variables
$mid->setDirroot('./');
$mid->setLibjsdir('./includes/functions/dynamenu/libjs/');</STRONG></P> <P><STRONG>if ($menu_type !=2) {
    $mid->setTpldir('./includes/functions/dynamenu/templates/');
}
  
$mid->setImgdir('./images/');
$mid->setImgwww('images/');
$mid->setIcondir('./images/');
$mid->setIconwww('images/');
$mid->setIconsize($menu_icon_width, $menu_icon_height);</STRONG></P> <P><STRONG>// Generate menus
$mid->setMenuStructureString($categories_string);
$mid->parseStructureForMenu('catmenu');</STRONG></P> <P><STRONG>switch ($menu_type) {
    case 0: // Horizontal drop-down
        $mid->setDownArrowImg($menu_downarrowimg);
        $mid->setForwardArrowImg($menu_fwdarrowimg);
        $mid->setHorizontalMenuTpl('layersmenu-horizontal_menu.ihtml');      
        $mid->setSubMenuTpl('layersmenu-horiz_sub_menu.ihtml');      
     $mid->newHorizontalMenu('catmenu');
    $mid->printHeader();
        $categories_menu = $mid->getMenu('catmenu');
    $GLOBALS['dmfooter'] = $mid->getFooter();        
        break;
    case 1:  // Vertical fly-out
        $mid->setDownArrowImg($menu_downarrowimg);
        $mid->setForwardArrowImg($menu_fwdarrowimg);
        $mid->setVerticalMenuTpl('layersmenu-vertical_menu.ihtml');    
        $mid->setSubMenuTpl('layersmenu-vert_sub_menu.ihtml');      
    $mid->newVerticalMenu('catmenu');
    $mid->printHeader();
        $categories_menu = $mid->getMenu('catmenu');
    $GLOBALS['dmfooter'] = $mid->getFooter();            
        break;
    case 2:  // Tree menu
      $categories_menu = $mid->newTreeMenu('catmenu');
        break;
    case 3:  // Horizontal plain menu
        $mid->setPlainMenuTpl('layersmenu-horizontal_plain_menu.ihtml');  
        $categories_menu = $mid->newHorizontalPlainMenu('catmenu');      
        break;
    case 4:  // Vertical plain menu
        $mid->setPlainMenuTpl('layersmenu-plain_menu.ihtml');  
        $categories_menu = $mid->newPlainMenu('catmenu');      
        break;    
} </STRONG></P> <P>
<STRONG>// Output list inside a box if specified, otherwise just output unordered list
if ($show_dmcats_as_box) {
    $info_box_contents = array();
    $info_box_contents[] = array('text' => $categories_menu);
    new infoBox($info_box_contents);
  echo '</td></tr>';
} else {
  echo $before_nobox_html;
    echo $categories_menu;
  echo $after_nobox_html;
}</STRONG></P> <P><STRONG>// Create the root category list
function tep_make_cat_dmlist($rootcatid = 0, $maxlevel = 0){</STRONG></P> <P><STRONG>    global $cPath_array, $show_full_tree, $languages_id;
  
    global $idname_for_menu, $cPath_array, $show_full_tree, $languages_id;</STRONG></P> <P><STRONG>    // Modify category query if not fetching all categories (limit to root cats and selected subcat tree)
  if (!$show_full_tree) {
        $parent_query = 'AND (c.parent_id = "0"';
    
    if (isset($cPath_array)) {
    
        $cPath_array_temp = $cPath_array;
    
        foreach($cPath_array_temp AS $key => $value) {
          $parent_query .= ' OR c.parent_id = "'.$value.'"';
      }
      
      unset($cPath_array_temp);
    }
    
        $parent_query .= ')';    
  } else {
        $parent_query = '';
  }  </STRONG></P> <P><STRONG>  $result = tep_db_query('select c.categories_id, cd.categories_name, c.parent_id from ' . TABLE_CATEGORIES . ' c, ' . TABLE_CATEGORIES_DESCRIPTION . ' cd where c.categories_id = cd.categories_id and cd.language_id="' . (int)$languages_id .'" '.$parent_query.'order by sort_order, cd.categories_name');
    
  while ($row = tep_db_fetch_array($result)) {    
        $table[$row['parent_id']][$row['categories_id']] = $row['categories_name'];
    }</STRONG></P> <P><STRONG>    $output .= tep_make_cat_dmbranch($rootcatid, $table, 0, $maxlevel);</STRONG></P> <P><STRONG>    return $output;
}</STRONG></P> <P><STRONG>// Create the branches off the category list
function tep_make_cat_dmbranch($parcat, $table, $level, $maxlevel) {</STRONG></P> <P><STRONG>    global $cPath_array, $menu_use_titles, $menu_icon_file;
  
    $list = $table[$parcat];

    // Build data for menu
  while(list($key,$val) = each($list)){
        
    if (isset($cPath_array) && in_array($key, $cPath_array)) {
            $this_expanded = '1';
            $this_selected = 'dmselected';      
        } else {
            $this_expanded = '';
            $this_selected = '';        
      } </STRONG></P> <P><STRONG>        if (!$level) {
        unset($GLOBALS['cPath_set']);
      $GLOBALS['cPath_set'][0] = $key;
            $cPath_new = 'cPath=' . $key;</STRONG></P> <P><STRONG>        } else {
      $GLOBALS['cPath_set'][$level] = $key;  
            $cPath_new = 'cPath=' . implode("_", array_slice($GLOBALS['cPath_set'], 0, ($level+1)));
        }
    
    if ($menu_use_titles) {
        $this_title = $val;
    } else {
        $this_title = '';    
    }    </STRONG></P> <P><STRONG>        if (SHOW_COUNTS == 'true') {
            $products_in_category = tep_count_products_in_category($key);
            if ($products_in_category > 0) {
                $val .= '&nbsp;(' . $products_in_category . ')';
            }
        }
    
    // Output for file to be parsed by PHP Layers Menu
    // Each line (terminated by a newline "\n" is a pipe delimited string with the following fields:
    // [dots]|[text]|[link]|[title]|[icon]|[target]|[expanded]
    // dots - number of dots signifies the level of the link '.' root level items, '..' first submenu, etc....
    // text - text for link; title - tooltip for link; icon - icon for link; target - "dmselected" CSS class if item is selected
    // expanded - signifies if the node is expanded or collapsed by default (applies only to tree style menus)
    $output .= str_repeat(".", $level+1).'|'.$val.'|'.tep_href_link(FILENAME_DEFAULT, $cPath_new).'|'.$this_title.'|'.$menu_icon_file.'|'.$this_selected.'|'.$this_expanded."\n";        
        
        if ((isset($table[$key])) AND (($maxlevel > $level + 1) OR ($maxlevel == '0'))) {
            $output .= tep_make_cat_dmbranch($key,$table,$level + 1,$maxlevel);
        }
    
  } // End while loop</STRONG></P> <P><STRONG>    return $output;
} </STRONG></P> <P><STRONG>?>


Ce qui au final me donne le résultat suivant :



Ce qui ne correspond pas vraiment à ce que je recherche : affichage au survol de la souris.

J'espère avoir été suffisemment explicite.
Merci d'avance.
A bientôt

fastspirit
Bonjour, a tu eu réponce ou trouvé pour faire le menu déroulant sur la version 2.3?

Car sur l'ancienne ca marche mais pas sur la nouvel version.

Merci.
dar
Pour ma part, j'ai fait un menu déroulant dans www/include/header.php et j'ai intégrer les liens des catégories et sous catégories en hover biggrin.gif
Il faut bien sur créer des classes dans la feuille de style www/stylesheet.css.
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-2024 Invision Power Services, Inc.