CODEWITHSUNDEEP
jqueryhtmlcssresponsive-design
1110
1110

Reputation: 6839

How to make menu appear from left for mobile device

I have web site that display username and image at the top right corner.
I use media query to detect mobile device and then I hide that and display only user image.
Now I am trying to make that when user tap on that image to menu appear from the right like on google. enter image description here
I have tried to follow few examples but I don't understand when to use only css or css + js can somebody explain me what is the way to make this?
Thanks

UPDATE

This code should put overlay menu over content:

$('.accountImageMobile').click(function () {
                $('#over-menu').css({ left: '0' });
            });

My HTML:

<body>
    <header>
        <div id="topHeader" style="background: #f5f5f5; min-height: 42px; padding-top: 5px; padding-left: 5px; padding-right: 5PX;">
            ...
<img id="accountImageMobile" style="max-width: 45px;" src="image.jpg" alt="" />
...
</div> >>>>top  header  end

        <div id="over-menu">
            <ul>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
            </ul>
        </div>
...

But when I open site on mobile device it shows the list bellow top header...

Upvotes: 0

Views: 3286

Answers (2)

Milan and Friends
Milan and Friends

Reputation: 5610

Here's a Fiddle

#over-menu {
  background: #ff0000;
  position: absolute;
  left: -200px;
  top: 0;
  width: 200px;
}

$(function() {
  $('#accountImageMobile').click(function () {
     $('#over-menu').css({ left: '0' });
  });
});

Upvotes: 1

Matt Sisto
Matt Sisto

Reputation: 116

Snap.js is an awesome and easy-to-use JS library for doing just this. One thing to be careful of though: iOS 7 is using edge swipe gestures across the board which may interfere with any mobile UIs you work on. Just a note. You can disable swipe though, just triggering the menu from a button if you wish.

Upvotes: 0

Related Questions