{"id":102679,"date":"2012-11-10T09:00:42","date_gmt":"2012-11-10T14:00:42","guid":{"rendered":"http:\/\/wpmu.org\/?p=102679"},"modified":"2013-04-17T21:14:36","modified_gmt":"2013-04-18T01:14:36","slug":"responsive-wordpress-menu-plugin-for-mobile-devices","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/responsive-wordpress-menu-plugin-for-mobile-devices\/","title":{"rendered":"Responsive WordPress Menu Plugin for Mobile Devices"},"content":{"rendered":"<p>The <a href=\"http:\/\/wordpress.org\/extend\/plugins\/responsive-select-menu\/\" target=\"_blank\">Responsive Select Menu<\/a> plugin lets you automatically turn your \u201cWordPress 3 Menus\u201d into an easy-to-scroll select box\/dropdown menu. (A \u201cWordPress 3 Menu\u201d is a menu created through the WordPress admin area: Appearance &gt; Menus. Many people typically use these menus in their top navigation spot, as well as other places.)<\/p>\n<h2><strong>The Plugin in Action<\/strong><\/h2>\n<p>Let\u2019s go ahead and jump right into some examples to show you what it looks like.<\/p>\n<p>Here\u2019s a look at a normal top menu in a mobile device using the WordPress Twenty Ten theme.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-102690\" title=\"itouch-non-responsive\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/itouch-non-responsive.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"547\" height=\"713\" \/><\/p>\n<p>And now here\u2019s a look at that same top menu with the Responsive Select Menu plugin activated.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-102691\" title=\"itouch-responsive\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/itouch-responsive.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"547\" height=\"713\" \/><br \/>\nWhen you touch the menu and pull it down, you get a select box\/dropdown menu that you can easily scroll through with your finger.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-102692\" title=\"select-box\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/select-box.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"548\" height=\"875\" \/><\/p>\n\n<h2><strong>Settings<\/strong><\/h2>\n<p>The <a href=\"https:\/\/wpmudev.com\/blog\/jquery-wordpress-menu-plugins\/\" target=\"_blank\">WordPress menu plugin<\/a> comes with a number of settings. Here are a few of the more important ones:<\/p>\n<ul>\n<li>Control point when responsive menu kicks in<\/li>\n<li>Limit number of menu levels to display<\/li>\n<li>Control label\/first item name on menu<\/li>\n<li>Disable certain menus<\/li>\n<\/ul>\n<p>Here\u2019s a look at the basic configuration options.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-102694\" title=\"settings\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/settings.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"546\" height=\"640\" \/><\/p>\n<h2><strong>Width Breakpoint<\/strong><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-102695\" title=\"width-breakpoint\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/width-breakpoint.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"546\" height=\"182\" \/><\/p>\n<p>As mentioned, on the settings page, you can control at what width point the responsive menu kicks in. Therefore, you can set it to kick in even on a full-sized screen if the browser narrowed. For example, here\u2019s a look at a narrowed browser on a full size screen without the plugin activated.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-102697\" title=\"pc-non-responsive\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/pc-non-responsive.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"549\" height=\"698\" \/><\/p>\n<p>And here\u2019s a look at the narrowed browser screen with the plugin activated.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-102698\" title=\"pc-responsive-plugin\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2012\/11\/pc-responsive-plugin.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"549\" height=\"746\" \/><\/p>\n<p>This ability to control when the responsive plugin kicks would also allow you to do things such as set it to NOT kick in for a horizontal view on a typical tablet, for example. But then you could have it kick in when the table is turned vertically. The style of your particular site and the size of your particular menu will determine where you want the responsive menu to kick in.<\/p>\n<h2><strong>See a Working Demo<\/strong><\/h2>\n<p>You can see an example of the <a href=\"http:\/\/wpmegamenu.com\/responsive-select-menu\/\" target=\"_blank\">plugin in action here<\/a>. If you\u2019re on a full-size browser, just drag your browser down to a smaller size, and you will see the menu at the top of the page change.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Automatically turn your menus into an easy-to-scroll select box on mobile devices.<\/p>\n","protected":false},"author":84404,"featured_media":102688,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[4],"tags":[87],"tutorials_categories":[],"class_list":["post-102679","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins","tag-menus"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/102679","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/84404"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=102679"}],"version-history":[{"count":2,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/102679\/revisions"}],"predecessor-version":[{"id":216412,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/102679\/revisions\/216412"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/102688"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=102679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=102679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=102679"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=102679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}