-
Notifications
You must be signed in to change notification settings - Fork 13
Expand file tree
/
Copy pathREADME.html
More file actions
87 lines (85 loc) · 5.44 KB
/
README.html
File metadata and controls
87 lines (85 loc) · 5.44 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<h1 id="about-responsive-menu">About Responsive Menu</h1>
<p><strong>jQuery Responsive Menu</strong> is a drop-down menu for responsive websites. It is a <strong>jQuery plugin</strong> that includes a
JavaScript file and CSS file as well as sample HTML.</p>
<ul>
<li><strong>Description</strong>: Drop-down Menu jQuery plugin for responsive layouts</li>
<li><strong>Repository</strong>: <a href="https://github.com/jbowyers/responsive-menu">https://github.com/jbowyers/responsive-menu</a></li>
<li><strong>Demo</strong>: <a href="http://responsive-menu.com">http://responsive-menu.com</a></li>
<li><strong>Bower</strong>: jquery-responsive-menu</li>
<li><strong>Requires</strong>: jQuery</li>
<li><strong>Author</strong>: jbowyers</li>
<li><strong>Copyright</strong>: 2015 jbowyers</li>
<li><strong>License</strong>: GPLv3</li>
<li><strong>Version: 0.2.1</strong></li>
</ul>
<h2 id="demo">Demo</h2>
<p>Visit <a href="http://responsive-menu.com">http://responsive-menu.com</a> to view a responsive demo</p>
<h2 id="basic-setup">Basic Setup</h2>
<ul>
<li><strong>Download</strong> - Download and extract the Responsive Menu zip files - <a href="https://github.com/jbowyers/responsive-menu">https://github.com/jbowyers/responsive-menu</a></li>
<li><strong>Copy files</strong> - Copy the responsive-menu.js and responsive-menu.css files to your project</li>
<li><strong>Setup Menu HTML</strong> - Open the responsive-menu.html sample file and copy and past the menu html into the
html files in your project. Or, setup existing menus in your project to work with Responsive Menu (see Configuration).</li>
<li><strong>Link to CSS and JavaScript files</strong> - Add link and script references to your HTML files</li>
<li><strong>Initialize Responsive Menu</strong> - Activate the plugin using jQuery (see Configuration)</li>
</ul>
<h3 id="using-bower-package-manager">Using Bower Package Manager</h3>
<p>The Responsive Menu repo is registered as a bower package as jquery-responsive-menu.</p>
<h2 id="configuration">Configuration</h2>
<h3 id="suggested-html">Suggested HTML</h3>
<pre><code class="lang-html">
<div class="rm-container">
<a class="rm-toggle rm-button rm-nojs" href="#">Menu</a>
<nav class="rm-nav rm-nojs rm-lighten">
<ul> ...</code></pre>
<h3 id="theme-class-options">Theme class options</h3>
<p><strong>Options</strong>: rm-lighten, rm-darken.<br>rm-lighten theme lightens menu item backgrounds and is best used if your design requires a dark menu background color.
rm-darken theme darkens menu item backgrounds and is best used if your design required a light menu background color.
You can set the menu background color to any color to work with the chosen theme.</p>
<h3 id="sample-jquery">Sample jQuery</h3>
<pre><code class="lang-javascript">
jQuery(function ($) {
var menu = $('.rm-nav').rMenu({
// Optional Settings
minWidth: '960px',
});
});</code></pre>
<h3 id="full-list-of-options">Full List of Options</h3>
<h4 id="minwidth">minWidth</h4>
<p>Minimum width for expanded layout in pixels - String<br>Should match media query in css file. Must be in pixels and include px units if not using Modernizr.<br>default: '769px'</p>
<h4 id="transitionspeed">transitionSpeed</h4>
<p>The opening and closing speed of the menus in milliseconds<br>default: 400</p>
<h4 id="jqueryeasing">jqueryEasing</h4>
<p>The jQuery easing function - used with jQuery transitions<br>default: 'swing'<br>options: 'swing', 'linear'</p>
<h4 id="css3easing">css3Easing</h4>
<p>The CSS3 transitions easing function - used with CSS3 transitions<br>default: 'ease'</p>
<h4 id="togglebtnbool">toggleBtnBool</h4>
<p>Use button as Toggle Link - instead of text<br>default: true</p>
<h4 id="togglesel">toggleSel</h4>
<p>The Toggle Link selector<br>default: '.rm-toggle'</p>
<h4 id="menusel">menuSel</h4>
<p>The menu/sub-menu selector<br>default: 'ul'</p>
<h4 id="menuitemssel">menuItemsSel</h4>
<p>The menu items selector<br>default: 'li'</p>
<h4 id="animatebool">animateBool</h4>
<p>Use CSS3 animation/transitions<br>default: true<br>Do not use animation/transitions: false</p>
<h4 id="acceleratebool">accelerateBool</h4>
<p>Force GPU Acceleration
default: false<br>Force: true</p>
<h4 id="developmentmode">developmentMode</h4>
<p>Use development mode - outputs information to console<br>default: false</p>
<h3 id="the-toggle-button">The Toggle Button</h3>
<p>An optional menu-btn.png file is included. By default, the same image is included in the CSS as a data URI
so the png file is not required unless you would prefer to use the png file instead of the data URI.</p>
<h3 id="dependencies">Dependencies</h3>
<p>jQuery, Modernizr (optional)</p>
<h3 id="how-to-run-tests">How to run tests</h3>
<p>No testing framework at this time</p>
<h3 id="task-managers">Task Managers</h3>
<p>Gruntfile.js and package.json files are included if you want to manage tasks using Grunt.<br>Note: The Grunt file uses configuration information contained in the package.json</p>
<h3 id="deployment-instructions">Deployment instructions</h3>
<p>The git repo is versioned and includes a Bower configuration file so the repo can be easily included in your project as a dependency.</p>
<h2 id="contribution-guidelines">Contribution guidelines</h2>
<p>Contributions are much appreciated and welcomed.</p>
<h3 id="who-do-i-talk-to-">Who do I talk to?</h3>
<p>jbowyers</p>