9 Replies Latest reply on Apr 25, 2014 8:16 AM by Nancy OShea

    FG "hamburger menu"

    MurraySummers Level 8

      Anybody have a favorite method for making these "hamburger menus" (also referred to as "sandwich menus") in a FG layout?

        • 1. Re: FG "hamburger menu"
          osgood_ Level 8

          I just use a bit of simple onclick jQuery.

           

          I know there's a lot of plugin out there but I see no reason to use one unless you don't know how to create them.

           

          I also favour 'tiny nav js' which turns a <li></li> list into a select menu. Not so nice presentation wise but I think it takes up less real estate than the sandwich menus.

          • 2. Re: FG "hamburger menu"
            MurraySummers Level 8

            Os - say more about your jQuery, please.

            • 3. Re: FG "hamburger menu"
              MurraySummers Level 8

              Tiny nav js also shows a link to this -

               

              http://responsive-nav.com

               

              Exactly what I was looking for! Thanks for the steerage...

              • 4. Re: FG "hamburger menu"
                osgood_ Level 8

                MurraySummers wrote:

                 

                Os - say more about your jQuery, please.

                 

                I'm not sure what more I can say really. The main desktop nav hides at a given window width using media queries and up pops one of those mobile menu icon images - when clicked on the main menu appears again but formatted for mobile. Nothing fancy just does the job. I'm not even sure the 'hamburger icon' is a good idea as many people won't know to click on it intuitively. I sometimes will replace it with just the word 'navigation' or 'menu' which is a lot clearer  in my opinion. Do you rememebr the days gone by where navigation links were hidden behind 'mystery' icons and 'serious' website developers  moaned and groaned how bad that was - well why the hell is it ok now - we are going backwards?

                 

                I'm sure I could elaborate with sliding up, down or left, right but my philosophy is the user just wants to get to the information, not be entertained by a lot of crazy but advanced 'experimental' stuff I see these days. Have you noticed lately these sites where you start scrolling down and the background moves or stays fixed and is replaced by another background and another background behind another panel that has another background? Why, to me, whilst being very clever, it distracts from the primary objective - to deliver information to the end-user in a clear and precise fashion. How am I supposed to concentrate when the site itself gives me a migrame, lol.

                 

                I'm not sure the client is getting a good deal if a web developer is only concerned about showing off his extended talents.......its a bit of a grey area to me.

                • 5. Re: FG "hamburger menu"
                  osgood_ Level 8

                  MurraySummers wrote:

                   

                  Tiny nav js also shows a link to this -

                   

                  http://responsive-nav.com

                   

                  Exactly what I was looking for! Thanks for the steerage...

                   

                  I've experimented with that one above.

                   

                  Its a nicer presentation than tinynav which is bare bones but takes less real estate:

                   

                  http://tinynav.viljamis.com/

                  • 6. Re: FG "hamburger menu"
                    Nancy OShea Adobe Community Professional & MVP

                    I've been using jQuery MeanMenu with pretty good success.  Personally, I don't like tiny drop-list navs because they are hard to use with my smartphone.  MeanMenu is much more finger friendly.

                     

                    jQuery MeanMenu (responsive on mobile)

                    http://www.meanthemes.com/plugins/meanmenu/

                     

                     

                    Nancy O.

                    1 person found this helpful
                    • 7. Re: FG "hamburger menu"
                      osgood_ Level 8

                      Nancy O. wrote:

                       

                      Personally, I don't like tiny drop-list navs because they are hard to use with my smartphone. 

                       

                      Good point. I guess there is a trade off, usability or having a drop down which consumes three quarters of a smartphone screen. Not a problem if only a few links but a lot of links....hummmm.

                       

                      More to the point I'd be interested to know why you 2 are using 3rd party solutions when you have the skills to write your own?

                      • 8. Re: FG "hamburger menu"
                        Nancy OShea Adobe Community Professional & MVP

                        Yeah.  I don't put a lot of links on mobile devices. 

                         

                        N

                        • 9. Re: FG "hamburger menu"
                          Nancy OShea Adobe Community Professional & MVP

                          More to the point I'd be interested to know why you 2 are using 3rd party solutions when you have the skills to write your own?

                          I can't speak for anyone else, but I'm lazy. 

                           

                           

                          Nancy O.