diff --git a/README.md b/README.md index a5b8d6f..4dfaa8e 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,3 @@ - jquery.ui.potato.menu ======================= @@ -6,10 +5,8 @@ Simple Drop Down Menu for jQuery. ## Usage and Demo -[Here][DEMO] +https://makotokw.com/portfolio/jquery/ui_potato_menu/ ## License The MIT License - - [DEMO]: http://makotokw.github.com/jquery/ui_potato_menu/ \ No newline at end of file diff --git a/dist/jquery.ui.potato.menu.css b/dist/jquery.ui.potato.menu.css new file mode 100644 index 0000000..f81759d --- /dev/null +++ b/dist/jquery.ui.potato.menu.css @@ -0,0 +1,52 @@ +/*! + * jquery.ui.potato.menu + * + * Copyright (c) 2009-2017 makoto_kw, https://makotokw.com + * + * @author makoto_kw + * @version 1.2.2 + * @license MIT + */ +.potato-menu { + margin: 0; + padding: 0; + width: auto; + list-style: none; +} + +.potato-menu:after { + content: " "; + display: block; + visibility: hidden; + clear: both; + height: 0.1px; + font-size: 0.1em; + line-height: 0; +} + +.potato-menu .potato-menu-item { + padding: 0; + position: relative; + list-style: none; + list-style-position: outside; + display: inline; + margin: 0; + float: left; +} + +.potato-menu .potato-menu-item a { + display: block; + text-decoration: none; + white-space: nowrap; + outline: 0; +} + +.potato-menu .potato-menu-group { + margin: 0; + padding: 0; + -webkit-padding-start: 0; + -webkit-padding-end: 0; + position: absolute; + display: none; + z-index: 1000; +} \ No newline at end of file diff --git a/dist/jquery.ui.potato.menu.js b/dist/jquery.ui.potato.menu.js new file mode 100644 index 0000000..ecc3324 --- /dev/null +++ b/dist/jquery.ui.potato.menu.js @@ -0,0 +1,94 @@ +/*! + * jquery.ui.potato.menu + * + * Copyright (c) 2009-2017 makoto_kw, https://makotokw.com + * + * @author makoto_kw + * @version 1.2.2 + * @license MIT + */ +(function ($) { + + var defaults = { + vertical: false, + menuItemSelector: 'li', + menuGroupSelector: 'ul', + rootClass: 'potato-menu', + menuItemClass: 'potato-menu-item', + menuGroupClass: 'potato-menu-group', + verticalClass: 'potato-menu-vertical', + horizontalClass: 'potato-menu-horizontal', + hasVerticalClass: 'potato-menu-has-vertical', + hasHorizontalClass: 'potato-menu-has-horizontal', + hoverClass: 'potato-menu-hover', + showDuration: 350, + hideDuration: 100, + hideDelayDuration: 0 + }; + + function menu() { + var option = (typeof(arguments[0]) != 'string') ? $.extend({}, defaults, arguments[0]) : $.extend({}, defaults); + + // Horizontal: + // ul.potato-menu-group,potato-menu-horizontal + // > li.potato-menu-item,potato-menu-has-vertical + // > ul.potato-menu-group,potato-menu-vertical + // > li.potato-menu-item,potato-menu-has-horizontal + // > .... + // + // Vertical + // ul.potato-menu-group,potato-menu-vertical + // > li.potato-menu-item,potato-menu-has-horizontal + // > ul.potato-menu-group,potato-menu-horizontal + // > li.potato-menu-item,potato-menu-has-vertical + // > .... + var topMenuGroupClass = (option.vertical) ? option.verticalClass : option.horizontalClass, + $menu = $(this).addClass(option.rootClass + ' ' + option.menuGroupClass + ' ' + topMenuGroupClass), + $menuItems = $menu.find(option.menuItemSelector).addClass(option.menuItemClass), + $menuGroups = $menu.find(option.menuGroupSelector).addClass(option.menuGroupClass); + + $menuItems.hover( + function (/*e*/) { + $(this).addClass(option.hoverClass); + }, + function (/*e*/) { + $(this).removeClass(option.hoverClass); + } + ); + $menuGroups.parent().each(function (/*index*/) { + var $parentMenuItem = $(this); // menu item that has menu group + var displayDirection = ($parentMenuItem.parent().hasClass(option.horizontalClass)) ? 'bottom' : 'right'; + $parentMenuItem.addClass((displayDirection == 'bottom') ? option.hasVerticalClass : option.hasHorizontalClass); + var $menuGroup = $parentMenuItem.find(option.menuGroupSelector + ':first').addClass(option.verticalClass); + $parentMenuItem.hover( + function (/*e*/) { + $menuGroup.stop(true, true); + var offset = {left: '', top: ''}; + if (displayDirection == 'bottom') { + offset.left = 0; + } else { + offset.left = $(this).width() + 'px'; + offset.top = '0px'; + } + $menuGroup.css(offset).fadeIn(option.showDuration); + }, + function (/*e*/) { + if (option.hideDelayDuration > 0) { + $menuGroup.delay(option.hideDelayDuration).fadeOut(option.hideDuration); + } else { + $menuGroup.fadeOut(option.hideDuration); + } + } + ); + }); + $menu.find('a[href^="#"]').click(function () { + $menuGroups.fadeOut(option.hideDuration); + return ($(this).attr('href') != '#'); + }); + return this; + } + + $.fn.extend({ + ptMenu: menu + }); +})(jQuery); diff --git a/dist/jquery.ui.potato.menu.min.css b/dist/jquery.ui.potato.menu.min.css new file mode 100644 index 0000000..e18fa73 --- /dev/null +++ b/dist/jquery.ui.potato.menu.min.css @@ -0,0 +1,9 @@ +/*! + * jquery.ui.potato.menu + * + * Copyright (c) 2009-2017 makoto_kw, https://makotokw.com + * + * @author makoto_kw + * @version 1.2.2 + * @license MIT + */.potato-menu{margin:0;padding:0;width:auto;list-style:none}.potato-menu:after{content:" ";display:block;visibility:hidden;clear:both;height:.1px;font-size:.1em;line-height:0}.potato-menu .potato-menu-item{padding:0;position:relative;list-style:none;display:inline;margin:0;float:left}.potato-menu .potato-menu-item a{display:block;text-decoration:none;white-space:nowrap;outline:0}.potato-menu .potato-menu-group{margin:0;padding:0;-webkit-padding-start:0;-webkit-padding-end:0;position:absolute;display:none;z-index:1000} \ No newline at end of file diff --git a/dist/jquery.ui.potato.menu.min.js b/dist/jquery.ui.potato.menu.min.js new file mode 100644 index 0000000..bec9c4d --- /dev/null +++ b/dist/jquery.ui.potato.menu.min.js @@ -0,0 +1,10 @@ +/*! + * jquery.ui.potato.menu + * + * Copyright (c) 2009-2017 makoto_kw, https://makotokw.com + * + * @author makoto_kw + * @version 1.2.2 + * @license MIT + */ +!function(a){function b(){var b="string"!=typeof arguments[0]?a.extend({},c,arguments[0]):a.extend({},c),d=b.vertical?b.verticalClass:b.horizontalClass,e=a(this).addClass(b.rootClass+" "+b.menuGroupClass+" "+d),f=e.find(b.menuItemSelector).addClass(b.menuItemClass),g=e.find(b.menuGroupSelector).addClass(b.menuGroupClass);return f.hover(function(){a(this).addClass(b.hoverClass)},function(){a(this).removeClass(b.hoverClass)}),g.parent().each(function(){var c=a(this),d=c.parent().hasClass(b.horizontalClass)?"bottom":"right";c.addClass("bottom"==d?b.hasVerticalClass:b.hasHorizontalClass);var e=c.find(b.menuGroupSelector+":first").addClass(b.verticalClass);c.hover(function(){e.stop(!0,!0);var c={left:"",top:""};"bottom"==d?c.left=0:(c.left=a(this).width()+"px",c.top="0px"),e.css(c).fadeIn(b.showDuration)},function(){b.hideDelayDuration>0?e.delay(b.hideDelayDuration).fadeOut(b.hideDuration):e.fadeOut(b.hideDuration)})}),e.find('a[href^="#"]').click(function(){return g.fadeOut(b.hideDuration),"#"!=a(this).attr("href")}),this}var c={vertical:!1,menuItemSelector:"li",menuGroupSelector:"ul",rootClass:"potato-menu",menuItemClass:"potato-menu-item",menuGroupClass:"potato-menu-group",verticalClass:"potato-menu-vertical",horizontalClass:"potato-menu-horizontal",hasVerticalClass:"potato-menu-has-vertical",hasHorizontalClass:"potato-menu-has-horizontal",hoverClass:"potato-menu-hover",showDuration:350,hideDuration:100,hideDelayDuration:0};a.fn.extend({ptMenu:b})}(jQuery); \ No newline at end of file diff --git a/package.json b/package.json index 9413bd8..4271d38 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jquery.ui.potato.menu", - "version": "1.2.1", + "version": "1.2.2", "description": "Simple Drop Down Menu for jQuery", "main": "src/jquery.ui.potato.menu.js", "repository": {