Version imprimable du sujet

Cliquez ici pour voir ce sujet dans son format original

Forum osCommerce-fr _ Design OsC2.3 _ Menu déroulant

Écrit par : Knight-Charles 10 Feb 2011, 10:21

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.

Écrit par : FoxP2 10 Feb 2011, 12:45

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

Écrit par : Knight-Charles 10 Feb 2011, 14:32

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


Écrit par : fastspirit 6 Nov 2011, 16:17

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.

Écrit par : dar 29 Nov 2012, 04:28

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.

Propulsé par Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)