blocktopmenu

soufiane011 · January 16, 2015

Bonjour tout le monde,

Je suis un developpeur de cms Joomla et je viens d'inscrire sur prestashop pour debuter le developpement des sites de commerce, je viens de creer un theme basé sur bootstrap defaut et j'aimerais bien mettre le meme menu horizontal responsive sur ce forum, j'ai trouvé le fichier blocktopmenu.tpl qui s'occupe de modifier la structure de code et le fichier golobal.css pour ajouter les codes css.

Merci de m'aider pour réaliser le meme horizontal menu responsive.

Alexandre Carette · January 16, 2015

j'aimerais bien mettre le meme menu horizontal responsive sur ce forum

Je veux bien t'aider mais j'ai du mal à comprendre ce que tu veux faire...

Edited January 16, 2015 by Alexandre-KM (see edit history)

soufiane011 · January 16, 2015

Bonjour Alexandre,

Tout d'abord merci pour votre réponse.

Ce qui concerne mon problème: j'aimerais réaliser le meme menu qui se trouve en haut de ce forum sur le thème bootsrap par défaut de prestashop 1.6

Merci

Alexandre Carette · January 16, 2015

ah ok merci je comprend mieux

Alexandre Carette · January 16, 2015

on parle bien de ce menu la ?

soufiane011 · January 16, 2015

Oui c'est ça l'affichage sur les smarts phones et tablette

soufiane011 · January 16, 2015

il est très simple base sur bootstrap, je peux le faire on html5+ css3 mais comment l'ajouter sur prestashop 1.6 sans passer par création du module?

Alexandre Carette · January 16, 2015

ca m'intéresse de faire ca... mais sur le blocktopmenu du 1.6 il est deja responsive, faut juste le customiser alors, ou reprendre un menu bootstrap classique et faire en sorte d'y mettre le comportement du blocktopmenu

Alexandre Carette · January 16, 2015

a mon sens il faut modifier le module blocktopmenu changer l' appelle des fichier css et js, refaire le code en utilisant les class d un menu classique bootstrap

Alexandre Carette · January 16, 2015

note que le menu de prestashop bug quand tu cliques sur les "plus" pour derouler les sous cat (cliques deux fois)

Edited January 16, 2015 by Alexandre-KM (see edit history)

soufiane011 · January 16, 2015

Oui je sais de toute façon merci pour vos réponses je vais voir ça plus tard.

Alexandre Carette · January 16, 2015

j ai besoin d'effectuer cette modif sur mon site www.tangence-web.com... je vais essayer de poster le code ici, je pense faire un module afin de mieux l'intégrer...

soufiane011 · January 16, 2015

oui c'est bien

soufiane011 · January 17, 2015

Hi again,

I fixed de top menu horizontal but the categries not displayed.

This the codes:

Dans votre theme/modules/blocktopmenu/blocktopmenu.php

----------------------------------------------------------------------

//add by sbahjaoui
public function hookdisplayHeader($params){
$this->context->controller->addCSS($this->_path.'css/superfish-modified.css');
$this->context->controller->addCSS($this->_path.'css/assets/base.css');
}

Dans votre theme/modules/blocktopmenu/css/superfish-modified.css

______________________________________________________

/*** ESSENTIAL STYLES ***/
.sf-contener {
	clear: both;
}
.sf-right {
  margin-right: 14px;
  float: right;
  width: 7px;
}
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.sf-menu {
	margin: 10px 0;
	padding:0;
	width:980px;/* 980 */
	background: #383838;
}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width:			100%;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:			left;
	position:		relative;
	border-right: 1px solid #777;
}
.sf-menu a {
	display:		block;
	position:		relative;
	color:#fff;
	text-shadow:0 1px 0 #333;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	top:			34px; /* match top ul list item height */
	z-index:		99;
	width:auto
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			200px; /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			200px; /* match ul width */
	top:			0;
}

