• 0
mobile-responsive-boomarts-infotech

How does we get Mobile Responsive Menu Options

How does we get Mobile Responsive Menu Options

Once your responsive site mockups are ready, you will also need to decide if you plan to develop your site mobile first. The Mobile Responsive Website will improve your Performance. Mobile Responsive Menu Options is more difficult one. In this Article we will try to explain in our view.

Mobile first is a little bit of a misnomer when it comes to the CSS. Before we apply any media queries for small screens, we’re going to set all of the basic styles—for color, type, etc.—and then enhance them. There is a good reason for doing this. Many mobile browsers don’t understand media queries at all. So we need to make sure they at least get the basic style rules

Responsive Menu Options

Menus can be one of the trickiest aspects of a responsive website, but many different techniques and options have recently emerged.

The easiest option to modify a horizontal menu for smaller screen sizes is to switch it to a vertical menu. Horizontal list items that have a width set automatically for desktop browser sizes simply get a width of 100% set for mobile sizes.

Regular CSS:

nav ul li {

float:left;

width:auto; }

Mobile-size CSS:

@media (max-width: 480px) {

nav ul li {

float:none;

width:100%;  }

}

When a “Menu” button is clicked, a vertical menu may be hidden and only shown.  An extra button used to toggle the menu is hidden from desktop view using display:none, and then shown while the ul is instead hidden at a mobile size.

The markup:

<nav>

<a href=”#” class=”show -mobile”>Main Menu

<ul> <li>…</li></ul>

</nav>

Regular CSS:

.show-mobile { display: none; }

CSS to show the button and hide the

menu for mobile:

@media (max-width: 768px) {

nav .show-mobile { display: block;

}

nav ul { display: none; }

}

jQuery for the menu toggle:

<script>

jQuery(“.show-mobile”).

click(function () {

jQuery(“nav ul”).

toggle(“fast”);

});

<script>

Boomarts Infotech is an affordable, practical and professional Web Development Company Chennai.  We covers Web Development Services, Mobile Responsive Websites, SEO services, brochure and logo designing, and other graphic services.


Leave a Reply

Subcriber to Our mailing list