Advertisement:

Author Topic: Dropdown top main menu  (Read 3586 times)

Osmosis_Johnes

  • Newbie
  • *
  • Posts: 12
Dropdown top main menu
« on: May 18, 2014, 07:35:36 pm »
Hello.
I'm using repurpose theme. I would like change top menu to perform dropdown by hover instead clicking.
How to do this, what to change?
Please share your knowledge.
Thank you.

teseo

  • Hero Member
  • *****
  • Posts: 6169
Re: Dropdown top main menu
« Reply #1 on: May 18, 2014, 08:14:04 pm »
Hi,

Replace the last two lines of your Repurpose main.php:
Code: [Select]
    </body>
</html>

with:

Code: [Select]
        <script type="text/javascript">
        $("body").bind("hover", function (e) {
            $('a.menu').parent("li").removeClass("open");
        });
        $("a.menu").hover(function (e) {
            $('a.menu').parent("li").removeClass("open");
            var $li = $(this).parent("li").toggleClass('open');
            return false;
        });
    </script>
    </body>
</html>

Regards

Osmosis_Johnes

  • Newbie
  • *
  • Posts: 12
Re: Dropdown top main menu
« Reply #2 on: May 18, 2014, 11:00:39 pm »
Hi,

Replace the last two lines of your Repurpose main.php:
Code: [Select]
    </body>
</html>

with:

Code: [Select]
        <script type="text/javascript">
        $("body").bind("hover", function (e) {
            $('a.menu').parent("li").removeClass("open");
        });
        $("a.menu").hover(function (e) {
            $('a.menu').parent("li").removeClass("open");
            var $li = $(this).parent("li").toggleClass('open');
            return false;
        });
    </script>
    </body>
</html>

Regards

Thank you. It works!
If I move cursor away of menu it stay open while I not click somewhere. How to hide automatically dropped menu after moving cursor off?

Thank you for help.

Osmosis_Johnes

  • Newbie
  • *
  • Posts: 12
Re: Dropdown top main menu
« Reply #3 on: May 22, 2014, 06:55:38 am »
If I remove string
Code: [Select]
<script type="text/javascript">
        $("body").bind("hover", function (e) {
            $('a.menu').parent("li").removeClass("open");
        });
        $("a.menu").hover(function (e) {
         <!--   $('a.menu').parent("li").removeClass("open"); -->           <----------------------remove this string---------------------
            var $li = $(this).parent("li").toggleClass('open');
            return false;
        });
</script>
Then I get hidden dropdown menu but I can't hover on the list in submenu. How to hide dropdown menu only if I move off cursor from menu and list in submenu?
« Last Edit: May 22, 2014, 06:58:50 am by Osmosis_Johnes »

Osmosis_Johnes

  • Newbie
  • *
  • Posts: 12
Re: Dropdown top main menu
« Reply #4 on: June 25, 2014, 05:23:58 am »
Guys, script proposed above works only on start page of site! If I go to any page then I get not working dropdown menu.
I guess in some other file I have to change something additionally... ??? Please help!
Thank you.

Osmosis_Johnes

  • Newbie
  • *
  • Posts: 12
Re: Dropdown top main menu
« Reply #5 on: July 03, 2014, 03:23:21 am »
up

design

  • Hero Member
  • *****
  • Posts: 2619
  • Osclass 3.5 MAC/PC w/ Modern Browsers
Re: Dropdown top main menu
« Reply #6 on: July 03, 2014, 07:10:20 pm »
learn javascript. this is osclass

google the name of the script and it will tell you how to customize to your satisfaction