6 Replies Latest reply on Apr 9, 2013 10:58 AM by Nancy OShea

    Adding a responsive memu

    tochiromifune Level 1

      Hi,

       

      Is it possible to add a responsive menu that would appear horizontal for desktop and tablet devices but vertical for smartphones (in the latter case each li would have a width of 100%)?

       

      Thank you.

       

      Cheers

        • 1. Re: Adding a responsive memu
          mhollis55 Level 4

          There are JavaScript tests you can use to determine whether or not a client is mobile:

           

          function detectmob() {

          if( navigator.userAgent.match(/Android/i)

          || navigator.userAgent.match(/webOS/i)

          || navigator.userAgent.match(/iPhone/i)

          || navigator.userAgent.match(/iPad/i)

          || navigator.userAgent.match(/iPod/i)

          || navigator.userAgent.match(/BlackBerry/i)

          || navigator.userAgent.match(/Windows Phone/i)

          ){

              return true;

            }

          else {

              return false;

            }

          }

           

          Once you have tested for true, you can send a different style sheet for the mobile browsers. False and the page loads the desktop version.

           

          Also, there is a website that will detect a mobile browser and this is their solution (I can steal with the best of them!):

           

          window.mobilecheck = function() {

          var check = false;

          (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|ela ine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vo dafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|a ttw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cel l|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d )|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me( rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt )|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire |pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r3 80|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0| 1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\ -|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|t s(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|v oda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);

          return check; }

          • 2. Re: Adding a responsive memu
            tochiromifune Level 1

            But do I have to create 2 menus?  I'm using the responsive fluid template in CS6 with the Spry menu bar.

            • 3. Re: Adding a responsive memu
              mhollis55 Level 4

              I am using CS 5.5, which does not feature the responsive fluid template, but were I targeting mobile for a different experience, I would be prepared to completely change my style sheets for mobile—In your case, you're concerned with the menu structure. From my experience, I would change more than that.

               

              Mobile devices, for the most part, are completely HTML5 and CSS3 compliant. Lots of desktop browsers have varying support.

               

              -Mark

              • 4. Re: Adding a responsive memu
                tochiromifune Level 1

                I know I have to change the style sheet but what I don't understand is how to create a menu that targets both smartphones and desktops and change accordingly (smartphone = vertical menu with 100% width and desktop = horizontal menu with 50% width).  How do you do that in CS6?  Thank you.

                • 5. Re: Adding a responsive memu
                  mhollis55 Level 4

                  I cannot answer a CS6 question, though CS6 is a code editor just like 5.5. I don't have the fluid layout stuff, that was added in the CS6 version.

                   

                  But doing this from a code standpoint is the same as having CS6 inject stuff into your code, you have to do it manually.

                   

                  Project 7 (way before CS 5) came up with a method of checking for mobile (that may be outdated now) and put it into their Page Builder Magic templates which I use. There's a JavaScript detection script as well as a class reset for Webkit browsers (which was what all mobile was, prior to Mozilla mobile and Google's decision to exit Webkit) that is pretty neat. Now, what they're doing is stacking divs on top of each other, so the sidebar becomes a top div on mobile and they're displayed one after the other.

                   

                  A page I did based on their code is here.

                   

                  Beyond that, all I can do is refer you to the CS6 pros.

                  • 6. Re: Adding a responsive memu
                    Nancy OShea Adobe Community Professional & MVP

                    If you're using Fluid Grid Layouts, you need a menu system that can adapt to different device widths.  I built my own with CSS, a few media queries and a pinch of jQuery.  You can see a working example below.

                    http://alt-web.com/FluidGrid/Fluid2.html

                     

                    If you're not keen on coding your own, look at Project Seven's responsive menus.

                    http://www.projectseven.com/products/menusystems/index.htm

                     

                     

                    Nancy O.