mattkersley / responsive-menu Goto Github PK
View Code? Open in Web Editor NEWTurns any <ol> or <ul> into a <select> for mobiles and low browser sizes
Home Page: http://mattkersley.com/demos/responsive_menu/
License: The Unlicense
Turns any <ol> or <ul> into a <select> for mobiles and low browser sizes
Home Page: http://mattkersley.com/demos/responsive_menu/
License: The Unlicense
Could a feature be added for the currently open page to be selected.
It would involve adding the class selected="selected" to the item if the URL matched the current page.
I've got more than one menu I want to target with mobileMenu (just 2 in my case).
But only the first instance is executed correctly.
The second one doesn't get the select-element prepended in the DOM, but it's UL-element will be hidden (display:none).
If I change the order, the opposite happens.
Here's my code:
// mobile menu
$('#menu-main').mobileMenu({
topOptionText : DL.txt.selectPage,
prependTo : '.top_menu .menu',
indentString: ' ',
switchWidth : 768
});
$('#menu-left').mobileMenu({
topOptionText : DL.txt.selectPage,
prependTo : '.secondary',
indentString: ' ',
switchWidth : 479
});
It is actually not an issue or maybe I'm doing wrong way, not sure, so posting here.
I have tried but not working for me. I'm trying to style the 'select dropdown menu' like here (for smaller screen)
http://bavotasan.com/2011/style-select-box-using-only-css/
Any help will be highly appreciated.
thanks!
Hi,
Maybe I missed it, but is there an option to replace in place when using combine: false
option?
I'd like to replace 4 <ul>
's in my footer with <select>
s.
I like the ability to not combine, but it's less useful only having the ability to specify one element to append the <select>
s to.
Anyway, I'm sure your busy... Just thought I would throw that out there. :)
Thanks again!
Cheers,
Micky
Hi Matt,
I know you say that this plugin doesn't have a license but might I suggest you add one. If yo really don't care what people do you can add the "Do What the Fuck You Want to Public License" http://www.wtfpl.net/
This basically just ensures others that they can use your code :)
It would be cool/more semantic/more accessible to add optgroups to group together the related second-level links, rather than just visually indenting them. It could work like this:
The list (can't get Github list markup to work, sorry!):
The select:
<optgroup label="Vegetables">
<option>Vegetables main page</option>
</optgroup>
<optgroup label="Fruit">
<option>Fruit main page</option>
<option>Apples</option>
<option>Bananas</option>
<option>Oranges</option>
</optgroup>
</select>```
Hi, I think this is related to #5. When <optgroup>
and <option>
tags are mixed in the top-level nav (i.e., some main menu items have children and some don't) a top-level <option>
is visually indistinguishable from nested <option>
. Attaching some browserstack screenshots.
It's not a bug in this plugin's code, but still makes the menu visually confusing. I wonder if anyone's noticed this and thought about a solution?
Screenshots show the index.html packaged with the repo.
Demo broke and does not work on chrome ie , safari
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library mattkersley/Responsive-Menu
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "mattkersley/Responsive-Menu",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
iOS does not respect sub-level spaces. (Running v4.3.4).
I tested an Android device (no idea which one), and the spaces were rendered properly.
Hi there,
Firstly, thanks for this function. I've found it of great use for responsive navigation.
I'd like to ask if there is a simple way to have more than one menu in a page, displaying separate lists. Is this possible using the code as it is?
Regards,
Bry
I identified two "console.log(...);" lines that breaks everything on windows phones...
it would be nice if the sub levels would be indented on a smartphone like in the desktop version of the drop down.
don't know though if this is supported on ios and similars.
Hi there!
I found a bug with this line:
https://github.com/mattkersley/Responsive-Menu/blob/master/jquery.mobilemenu.js#L90
The [href=http://foo.com] selector needs to have the URL wrapped in double quotes like this:
[href="http://foo.com"]
To avoid an invalid expression error in Chrome and possibly others.
Regards,
Marshall
It would be great if the script could optionally auto-detect if the device is touch enabled (like the Modernizr .no-touch/.touch test) and always show for those devices - regardless of screen width. As well as the standard method of transforming to select at certain breakpoint.
Is that possible?
Hi Matt, This is brilliant - thanks. I've been doing my head in trying to implement a megamenu with this and hoped you might point me in the right direction: I tried adding this
function stripDivs($this){
if(isMobile()) {
var myLis = [];
myLis = $('div.megacolumn-content').find('li');
$('ul.megamenu').remove();
$(myLis).wrap('
').insertAfter('li.here');
}
}
after function isMobile is defined but no luck yet. The li with the class here is just the first list item in the top nav ul. The idea was to write a script that would extract li's buried in divs and store them, lose the parent divs those lis were nested inside of and then reintroduce them as just more li's so that your script could find, index and include them when building the mobile menu select/option group.
The functionality to parse the list and add select tags seems to break with this inclusion. or maybe an errant div tag? Does the logic seem sound enough? Thanks again for sharing this script. I hope I'm not rude to ask this.
I notice that the required format for adding the menu to an element is ul#id. Would it not be more selector efficient to just require #id?
While I appreciate your intentions of trying to get your code out to the widest range of audiences, unfortunately not having a license makes things more complicated for the people who care. If you would like to make your software available to the widest range of groups I would suggest using the MIT license. http://opensource.org/licenses/mit-license.php When you don't add a license it is subject to the copyright rules of the country you created it in which may be incompatible with other licenses. In the case of the US it's all rights reserved which means you must specifically give permission for people to use your software.
Something else to read: http://www.codinghorror.com/blog/2007/04/pick-a-license-any-license.html
Hi! Thanks for this awesome plugin. :)
Any chance you could include a version number (and perhaps a simple changelog in the readme)?
I've always been keen on plugins that include a multi-line comment at the top of their plugin (minimized included):
/*
* jQuery doTimeout: Like setTimeout, but better! - v1.0 - 3/3/2010
* http://benalman.com/projects/jquery-dotimeout-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
At the very minimum, a version number makes it easy for end users to spot upgrades. :)
I've always liked this convention:
A normal version number MUST take the form X.Y.Z where X, Y, and Z are non-negative integers. X is the major version, Y is the minor version, and Z is the patch version. Each element MUST increase numerically by increments of one. For instance: 1.9.0 -> 1.10.0 -> 1.11.0.
More info here.
Lastly, I ussually ad version numbers to plugin file names (if I include them individually), for example:
jquery.mobilemenu-1.0.0.min.js
Thanks for your consideration!
Cheers,
Micky
I'm looking at your demo and noticed that the responsive select menu only works 2 levels deep. Are you planning on extending the functionality to support deeper nesting?
I wanted to put the complete mobileMenu into a div container and the option to put some markup in front of the dropdown boxes, e.g. as a label. Therefor I've changed some functions of the original version 2.
//plugin's default options
var settings = {
combine: true, //combine multiple menus into a single select
groupPageText: 'Main', //optgroup's aren't selectable, make an option for it
nested: true, //create optgroups by default
prependTo: 'body', //insert at top of page by default
prependMarkupToMenu: '<h3 class="mnav">Menu:</h3>', //Markup to be prepended just bevor the menu(s)
switchWidth: 800, //width at which to switch to select, and back again
topOptionText: 'Go to...' //default "unselected" state
},
//function to create first option in the select menu
function createFirstOption($container){
$('<option selected="selected" disabled="disabled" value="0">'+settings.topOptionText+'</option>').appendTo($container);
}//createFirstOption()
//function to create <select> menu
function createSelect($menu){
//create <select> to insert into the page
var
$select = $('<select class="mnav" id="mm'+menuCount+'" />');
menuCount++;
//create default option if the text is set (set to null for no option)
if(settings.topOptionText){
createFirstOption($select);
}
//loop through first list items
$menu.children('li').each(function(){
var $li = $(this);
//if nested select is wanted, and has sub-nav, add optgroup element with child options
if($li.children('ul, ol').length && settings.nested){
createOptionGroup($li, $select);
}
//otherwise it's a single level select menu, so build option
else {
createOption($li, $select);
}
});
//add change event and prepend menu to div#outer_nav
$select
.change(function(){goTo($(this).val());})
.appendTo('#outer_mnav');
}//createSelect()
function runPlugin(){
//menu doesn't exist
if(isMobile() && !menuExists()){
$('<div id="outer_mnav" class="mnav" />')
.prependTo(settings.prependTo);
$(settings.prependMarkupToMenu)
.appendTo('#outer_mnav');
//if user wants to combine menus, create a single <select>
if(settings.combine){
var $menu = combineLists();
createSelect($menu);
}
//otherwise, create a select for each matched list
else{
$menus.each(function(){
createSelect($(this));
});
}
}
//menu exists, and browser is mobile width
if(isMobile() && menuExists()){
$('.mnav').show();
$menus.hide();
}
//otherwise, hide the mobile menu
if(!isMobile() && menuExists()){
$('.mnav').hide();
$menus.show();
}
}//runPlugin()
var settings = {
// ...
selectedOpt: false // adds selected-attribute by text or value
}
Add function:
function addSelectedAttribute(value, text, container) {
s = (settings.selectedOpt && (settings.selectedOpt == text || settings.selectedOpt == value)) ? " selected ": false;
$('<option value="'+value+'" '+s+'>'+text+'</option>').appendTo(container);
}
Edit function 'createOption':
//function to create options in the select menu
function createOption($item, $container, text){
//if no text param is passed, use list item's text, otherwise use settings.groupPageText
if(!text){
addSelectedAttribute( $item.find('a:first').attr('href'), $.trim(getText($item)), $container );
} else {
addSelectedAttribute( $item.find('a:first').attr('href'), text, $container );
}
}//createOption()
Only works for default options, but i think it's easy to making it available for opt-groups.
I was wondering if you have had any issues with the arrow not displaying on android devices? The thing works but there is not arrow displayed so people are not aware that it is actually a drop down menu and not just a text field or something
I'm sure this is super basic, but I keep getting a Plugin failed when I try to use for WordPress. What am I doing wrong? Pls help.
To prevent the first option from being clickable I'd like to suggest the following addition of a function and a slightly change of code.
New function:
//function to create first option in the select menu
function createFirstOption($container){
$('<option selected="selected" disabled="disabled" value="0">'+settings.topOptionText+'</option>').appendTo($container);
}//createFirstOption()
Within the function createSelect() use instead of
//create default option if the text is set (set to null for no option)
if(settings.topOptionText){
createOption($('<li>'+settings.topOptionText+'</li>'), $select);
}
the code
//create default option if the text is set (set to null for no option)
if(settings.topOptionText){
createFirstOption($select);
}
Lines 53 and 60 add inline styles to display: none; display: block;.
Clearing all inline styles when exiting mobileMenu will allow the host sites styles to do as they please without needing to get into a specificity war.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.