| Content |
|---|
| | Added: Taken from Studio Nashvegas: <a href="http:// www.studionashvegas.com/responsive- design-2/a-responsive-menu- solution-for-wordpress/" target="_blank" >http://www.studionashvegas.com/ responsive-design- 2/a-responsive- menu-solution- for-wordpress/</a> |
| | Added: Here is a working example of the responsive select menu: <a href="http:// www.outandaboutmarketing.com/" target="_blank" >http://www.outandaboutmarketing.com/</a> |
| | Added: A few months ago I modified a really cool WordPress template and started using it for my own clients. As part of the overhaul, I realized that there was no really good way (included) to turn a WordPress unordered list into a menu that would work on a mobile device. I tried a few different solutions, but in the end went for the simple one. A selection (drop-down) menu works well, allows for an infinite number of parent and child categories, and is easily done with a simple jQuery script. |
| | Added: I’ve since modified that script, and wanted to share it as a snippit with you. Make sure you have jQuery loaded somewhere before this script: |
| | Added: [php]<script> |
| | Added: // Create the dropdown base |
| | Added: $(".menu- main-container li a").addClass( "top-level"); |
| | Added: $(".menu- main-container .sub-menu li a").addClass( "second- level"); |
| | Added: $("<select class='main-drop' />").appendTo( ".menu-main- container"); |
| | Added: // Create default option "Go to..." |
| | Added: $("<option />", { |
| | Added: "selected": "selected", |
| | Added: "value" : "", |
| | Added: "text" : "Main Navigation" |
| | Added: }).appendTo(" .menu-main-container select"); |
| | Added: // Populate dropdown with menu items |
| | Added: $(".menu- main-container li a").each(function() { |
| | Added: var el = $(this); |
| | Added: $("<option />", { |
| | Added: "value" : el.attr(" href"), |
| | Added: "text" : el.text(), |
| | Added: "class" : el.attr(" class") |
| | Added: }).appendTo(" .menu-main-container select"); |
| | Added: }); |
| | Added: // Allows user to automatically "submit" selection and travel to page |
| | Added: $(".menu- main-container select") .change(function() { |
| | Added: window.location = $(this).find( "option: selected").val(); |
| | Added: }); |
| | Added: // adds a dash to second-level classes |
| | Added: $('<p>- </p>').prependTo( 'option.second-level'); |
| | Added: </script>[/php] |
| | Added: Here is some css: |
| | Added: [css].main-drop{ |
| | Added: display: none; |
| Deleted:
| Added: }
|
| | Added: /* All Mobile Sizes (devices and browser) */ |
| | Added: @media only screen and (max-width: 767px) { |
| | Added: .main-drop{ |
| | Added: display: block; |
| | Added: width: 94%; |
| | Added: margin: 10px 3% 10px; |
| | Added: } |
| | Added: }[/css] |
No comments yet.