Jump to content

rendre fixed le menu top horizontal (plus décalage du padding)


Recommended Posts

Bonjour je post ça ici car le développeur ne veux m'aider (hors garanti blablabla) et veux me faire payer 200€ pour une nouvelle license, bref...

 

Lorsque l'ont se rend sur ce site (www.desineo.fr/fr) on peux voir:

-en haut a droite, le rrécapitulatifdu panier dans le header.

-juste en dessous du header un menu (120 padding left).

Ce que j'aimerais faire c'est que lors du scroll, le récapitulatif du panier se colle en haut (ça c'est bon) mais surtout que le menu horizontal se colle aussi. Mais attention (et c'est laque le script pourrais m'être utile), je voudrais passer le padding du menu en 0px (ou genre 5x) afin que le panier ne cache pas la partie (hitech/spa).

Le problème est que vu que le script fonctionne sur mon module panier (j'utilise prestashop) il devrait fonctionner sur le menu. Mais impossible de le faire fonctionner (le menu ne se stick pas, il ne passe pas en fixed lorsque l'ont scroll).

le fonctionnement de presta est chelou je l'accord car on retrouve un fichier tpl et plusieurs fichiers css bref je vous link tout ça au cas ou.

<!-- MODULE PM_AdvancedTopMenu || Presta-Module.com -->
{if !isset($advtmThemeCompatibility) || (isset($advtmThemeCompatibility) && $advtmThemeCompatibility)}</div>{/if}
<div class="clear"></div>
<div id="adtm_menu">
<div id="adtm_menu_inner">
<ul id="menu">
{foreach from=$advtm_menus item=menu name=loop}
{if ($menu.privacy eq 2 && $isLogged) || ($menu.privacy eq 1 && !$isLogged) || (!$menu.privacy)}
{assign var='menuHaveSub' value=$advtm_columns_wrap[$menu.id_menu]|count}
<li class="li-niveau1 advtm_menu_{$menu.id_menu|intval} {if $menuHaveSub} sub{/if}">{$advtm_obj->getLinkOutputValue($menu,'menu',true,$menuHaveSub,true)}{if $menuHaveSub}<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<div class="adtm_sub" id="adtm_sub_{$menu.id_menu|intval}">
	
		<table class="columnWrapTable"><tr>
		{foreach from=$advtm_columns_wrap[$menu.id_menu] item=column_wrap name=loop2}
			{if ($column_wrap.privacy eq 2 && $isLogged) || ($column_wrap.privacy eq 1 && !$isLogged) || (!$column_wrap.privacy)}
				<td class="adtm_column_wrap_td advtm_column_wrap_td_{$column_wrap.id_wrap|intval}">
				<div class="adtm_column_wrap advtm_column_wrap_{$column_wrap.id_wrap|intval}">
				{if trim($advtm_obj->realStripTags4Smarty($column_wrap.value_over,'<object><img>'))}
					{$column_wrap.value_over}
				{/if}
				<div class="adtm_column_wrap_sizer"> </div>
				{foreach from=$advtm_columns[$column_wrap.id_wrap] item=column name=loop3}
					{if ($column.privacy eq 2 && $isLogged) || ($column.privacy eq 1 && !$isLogged) || (!$column.privacy)}
						{assign var='menuColumnWrapValue' value=$advtm_obj->getLinkOutputValue($column,'column',true)}
						{if trim($advtm_obj->realStripTags4Smarty($column.value_over,'<object><img>'))}
							{$column.value_over}
						{/if}
						<div class="adtm_column adtm_column_{$column.id_column|intval}">
						{if $menuColumnWrapValue}<span class="column_wrap_title"><h5>{$menuColumnWrapValue}</h5></span>{/if}
						{assign var='columnHaveElement' value=$advtm_elements[$column.id_column]|count}
						{if $columnHaveElement}
							<ul class="adtm_elements adtm_elements_{$column.id_column|intval}">
							{foreach from=$advtm_elements[$column.id_column] item=element name=loop3}
								{if ($element.privacy eq 2 && $isLogged) || ($element.privacy eq 1 && !$isLogged) || (!$element.privacy)}
									<li>{$advtm_obj->getLinkOutputValue($element,'element',true)}</li>
								{/if}
							{/foreach}
							</ul>
						{/if}
						</div>
						{if trim($advtm_obj->realStripTags4Smarty($column.value_under,'<object><img>'))}
							{$column.value_under}
						{/if}
					{/if}

				{/foreach}
				{if  trim($advtm_obj->realStripTags4Smarty($column_wrap.value_under,'<object><img>'))}
					{$column_wrap.value_under}
				{/if}
				</div>
				</td>
			{/if}
		{/foreach}
		</tr></table>
		{if trim($advtm_obj->realStripTags4Smarty($menu.value_under,'<object><img>'))}
			{$menu.value_under}
		{/if}
	</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
{/if}</li>
{/if}
{/foreach}
</ul>
<div class="clear"></div>
</div>
</div>
{if !isset($advtmThemeCompatibility) || (isset($advtmThemeCompatibility) && $advtmThemeCompatibility)}<div>{/if}
<!-- /MODULE PM_AdvancedTopMenu || Presta-Module.com -->

les 2 css:

#adtm_menu {position: relative; clear:both;text-align:left;zoom:1;}
#adtm_menu_inner {border-style:solid;}
#adtm_menu ul#menu { margin:0; list-style:none;}
#adtm_menu ul#menu li.li-niveau1 { float:left; }
#adtm_menu ul#menu li.li-niveau1 a.a-niveau1 { display:block; float:left; border-style:solid; text-decoration:none; font-weight:bold; }
#adtm_menu ul#menu li.li-niveau1 a.a-niveau1 .advtm_menu_span {padding:0 10px 0 10px;display:block;}
/* IE6 */ * html #adtm_menu ul#menu li.li-niveau1 a.a-niveau1 .advtm_menu_span {display:inline-block;}
#adtm_menu ul#menu li.sub a.a-niveau1 {}
#adtm_menu ul#menu li.li-niveau1 a.a-niveau1:hover, #adtm_menu ul#menu li.li-niveau1:hover a.a-niveau1 {}
#adtm_menu ul#menu li.sub a.a-niveau1:hover {}
#adtm_menu ul#menu li.sub:hover > a.a-niveau1 span {}
#adtm_menu ul#menu li div.adtm_sub { position:absolute; left:-9999px; padding:0;border-style:solid;}
/* IE6 */ * html #adtm_menu table { border-collapse:collapse; margin:-1px -10px; font-size:1em; width:0; height:0; }
#adtm_menu ul#menu :hover div.adtm_sub {left:0;}
#adtm_menu ul#menu a:hover div.adtm_sub {left:-1px; top:-10px;}
#adtm_menu div.adtm_column_wrap {}
#adtm_menu div.adtm_column_wrap span.column_wrap_title {padding:5px 0 0 0; margin:0;text-align:left; font-weight: bold; display: block}
#adtm_menu div.adtm_column_wrap ul {padding:0; margin:0; list-style:none;zoom:1;}
#adtm_menu div.adtm_column_wrap ul li {line-height:15px; padding:0; margin:0;zoom:1;}
#adtm_menu div.adtm_column_wrap ul li a {display:block; text-decoration:none; font-weight:normal; text-align:left;}
#adtm_menu div.adtm_column_wrap ul li a:hover {text-decoration:underline;}
#adtm_menu table.columnWrapTable {margin:0;padding:0; border-collapse:collapse; margin:0;}
#adtm_menu table.columnWrapTable tr td {vertical-align:top;}
#adtm_menu table.columnWrapTable tr td div.adtm_column_wrap {}
#adtm_menu .adtm_column_wrap_sizer {font-size:0;height:0;line-height:0;}
/* Fix bug IE link with filter property */
#adtm_menu ul#menu li.li-niveau1 a.a-niveau1 {cursor : pointer;}
/* Not available on PS 1.5 */
.clear { clear: both }
img.adtm_menu_icon {vertical-align:middle;margin-right:3px;}
#adtm_menu .searchboxATM .search_query_atm {width:150px;margin-left:0!important;}
#adtm_menu .searchboxATM .button_mini {display:inline-block;}
#adtm_menu .adtm_unclickable {text-decoration:none!important;}
#adtm_menu_inner {background-color: #ffffff;}
#adtm_menu_inner {padding:3px 0px 2px 120px;margin:0px 0px 2px 0px;border-color:#3bafda;border-width:0px 0px 0px 0px;}
#adtm_menu .li-niveau1 a.a-niveau1 {height:30px;line-height:29px;}
#adtm_menu .li-niveau1 {line-height:19px;}
#adtm_menu .li-niveau1 a.a-niveau1 .advtm_menu_span {height:30px;line-height:29px;}
#adtm_menu ul#menu li div.adtm_sub {top:30px;}
.li-niveau1 {padding:0px 0px 0px 0px;margin:0px 2px 2px 2px;}
.li-niveau1 .advtm_menu_span, .li-niveau1 a .advtm_menu_span {color:#4d4d4d;}
.li-niveau1 a:hover .advtm_menu_span, .li-niveau1 a.advtm_menu_actif .advtm_menu_span, .li-niveau1:hover > a.a-niveau1 .advtm_menu_span {color:#304f90;}
.li-niveau1 a .advtm_menu_span, .li-niveau1 .advtm_menu_span {background-color:;}
.li-niveau1 a:hover .advtm_menu_span, .li-niveau1 a.advtm_menu_actif .advtm_menu_span, .li-niveau1 .advtm_menu_span:hover, .li-niveau1:hover > a.a-niveau1 .advtm_menu_span {background-color:#3bafda;}
.li-niveau1 a.a-niveau1 {border-color:#3bafda;border-width:0px 0px 0px 0px;}
.li-niveau1 .adtm_sub {border-color:#304f90;border-width:1px 1px 8px 1px;}
.li-niveau1 .adtm_sub {background-color:#ffffff;}
.li-niveau1 .adtm_sub {width:100%px;}
.li-niveau1 .adtm_sub {min-height:250px;}
* html .li-niveau1 .adtm_sub {height:250px;}
#adtm_menu div.adtm_column_wrap {min-height:250px;}
* html #adtm_menu div.adtm_column_wrap {height:250px;}
.adtm_column_wrap span.column_wrap_title, .adtm_column_wrap span.column_wrap_title a {color:#304f90;}
.adtm_column_wrap span.column_wrap_title:hover, .adtm_column_wrap span.column_wrap_title a:hover {color:;}
.adtm_column_wrap a {color:#4d4d4d;}
.adtm_column_wrap a:hover {color:#3bafda;}
#adtm_menu .adtm_column_wrap {padding:10px 10px 10px 10px;}
#adtm_menu .adtm_column {padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;}
#adtm_menu .adtm_column ul.adtm_elements li a {padding:5px 0px 0px 0px;margin:0px 0px 0px 0px;}
#adtm_menu .li-niveau1 a.a-niveau1 .advtm_menu_span {font-size:14px;}
#adtm_menu .li-niveau1 a.a-niveau1 .advtm_menu_span {font-family:Arial, Helvetica, sans-serif;}
#adtm_menu .adtm_column span.column_wrap_title, #adtm_menu .adtm_column span.column_wrap_title a {font-size:14px;}
#adtm_menu .adtm_column ul.adtm_elements li, #adtm_menu .adtm_column ul.adtm_elements li a {font-size:12px;}
#adtm_menu .adtm_column ul.adtm_elements li, #adtm_menu .adtm_column ul.adtm_elements li a {font-family:Arial, Helvetica, sans-serif;}
#adtm_menu {z-index:9;}
.li-niveau1 .adtm_sub {z-index:1000;}

et mon fameux JS:

<script type="text/javascript">
(function(){
 
  var $win = $(window),
      $stck = $('#sticky'),
      $a_stck = $('#sticky-anchor');
   
  function sticky_relocate() {
    var w_top = $win.scrollTop(),
        a_top = $a_stck.offset().top,
        m_top = $('#adtm_menu').offset().top;
     
    // verif. stick
    if (w_top > a_top) {
        $a_stck.height( $stck.addClass('stick').outerHeight() );
    } else {
        $stck.removeClass('stick');
        $a_stck.height(0);
    }
     
    // verif. large
    $stck[ w_top > m_top ? 'addClass' : 'removeClass' ]('large');
  }
   
  $(function() {
    $win.scroll(sticky_relocate);
    sticky_relocate();
  });
   
})();
</script>

voila voila... En attente de votre aide si possible =)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...