10 Replies Latest reply on Nov 11, 2016 7:40 AM by Unicycle Rob

    Mobile Hamburger Sub-Menus

    Unicycle Rob Level 2

      Hey Guys, I have made a hamburger menu using the Panels Accordion widget in Muse a while back for my phone site. Now that my site is growing, I need to have sub options off of the listed buttons. Can anyone aid me with some ideas that have worked for you? Thanks! More in depth: • I click the hamburger menu • I get options like Home, Products, Company, News & Events, Technology and so on • Then I click Company • I'd get a few more options that I would have to choose from like: About, Board of Directors, Management Team, Contact and so on I'd greatly appreciate for anyones positive feedback! Thanks again! - Rob

        • 1. Re: Mobile Hamburger Sub-Menus
          Ussnorway Adobe Community Professional

          hi Rob, its hard to give desing help without seeing the site... have you got a url?

          • 2. Re: Mobile Hamburger Sub-Menus
            Nine_Design Level 3

            If your hamburger menu is an accordion widget -  then you can place a second accordion widget  inside the 1st with your sub categories.

            Just make sure to clear all styles / states before you place it as it can be a pain clicking multiple times to dig deeper into the second accordion to style it.

             

             

            Good luck

            Garry

            1 person found this helpful
            • 3. Re: Mobile Hamburger Sub-Menus
              Unicycle Rob Level 2

              Thanks Nine_Design,

              I'll give that a try.

              • 4. Re: Mobile Hamburger Sub-Menus
                Unicycle Rob Level 2

                Nine_Design,

                I just tried doing this. Its kind of working but, one of the buttons is an anchor link. Now that this is in place, the accordion does not collapse after click. Do you or anyone know how to do this? Once I figure this out then I think we've figured it out.

                 

                Thanks again!

                • 5. Re: Mobile Hamburger Sub-Menus
                  Nine_Design Level 3

                  Unfortunately I can't recreate your problem... works ok for me.

                   

                  Have you clicked 'can close all' on the accordion widget?

                  accordion.jpg

                  • 6. Re: Mobile Hamburger Sub-Menus
                    Unicycle Rob Level 2

                    Yes I have this option checked. I see when I click the anchor button it scrolls the page, but after closing the accordion I'm at the right section of the page. The problem is that its not collapsing after I click it.

                     

                    I just found this blog where some guy had the same issue but somehow this girl was about to do it perfectly. Check it out!

                     

                    Submenus in mobile menu issue | MuseThemes Forum

                     

                    Not only that but she supplied the attachment to download. To bad that we couldn't learn how to make it the way she did.
                    Zippyshare.com - Collapsable Menu.mulib

                     

                    Thanks,

                    - Rob

                    • 7. Re: Mobile Hamburger Sub-Menus
                      Unicycle Rob Level 2

                      So I just finished redesigning this thing i found (Previous post). And its doing the same thing that i had put together previously. When the button is clicked on the panels don't close after clicking. They stay open.

                       

                      Still trying to figure this out. Looks like a lot of blogs I come across are having the same issue.

                      • 8. Re: Mobile Hamburger Sub-Menus
                        Unicycle Rob Level 2

                        The only time the accordion closes is when a new page is loaded. So maybe if I have it link to the URL adding the anchor address #board-of-directors.

                         

                        This might be the answer...

                        ...Didn't work.

                         

                        I played around with a few more ideas and I thought of a work around. So the only way it closes is when you are brought to a new page. With an anchor you slides the page down for you. Its doesn't load the page as new. So, what I did was I have 4 links in my sub menu. Then I created with sublime text an html re-direct page (4 of them for each link/button) that will go to the anchored spot to the original page. This is making the menu "forcefully" re-load allowing the menu to be closed once the page has loaded.

                         

                        Tested and it works for a work around, until Muse brings some kind of feature out.

                         

                        Thanks,

                        -Rob

                        • 9. Re: Mobile Hamburger Sub-Menus
                          Nine_Design Level 3

                          Looks like it might be some kind of software / browser glitch?

                           

                          I can't reproduce your error - i tried a quick mock and seems to work ok.

                          (mobile only version - right click > inspect > choose phone in Chrome)

                           

                          mock mobile menu with subcategories

                           

                          p.s. - do you preview site in browser?

                          • 10. Re: Mobile Hamburger Sub-Menus
                            Unicycle Rob Level 2

                            Yes I tested it on Chrome, Safari and Firefox. I never test in preview mode. I find that never really works that well. The link you've given me is also happening. Once you get to the anchor page and start clicking on the anchor links in the sub menu, it just scrolls down instead of refreshing the page to close the menu. When you scroll back up to look at it, the menu is still open instead of being closed. The point is after clicking it, we want the menus to close.

                             

                            With my site I've set a parallax scrolling to it to follow at the top of the browser so then the user can have options to click on again instead having to scroll back to the top. So in my situation with the menu still being open, its cover the content still so the user has to manually close it after clicking on the button.

                             

                            Sorry I may not be the best at explaining things.   I hope you understand now. I really appreciate your help with setting up that site to show me. Thanks