Add demo page, minified version, and custom Modernizr. Adjust comments.

README.md

@@ -1,9 +1,12 @@
 #flexMenu
-Create responsive menus that automatically collapse into a "more" drop-down when they run out of space.
+flexMenu is a jQuery plugin that lets you create responsive menus that automatically collapse into a "more" drop-down when they run out of space.
 
 Demo! (Coming soon)
+
 [Source on GitHub](https://github.com/352Media/flexMenu)
 
+Written by (Ryan DeBeasi)[http://www.ryandebeasi.com/] of (352 Media Group)[http://www.352media.com/].
+
 ##Usage
 
 Create an unordered list that contains your menu items. In CSS, use `display: inline-block;` or `float: left;` to get the  `li` elements to line up horizontally.
@@ -27,6 +30,13 @@ function resizeFunctions() {
 }
 ```
 
+In most cases, you'll also want to set the popup menu to be absolutely positioned:
+```css
+.flexMenu-popup {
+  position: absolute;
+}
+```
+
 ##Dependencies
 
 ###jQuery
@@ -35,6 +45,10 @@ I've tested the plugin in jQuery 1.7.1 and 1.7.2.
 ###Modernizr
 [Modernizr](http://modernizr.com/) is optional. If it's available, flexMenu will use it to detect touch support. If touch support is available, we'll toggle the menu on click. If touch support is not available, we'll toggle the menu on hover in/out. That way, we can avoid triggering the funky [simulated mouseover/mouseout](http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW17) that happens on many touchscreen devices.
 
+If Modernizr is not available, we'll always toggle the menu on click.
+
+The zip for flexMenu includes a build of Modernizr contains only touch detection and the has-js/no-js class. Feel free to use this build, or go with more full-featured build if you're using other features. Or, if you do want to always toggle the menu on click, there is no need to include Modernizr at all.
+
 ##Advanced usage
 
 If you're feeling fancy, you can include any of the following options when calling flexMenu:

demo.css

@@ -0,0 +1,154 @@
+/* HTML5 Boilerplate  */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
+audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
+audio:not([controls]) { display: none; }
+[hidden] { display: none; }
+
+html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+html, button, input, select, textarea { font-family: sans-serif; color: #222; }
+body { margin: 0; font-size: 1em; line-height: 1.4; }
+
+a, a:visited { color: #006363; }
+a:hover { color: #1D7373; }
+a:focus { outline: thin dotted; }
+a:hover, a:active { outline: 0; }
+abbr[title] { border-bottom: 1px dotted; }
+b, strong { font-weight: bold; }
+blockquote { margin: 1em 40px; }
+dfn { font-style: italic; }
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+ins { background: #ff9; color: #000; text-decoration: none; }
+mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
+pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+
+
+table { border-collapse: collapse; border-spacing: 0; }
+td { vertical-align: top; }
+
+.clearfix:before, .clearfix:after { content: ""; display: table; }
+.clearfix:after { clear: both; }
+.clearfix { *zoom: 1; }
+
+@media print {
+  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
+  a, a:visited { text-decoration: underline; }
+  a[href]:after { content: " (" attr(href) ")"; }
+  abbr[title]:after { content: " (" attr(title) ")"; }
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
+  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+  thead { display: table-header-group; } 
+  tr, img { page-break-inside: avoid; }
+  img { max-width: 100% !important; }
+  @page { margin: 0.5cm; }
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h2, h3 { page-break-after: avoid; }
+}
+
+
+/* flexMenu demo Styles */
+
+body {
+  font-family: "Georgia", serif;
+}
+
+h1, h2 {
+  color: #006363;
+  font-weight: 700;
+  font-family: 'Quantico', sans-serif;
+}
+
+.header, .main {
+  padding: .5em 1em;
+
+}
+
+.header {
+  background-color: #5CCCCC;
+  margin: 1em;
+  /*border-bottom: 1px solid #006363;*/
+}
+
+.footer {
+  border-top: 1px solid #ccc;
+  background-color: #eee;
+  padding: 1em;
+
+}
+
+/* General Menu Styles */
+
+.menu {
+  list-style-type: none;
+  margin: 0;
+  background: #eeeeee; /* Old browsers */
+  padding: 0;
+  background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
+  background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
+  background: -o-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
+  background: -ms-linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* IE10+ */
+  background: linear-gradient(top,  #eeeeee 0%,#cccccc 100%); /* W3C */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
+  line-height: 1;
+}
+
+.js .menu {
+  /* If we have JavaScript enabled and we're just waiting for flexMenu to load and run, hide list items that don't fit on one line. If JavaScript is not enabled, just show 'em all. */
+  height: 1.5em;
+  overflow: hidden;
+}
+
+.menu > li {
+  margin: 0 0 0 1.5em;
+  display: inline-block;
+  /*height: 2em;*/
+}
+
+.menu > li:first-child {
+  margin-left: 0;
+}
+
+.menu a {
+  display: inline-block;
+  text-decoration: none;
+  padding: .25em .25em .25em .25em;
+  height: 1em;
+  height: 1em;
+  color: #000;
+  font-family: 'Quantico', sans-serif;
+  font-weight: 700;
+}
+
+.menu a:hover {
+  background-color: #006363;
+  color: #fff;
+}
+
+/* flexMenu styles */
+
+.flexMenu-viewMore > a {
+  background-color: #FF9640;
+}
+
+.flexMenu-viewMore.active > a, .flexMenu-viewMore > a:hover {
+  background-color: #FF7400;
+}
+
+.flexMenu-popup {
+  position: absolute;
+  list-style-type: none;
+  padding: 0;
+  background-color: #5CCCCC;
+}
+
+.flexMenu-popup a {
+  display: block;
+}
+
+.flexMenu-popup a:hover {
+  background-color: #006363;
+  color: #fff;
+  display: block;
+}

demo.html

@@ -0,0 +1,87 @@
+<!doctype html>
+<html class="no-js" lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>flexMenu!</title>
+	<meta name="description" content="flexMenu is a jQuery plugin that lets you create responsive menu bars that automatically collapse into a "more" drop-down when they run out of space.
+">
+
+	<meta name="viewport" content="width=device-width">
+	<link rel="stylesheet" href="demo.css">
+
+	<script src="modernizr.custom.js"></script>
+	<link href='http://fonts.googleapis.com/css?family=Quantico:700' rel='stylesheet' type='text/css'>
+</head>
+<body>
+
+	<div class="header">
+		<h1>flexMenu</h1>
+		<p>flexMenu is a jQuery plugin that lets you create responsive menu bars. When there's only space to display some of the items in the menu, the rest of the items collapse into a "more" drop-down. Try it out - just resize the page, or view it on a smartphone!</p>
+	</div>
+
+	<div role="main" class="main">
+
+			<ul class="menu flex">
+				<li><a href="#">One</a></li>
+				<li><a href="#">Two</a></li>
+				<li><a href="#">Three</a></li>
+				<li><a href="#">Four</a></li>
+				<li><a href="#">Five</a></li>
+				<li><a href="#">Six</a></li>
+				<li><a href="#">Seven</a></li>
+				<li><a href="#">Eight</a></li>
+				<li><a href="#">Nine</a></li>
+				<li><a href="#">Ten</a></li>
+				<li><a href="#">Eleven</a></li>
+				<li><a href="#">Twelve</a></li>
+				<li><a href="#">Thirteen</a></li>
+			</ul>
+		<h2>Ready to get started?</h2>
+		<p>A quick overview is available below. You can <a href="https://github.com/352Media/flexMenu">view flexMenu on GitHub</a> to get more details and grab a copy of the plugin.</p>
+
+		<h2>The Markup</h2>
+<pre>
+&lt;ul class="flex menu"&gt;
+    &lt;li&gt;&lt;a href="page.html"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
+    &lt;!-- more list items... --&gt;
+&lt;/ul&gt;</pre>
+		<h2>The JavaScript</h2>
+<pre>$('ul.menu.flex').flexMenu();</pre>
+		<h2>Adjusting on resize</h2>
+		<p>If you're using flexText on a fluid-width page such as this one, you'll probably want to adjust the menu when the user resizes the page, as shown below. (If you're using flexMenu on a fixed-width page or in a context where the user can't resize the window, feel free to leave this bit out.)</p>
+<pre>$(window).resize(function () {
+    resizeTimeout = setTimeout(resizeFunctions, 300);
+});
+
+function resizeFunctions() {
+    $('ul.menu.flex').flexMenu({'undo': true });
+    $('ul.menu.flex').flexMenu();
+}
+</pre>
+
+	</div>
+
+	<div class="footer">
+		<p>A <a href="http://www.352media.com/">352 Media Group</a> shindig. Coded with love in Atlanta by by <a href="http://www.ryandebeasi.com/">Ryan DeBeasi</a>.
+		</p>
+	</div>
+
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+
+	<script src="flexmenu.min.js"></script>
+
+	<script type="text/javascript">
+		$('ul.menu.flex').flexMenu();
+
+		$(window).resize(function () {
+			resizeTimeout = setTimeout(resizeFunctions, 300);
+		});
+
+		function resizeFunctions() {
+				$('ul.menu.flex').flexMenu({'undo': true });
+				$('ul.menu.flex').flexMenu();
+		}
+	</script>
+
+</body>
+</html>

flexmenu.js

@@ -1,5 +1,5 @@
 /*	jQuery.flexMenu
-	Author: Ryan DeBeasi (352 Media Group)
+	Author: Ryan DeBeasi (352 Media Group) - http://www.352media.com/
 	Description: If a list is too long for all items to fit on one line, display a popup menu instead. 
 	Dependencies: jQuery, Modernizr. Modernizr is optional and allows us to force requireClick to be true if touch is supported. */
 (function ($) {