Jump to content

creating fixed menu bar


Jiten rash (away)

Recommended Posts

hello all lets create a j query fixed menu for your site

lets go straight first open header.tpl

and add some javascript

{literal}
<script type="text/javascript">
$(function(){

    var menu = $('#menu'),
        pos = menu.offset();

        $(window).scroll(function(){
            if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('default').addClass('fixed').fadeIn('fast');
                });
            } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('fixed').addClass('default').fadeIn('fast');
                });
            }
        });

});
</script>
{/literal}

 

next open modules>blocktopmenu>blocktopmenu.tpl we just need to add a divsion

 

 

 

<div id="menu" class="default">
    <div class="sf-contener clearfix">
        <ul class="sf-menu clearfix">
            {$MENU}
            {if $MENU_SEARCH}
                <li class="sf-search noBack" style="float:right">
                    <form id="searchbox" action="{$link->getPageLink('search')}" 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:'htmlall':'UTF-8'}{/if}" />
                        </p>
                    </form>
                </li>
            {/if}
        </ul>
    </div></div>

Note :Menu id name menu may conflict with other html tag in that case u need to change to other name and also on java script.

 

add this at blocktopmenu>css>superfish-modified>

.fixed {	position: fixed;	top: -1px;	left: 0;	width: 100%;}

DEMO note:  i have 980px menu not full width 100% but 100% recommenced.

Link to comment
Share on other sites

  • 4 months later...

Thanks jiten 

I have modified in latest 1.5.6.1

But the menu bar scrolling behind all images, i mean when menu bar moving/ scrolling , this going behind all blocks or images not showing properly 

any modification still required ?  Please help me

 

Thanks

RY

Link to comment
Share on other sites

Thanks jiten 

I have modified in latest 1.5.6.1

But the menu bar scrolling behind all images, i mean when menu bar moving/ scrolling , this going behind all blocks or images not showing properly 

any modification still required ?  Please help me

 

Thanks

RY

 

please share url, it will be much easier to help after inspection of your website and code there.

thanks in advance

Link to comment
Share on other sites

  • 9 months later...

Hi there,

 

I am having difficulties using this code. I really don't know JS or jQuery so I think I am doing something wrong.

 

I did this:

I added the JS code to the header.tpl file from my theme (www.mysite.com/mytheme/header.tpl. I tried adding the code before the head, in the head, with and without the {literal} tag, no matter what I do, when I check to see the page source I don't see this code. Therefore, the menu doesn't remain fixed. I checked and I have mo #menu on my main navigation menu so there's no conflict of same ids.

 

Could I get some help on this? I am using PS 1.6.

 

Thank you!

Link to comment
Share on other sites

OK, so I finally managed to make this work. But I have some clarifications:

- insert the JavaScript code in the header.tpl file from the theme you are using (don't use the {literal} tags)

- add the "menu" id to the blocktopmenu.tpl located in your theme/modules/blocktopmenu. If you don't have this module under your theme, then add it in the original location

- the CSS code that must be added in the superfish.css file ... well it didn't work for me, so I added it to global.css, at the bottom of the file

- if you have a fixed width menu you'll have to remove the "left" attribute from CSS.

 

My code wasn't working because I added the "menu" id to the blocktopmenu located in the site's root. So when I added the #menu to the blocktopmenu located under my theme's modules, everything worked great!

 

Thank you so much Jiten rash for your contribution. I am using PS 1.6.0.9

Edited by dolphspeed99 (see edit history)
Link to comment
Share on other sites

  • 3 months later...
  • 4 weeks later...

Hi faublak,

 

Could you tell me if you've solved the problem and how did you do it? I have the same problem.

 

Thank You!!

Hola alberto. Yo lo pude hacer pero con el nav bar la barra superior negra, no se si te sirva. 

Link to comment
Share on other sites

Muchas gracias faublak por tu rápida respuesta y en castellano!!

 

Voy a intentar hacer lo que propone dolphspeed99 para ver si funciona. He instalado la versión 1.6.0.13. Iremos hablando pq seguro que necesitaré ayuda. 

 

Os diré si todo va bien.

 

Gracias de nuevo!!! 

En efecto esa fue la solución que yo pude aplicar. Espero tengas suerte con ello. Un saludo..!

Link to comment
Share on other sites

  • 2 weeks later...
  • 4 weeks later...

Buenas tardes!

 

En mi caso funciona correctamente, pero tengo un problema... 

 

Tengo un menu muy extenso verticalmente y al desplegar no me permite desplazarme hacia las opciones del menu que estan por debajo (menos aun en la versión responsive).

 

Alguien sabe lo que podría hacer? Llevo un par de días con esto pero no consigo dar con la solución.

 

Muchas gracias!!!!

Link to comment
Share on other sites

Buenas tardes!

 

En mi caso funciona correctamente, pero tengo un problema... 

 

Tengo un menu muy extenso verticalmente y al desplegar no me permite desplazarme hacia las opciones del menu que estan por debajo (menos aun en la versión responsive).

 

Alguien sabe lo que podría hacer? Llevo un par de días con esto pero no consigo dar con la solución.

 

Muchas gracias!!!!

Hola efrenawer, puedes por favor colocar el link de tu sitio para poder verificar cual puede ser tu problema. Gracias y un saludo. 

Link to comment
Share on other sites

Ya lo solventé!

 

Añadí lo siguiente al css:

    overflow-y:scroll;

    height:100%;

 

.fixed {
    position: fixed;
    top: -1px;
    left: 0;
    width: 100%;

    overflow-y:scroll;

    height:100%;

}

 

Gracias por contestar!!

Link to comment
Share on other sites

  • 4 weeks later...

Excuse me for the question in Spanish, I did it due to I thought I could do it in every language.

I hope next time do the firts question in english rather than other different language.

Nevertheless do you know how to do an menu like the fixed menu from this forum?

Thank.

Link to comment
Share on other sites

Hi Marbeweb,

 

There is a specific subforum part for English language here :

https://www.prestashop.com/forums/forum/82-foro-en-espa%C3%B1ol/

 

 

To answer your question:

You could do some test on how much you scrolled away from the top edge and adapt the css accordingly (maybe add/remove a class to the element, which in turn changes the div height, and maybe display:none's some elements to hide them from view. And maybe zoom/resize the image a little.

 

Here an example on how to check for scrolling x amount away from the top

 

<script>

$(window).scroll(function() {
  if ($(this).scrollTop() > 200) {
    $('.fixedelement').css({
      'display': 'none'         // example css change...
    });
  }
});

</script>

 

 

Hope this helps,

pascal.

Link to comment
Share on other sites

  • 1 month later...

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...