/*** DEMO SKIN ***/
.sf-menu {
	float:			left;
	margin-bottom:	1em;
}
.sf-menu a {
	display:block;
	margin-right:2px;
	padding: 0 22px 0 20px;
	line-height:34px;
	border: 0;
	text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#fff;
	white-space:nowrap;
}
.sf-menu li li {
	background: rgba(113, 113, 113, 0.9);
}
.sf-menu li li li {
	background:	rgba(113, 113, 113, 0.9);
}
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
  	background: #4E4E4E;
}
.sf-menu ul li:hover, .sf-menu ul li.sfHover,
.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {
	background:		#4e4e4e;
	outline:		0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
	padding-right: 	2.25em;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			10px;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;
	background:		url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top: 11px;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('../img/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-bottom-left-radius: 17px;
	-moz-border-top-right-radius: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}
li.sf-search {
  background: inherit;
  float: right;
  line-height: 25px;
}
li.sf-search input {
  -moz-border-radius: 0 5px 5px 0;
  padding: 3px 0;
  padding-left: 20px;
  margin: 6px 6px 0 0;
  background: #fff url('../img/search.gif') no-repeat left center;
  border:1px solid #777
}

/* hack IE7 */
.sf-menu a, .sf-menu a:visited {height:34px !IE;}
.sf-menu li li {
	width:200px;
	background:#726f72 !IE;
}

Dans votre theme/modules/blocktopmenu/css/assets/base.css

------------------------------------------------------------------------------

/* WEB FONT */
@import url(http://fonts.googleapis.com/css?family=Signika:600|Varela+Round);

/* RESET */
* {
  margin: 0;
  padding: 0;
  border: 0;
}
/* BASIC */

h1, h2 {
  font-family: "Signika", sans-serif;
  font-weight: 600;
}
h1 {
  font-size: 36px;
  line-height: 46px;
  color: #e0e0e0;
}
h2 {
  font-size: 24px;
  line-height: 33px;
  margin-bottom: -20px;
}

a:link, a:visited, a:hover, a:active {
  text-decoration: none;
}

/* LAYOUT */
.fixed-nav-bar {
  box-shadow: 0px 0px 3px 0px rgba(50, 50, 50, 0.6);
}


.button, .button:visited, .button-dark {
  display: inline-block;
  max-width: 200px;
  margin: 50px 10px 30px 10px;
  padding: 10px;
  font-family: "Signika", sans-serif;
  color: #ffffff;
  background-color: transparent;
  border: 2px solid #ffffff;
  border-radius: 3px;
  text-transform: capitalize;
  text-align: center;
  transition: all 0.1s ease;
}
.button-dark, .button-dark:visited {
  margin: 20px 10px 30px 0;
  color: #464646;
  border-color: #464646;

}
.button:hover, .button-dark:hover {
  transition: all 0.3s ease;
}
.button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.button-dark:hover {
  color: #ffffff;
  background-color: rgba(70, 70, 70, 0.9);
}

Dans root/themes/votre theme/modules/blocktopmenu/blocktopmenu.tpl

{if $MENU != ''}
<nav class="fixed-nav-bar">
  <div id="menu" class="menu">
  {l s="Categories" mod="blocktopmenu"}
    <a class="sitename" href="fixed-navigation-bar.html"><img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/></a>
    <!-- Example responsive navigation menu  -->
	<a class="show" href="{if $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">Menu</a><a class="hide" href="#hidemenu">Menu</a>
										<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
									</a>
    <ul class="menu-items">
      {$MENU}
			{if $MENU_SEARCH}
				<li class="sf-search noBack" style="float:right">
					<form id="searchbox" action="{$link->getPageLink('search')|escape:'html':'UTF-8'}" method="get">
						<p>
							<input type="hidden" name="controller" value="search" />
							<input type="hidden" value="position" name="orderby"/>
							<input type="hidden" value="desc" name="orderway"/>
							<input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|escape:'html':'UTF-8'}{/if}" />
						</p>
					</form>
				</li>
			{/if}
  </ul>
  </div>
</nav>
{/if}

Edited January 17, 2015 by soufiane011 (see edit history)

Alexandre Carette · January 17, 2015

Donc je suis partie sur la modif du module, ca marche pas mal... j'ai intégré le block panier et le block recherche au menu... cf mon site lien en signature...
dans blocktopmenu.php j ai modif la fonction principal de la manière suivante:

private function generateCategoriesMenu($categories, $is_children = 0)
	{
		$html = '';

		foreach ($categories as $key => $category)
		{
			if ($category['level_depth'] > 1)
			{
				$cat = new Category($category['id_category']);
				$link = Tools::HtmlEntitiesUTF8($cat->getLink());
			}
			else
				$link = $this->context->link->getPageLink('index');

			$html .= '<li '.(($this->page_name == 'category'
				&& (int)Tools::getValue('id_category') == (int)$category['id_category']) ? ' class="dropdown"' : '').'>';
			
			if ((int)$category['level_depth'] > 1 && !$is_children)
				{
				$html .= '<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">';
			$html .=  $category['name'];
			$html .= '<span class="caret"></span></a>';
			}
			else
			$html .= '<a href="'.$link.'" title="'.$category['name'].'">'.$category['name'].'</a>';

			

			if (isset($category['children']) && !empty($category['children']))
			{
				$html .= '<ul class="dropdown-menu" role="menu">';
				$html .= $this->generateCategoriesMenu($category['children'], 1);


				if ((int)$category['level_depth'] > 1 && !$is_children)
				{
					$files = scandir(_PS_CAT_IMG_DIR_);

					/*if (count($files) > 0)
					{
						$html .= '<li class="category-thumbnail">';

						foreach ($files as $file)
							if (preg_match('/^'.$category['id_category'].'-([0-9])?_thumb.jpg/i', $file) === 1)
								$html .= '<div><img src="'.$this->context->link->getMediaLink(_THEME_CAT_DIR_.$file)
								.'" alt="'.Tools::SafeOutput($category['name']).'" title="'
								.Tools::SafeOutput($category['name']).'" class="imgm" /></div>';

						$html .= '</li>';
					}*/
				}

				$html .= '</ul>';

			}
			$html .= '</li>';

		}

		return $html;
	}

soufiane011 · January 18, 2015

Bonjour Alexandre,

Je viens de tester votre code chez moi en local mais ça marche pas, peut etre parceque j'ai changé la position de mon menu, or sur votre site ça marche bien, il faut just essayer d'ajouter des icon sur les <li>

blocktopmenu

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in