Aide pour développement d'un menu déroulant vertical

[Denys06]

Bonjour, j'essais de mettre en place sur mon Prestashop 1.5 ce menu déroulant pour l'affichage de mes catégories :

 

http://cssmenumaker.com/menu/chromed-flyout

Le menu fonctionne bien, mais le seul problème que je n'arrive pas à résoudre, est de pouvoir faire afficher la flèche à droite des catégories pour indiqué qu'il y à une sous catégories. Comment déterminé cela dans le fichier category-tree-branch.tpl s'il vous plait ?

Voici mes codes sources :

 

blockcategories.tpl

<!-- Block categories module -->
<div id="categories_block_left" class="block">
	<p class="title_block">{l s='Categories' mod='blockcategories'}</p>
</div>
      <div id="cssmenu">
		<ul>
		{foreach from=$blockCategTree.children item=child name=blockCategTree}
			{if $smarty.foreach.blockCategTree.last}
				{include file="$branche_tpl_path" node=$child last='true'}
			{else}
				{include file="$branche_tpl_path" node=$child}
			{/if}
		{/foreach}
		</ul>
        </div>
		{* Javascript moved here to fix bug #PSCFI-151 *}
		<script type="text/javascript">
		// <![CDATA[
			// we hide the tree only if JavaScript is activated
			$('div#categories_block_left ul.dhtml').hide();
		// ]]>
		</script>
<!-- /Block categories module -->

category-tree-branch.tpl

<li {if isset($last) && $last == 'true'}class="last" {else} class=""{/if}>
<a href="{$node.link|escape:'htmlall':'UTF-8'}" {if isset($currentCategoryId) && $node.id == $currentCategoryId}class="active has-sub" {else} class="has-sub" {/if} title="{$node.desc|escape:'htmlall':'UTF-8'}"><span>{$node.name|escape:'htmlall':'UTF-8'}</span></a>
{if $node.children|@count > 0}
  <ul>
		{foreach from=$node.children item=child name=categoryTreeBranch}
			{if $smarty.foreach.categoryTreeBranch.last}
				{include file="$branche_tpl_path" node=$child last='true'}
			{else}
				{include file="$branche_tpl_path" node=$child last='false'}
			{/if}
		{/foreach}
		</ul>
	{/if}
</li>

Style CSS

#cssmenu > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  line-height: 1;
}
/* The container */
#cssmenu > ul {
  display: block;
  position: relative;
  width: 150px;
}
/* The list elements which contain the links */
#cssmenu > ul li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
}
/* General link styling */
#cssmenu > ul li a {
  /* Layout */

  display: block;
  position: relative;
  margin: 0;
  border-top: 1px dotted #fff;
  border-bottom: 1px dotted #d9d9d9;
  padding: 11px 20px;
  /* Typography */

  font-family: Helvetica, Arial, sans-serif;
  color: #e4433c;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #fff;
  font-size: 13px;
  font-weight: 300;
  /* Background & effects */

  background: #eaeaea;
}
/* Rounded corners for the first link of the menu/submenus */
#cssmenu > ul li:first-child > a {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-top: 0;
}
/* Rounded corners for the last link of the menu/submenus */
#cssmenu > ul li:last-child > a {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom: 0;
}
/* The hover state of the menu/submenu links */
#cssmenu > ul li a:hover,
#cssmenu > ul li:hover > a {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  background: #f23f37;
  background: -webkit-linear-gradient(#f23f37, #e7180f);
  background: -moz-linear-gradient(#f23f37, #e7180f);
  background: linear-gradient(#f23f37, #e7180f);
  border-color: transparent;
}
/* The arrow indicating a submenu */
#cssmenu > ul .has-sub > a::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 10px;
  width: 0px;
  height: 0px;
  /* Creating the arrow using borders */

  border: 4px solid transparent;
  border-left: 4px solid #e4433c;
}
/* The same arrow, but with a darker color, to create the shadow effect */
#cssmenu > ul .has-sub > a::before {
  content: "";
  position: absolute;
  top: 17px;
  right: 10px;
  width: 0px;
  height: 0px;
  /* Creating the arrow using borders */

  border: 4px solid transparent;
  border-left: 4px solid #fff;
}
/* Changing the color of the arrow on hover */
#cssmenu > ul li > a:hover::after,
#cssmenu > ul li:hover > a::after {
  border-left: 4px solid #fff;
}
#cssmenu > ul li > a:hover::before,
#cssmenu > ul li:hover > a::before {
  border-left: 4px solid rgba(0, 0, 0, 0.25);
}
/* THE SUBMENUS */
#cssmenu > ul ul {
  position: absolute;
  left: 100%;
  top: -9999px;
  padding-left: 5px;
  opacity: 0;
  width: 150px;
  /* The fade effect, created using an opacity transition */

  -webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in;
}
#cssmenu > ul ul li a {
  font-size: 12px;
}
/* Showing the submenu when the user is hovering the parent link */
#cssmenu > ul li:hover > ul {
  top: 0px;
  opacity: 1;
  z-index: 1;
}

Je n'ai rien touché au fichier treeManagement.js, mais peut être il y à quelque chose à modifier la dedans ? Mes compétences en javascript sont insuffisante pour appliquer ma dernière modif et j'aurais bien besoin de votre aide pour finalisé ce menu, j'y suis presque !

Edited August 21, 2014 by Denys06 (see edit history)

[ventesites]

j'utilise prestashop 1.6.9, derniere version, et les icones sont crées avec une police qui s'appelle "FontAwesome".

 

Tu télécharges le fichier qui est ici :

http://fortawesome.github.io/Font-Awesome/

 

une fois decompresse le dossier entier va dans

 theme/css/font-awesome

 

ensuite sur ta feuille CSS tu appelles les icones que tu veux de cette facon :

 

  #categories_block_left li li a:before {
      content: "\f0a4";
      font-family: "FontAwesome";

font-size:12pt;
      line-height: 19px;
      padding-right: 8px; }

 

cet exemple met une petite main devant chaque catégorie et la taille /couleur/gras etc. fonctionne comme les autres fonts: 12px, 12pt etc. selon que tu les veux + ou - grandes

 

tu as les icones ici

 

http://fortawesome.github.io/Font-Awesome/icons/

 

quand tu en selectionnes une, en haut tu vois le dessin et son code (exemple icone main): Unicode : f0a4

 

perso ca me semble beaucoup plus facile a utiliser, si ca peut t'aider.....

 

[Denys06]

Bonjour et merci pour ta réponse,

Malheureusement je ne cherche pas un nouveau style d'icone...

 

Désolé je me suis peut être mal expliqué concernant le problème que je rencontre.

Je ne sais pas comment dire au script d'appliquer l'icone de la flèche à droite des catégories (via le css background par exemple) quand une catégorie comporte des sous catégories. En d'autre terme j'aimerais que les catégories comportant une sous catégories utilise un autre style que le class=""{/ actuellement définis. Si me met un style dans class=""{/ il l'appliquera pour TOUTES les catégories ce qui n'est pas ce que je désire...

J'éspère que tu à compris mon problème : je désirerais obtenir le même résultat que sur cette exemple : http://cssmenumaker.com/menu/chromed-flyout ce qui n'est pas le cas avec mon code actuelle. Malgré tout ça toutes les icones de ton lien sont bien belles et pourront m'être utile par la suite.