Taken from Studio Nashvegas: http://www.studionashvegas.com/responsive-design-2/a-responsive-menu-solution-for-wordpress/
Here is a working example of the responsive select menu: http://www.outandaboutmarketing.com/
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.
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:
[php]<script>
// Create the dropdown base
$(".menu-main-container li a").addClass("top-level");
$(".menu-main-container .sub-menu li a").addClass("second-level");
$("<select class='main-drop' />").appendTo(".menu-main-container");
// Create default option "Go to..."
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Main Navigation"
}).appendTo(".menu-main-container select");
// Populate dropdown with menu items
$(".menu-main-container li a").each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text(),
"class" : el.attr("class")
}).appendTo(".menu-main-container select");
});
// Allows user to automatically "submit" selection and travel to page
$(".menu-main-container select").change(function() {
window.location = $(this).find("option:selected").val();
});
// adds a dash to second-level classes
$('<p>- </p>').prependTo('option.second-level');
</script>[/php]
Here is some css:
[css].main-drop{
display: none;
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
.main-drop{
display: block;
width: 94%;
margin: 10px 3% 10px;
}
}[/css]Revisions
- December 11, 2012 @ 12:01:38 [Current Revision] by PeterLugg
- December 11, 2012 @ 11:26:05 [Autosave] by PeterLugg
- November 27, 2012 @ 01:18:53 by PeterLugg
- November 27, 2012 @ 01:15:41 by PeterLugg
Revision Differences
| November 27, 2012 @ 01:18:53 | Current Revision |
|---|
| Title |
|---|
| Deleted: | Added: Responsive WordPress Menus |
Note: Spaces may be added to comparison text to allow better line wrapping.
No comments yet.