diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..8bc46bf --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +*.html linguist-language=JavaScript diff --git a/.gitignore b/.gitignore index 38f8e88..723ef36 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1 @@ -dev +.idea \ No newline at end of file diff --git a/index.html b/index.html index 546c8fc..26d7fb8 100644 --- a/index.html +++ b/index.html @@ -7,12 +7,12 @@ @@ -30,13 +36,14 @@ Fork me on GitHub

jQuery pop menu

- click these buttons below to have a try. + Click the buttons below to have a try. +

Demo 1: Default menu

-
+
+

Demo 2: Menu with square corners and orange background

-
+
-

How to use:

- 
-  $('#demo_box').popmenu();
-
+

Demo 3: Menu with border and custom colors

+
+ + +
+

How to use:

+ 
$('#demo_box').popmenu({parameters});
+

You can use parameters below.

+ 
{
+    'controller': true,       // use control button or not
+    'width': '300px',         // width of menu
+    'background': '#34495e',  // background color of menu
+    'focusColor': '#1abc9c',  // hover color of menu's buttons
+    'borderRadius': '10px',   // radian of angles, '0' for right angle
+    'top': '50',              // pixels that move up
+    'left': '0',              // pixels that move left
+    'iconSize': '100px',       // size of menu's buttons
+    'color': '#fff'            // color of menu's text
+    'border': '1px solid #000', // border style for the menu box
+}

Find more information on github.

- + - \ No newline at end of file + diff --git a/jquery.popmenu.min.js b/jquery.popmenu.min.js index 7d320a5..0d8805b 100644 --- a/jquery.popmenu.min.js +++ b/jquery.popmenu.min.js @@ -1 +1,3 @@ -!function(a){a.fn.popmenu=function(b){function j(){f.css({display:d,position:"absolute","margin-top":-c.top,"margin-left":-c.left,background:c.background,width:c.width,"float":"left",padding:"0","border-radius":c.borderRadius}),g.css({display:"block",color:"#fff","float":"left",width:c.iconSize,height:c.iconSize,"text-align":"center","border-radius":c.borderRadius}),h.css({"text-decoration":"none",color:"#fff"}),i.hover(function(){i.css("cursor","pointer")},function(){i.css("cursor","default")}),i.click(function(b){b.preventDefault(),f.show("fast"),a(document).mouseup(function(a){var b=f;b.is(a.target)||0!==b.has(a.target).length||b.hide(),b.hide()})}),g.hover(function(){a(this).css({background:c.focusColor,cursor:"pointer"})},function(){a(this).css({background:c.background,cursor:"default"})})}var c=a.extend({controller:!0,width:"300px",background:"#34495e",focusColor:"#1abc9c",borderRadius:"10px",top:"50",left:"0",iconSize:"100px"},b);if(c.controller===!0)var d="none";else d="block";var e=a(this),f=e.children("ul"),g=f.children("li"),h=g.children("a"),i=e.children(".pop_ctrl");return j()}}(jQuery); \ No newline at end of file +(function(b){b.fn.popmenu=function(d){var a=b.extend({controller:!0,width:"300px",background:"#34495e",focusColor:"#1abc9c",borderRadius:"10px",top:"50",left:"0",iconSize:"100px"},d),g=!0===a.controller?"none":"block";d=b(this);var c=d.children("ul"),f=c.children("li"),h=f.children("a"),e=d.children(".pop_ctrl");return function(){c.css({display:g,position:"absolute","margin-top":-a.top,"margin-left":-a.left,background:a.background,width:a.width,"float":"left",padding:"0","border-radius":a.borderRadius}); +f.css({display:"block",color:"#fff","float":"left",width:a.iconSize,height:a.iconSize,"text-align":"center","border-radius":a.borderRadius});h.css({"text-decoration":"none",color:"#fff"});e.hover(function(){e.css("cursor","pointer")},function(){e.css("cursor","default")});e.click(function(a){a.preventDefault();c.show("fast");b(document).mouseup(function(a){c.is(a.target)||0!==c.has(a.target).length||c.hide()})});f.hover(function(){b(this).css({background:a.focusColor,cursor:"pointer"})},function(){b(this).css({background:a.background, +cursor:"default"})})}()}})(jQuery); \ No newline at end of file diff --git a/src/jquery.popmenu.js b/src/jquery.popmenu.js index e34a84a..c2fc819 100644 --- a/src/jquery.popmenu.js +++ b/src/jquery.popmenu.js @@ -5,9 +5,9 @@ Author: Guc. http://www.gucheen.pro Based on jQuery 2.0.3 */ -(function($) { +(function ($) { - $.fn.popmenu = function(options) { + $.fn.popmenu = function (options) { var settings = $.extend({ 'controller': true, @@ -17,12 +17,14 @@ Based on jQuery 2.0.3 'borderRadius': '10px', 'top': '50', 'left': '0', - 'iconSize': '100px' + 'iconSize': '100px', + 'color': '#fff', + 'border': '0px' }, options); if (settings.controller === true) { var temp_display = 'none'; } else { - temp_display = 'block'; + var temp_display = 'block'; } var tar = $(this); var tar_body = tar.children('ul'); @@ -40,11 +42,12 @@ Based on jQuery 2.0.3 'width': settings.width, 'float': 'left', 'padding': '0', - 'border-radius': settings.borderRadius + 'border-radius': settings.borderRadius, + 'border': settings.border }); tar_list.css({ 'display': 'block', - 'color': '#fff', + 'color': settings.color, 'float': 'left', 'width': settings.iconSize, 'height': settings.iconSize, @@ -53,26 +56,30 @@ Based on jQuery 2.0.3 }); tar_a.css({ 'text-decoration': 'none', - 'color': '#fff' + 'color': settings.color + }); + tar_ctrl.hover(function () { + tar_ctrl.css('cursor', 'pointer'); + }, function () { + tar_ctrl.css('cursor', 'default') }); - tar_ctrl.hover(function(){tar_ctrl.css('cursor','pointer');},function(){tar_ctrl.css('cursor','default')}); - tar_ctrl.click(function(e) { + tar_ctrl.click(function (e) { e.preventDefault(); tar_body.show('fast'); - $(document).mouseup(function(e){ + $(document).mouseup(function (e) { var _con = tar_body; - if(!_con.is(e.target) && _con.has(e.target).length === 0){ + if (!_con.is(e.target) && _con.has(e.target).length === 0) { _con.hide(); } - _con.hide(); + //_con.hide(); some functions you want }); }); - tar_list.hover(function() { + tar_list.hover(function () { $(this).css({ 'background': settings.focusColor, 'cursor': 'pointer' }); - }, function() { + }, function () { $(this).css({ 'background': settings.background, 'cursor': 'default'