Skip to content
This repository was archived by the owner on Feb 18, 2020. It is now read-only.

Commit c0d8cc4

Browse files
acolangeloacolangelo
committed
Updated documentation.
1 parent 0f976e0 commit c0d8cc4

File tree

1 file changed

+46
-23
lines changed

1 file changed

+46
-23
lines changed

‎docs/index.html

Lines changed: 46 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ <h1 class="logo"><a href="/" class="ss-list">jPanelMenu</a></h1>
3232
<li><a href="#animation">Animation</a></li>
3333
<li><a href="#options">Options</a></li>
3434
<li><a href="#api">API</a></li>
35-
<li><a href="#tips">Tips</a></li>
36-
<li><a href="#contact">Contact</a></li>
35+
<li><a href="#tips">Tips &amp; Examples</a></li>
36+
<li><a href="#about">About</a></li>
3737
</ul>
3838
</nav>
3939
</header>
@@ -111,9 +111,9 @@ <h2 id="options"><a href="#options">Options</a></h2>
111111
<p>The following options are set via an <code>object</code> passed into the constructor function call, as shown below.</p>
112112

113113
<pre>var jPM = $.<span class="jQuery-constructor">jPanelMenu</span>({
114-
menu: '#menu',
115-
trigger: '.menu-trigger',
116-
duration: 300
114+
menu: '#menu',
115+
trigger: '.menu-trigger',
116+
duration: 300
117117
});</pre>
118118

119119
<div class="spec first" id="options-menu">
@@ -185,18 +185,15 @@ <h3><a href="#options-keyboardShortcuts">keyboardShortcuts</a></h3>
185185
code: 27, /* Escape Key */
186186
open: false,
187187
close: true
188-
},
189-
{
188+
},{
190189
code: 37, /* Left Arrow Key */
191190
open: false,
192191
close: true
193-
},
194-
{
192+
},{
195193
code: 39, /* Right Arrow Key */
196194
open: true,
197195
close: true
198-
},
199-
{
196+
},{
200197
code: 77, /* M Key */
201198
open: true,
202199
close: true
@@ -443,20 +440,20 @@ <h3><a href="#api-getPanel">getPanel(&nbsp;)</a></h3>
443440
</section>
444441

445442
<section>
446-
<h2 id="tips"><a href="#tips">Tips, Best Practices, and Other Good Ideas</a></h2>
443+
<h2 id="tips"><a href="#tips">Tips, Best Practices, and Other Good Ideas (with Examples)</a></h2>
447444

448445
<p>jPanelMenu was built to be very open-ended and allow a lot of customization for each implementation. A lot of the customization of jPanelMenu implementations will start with the easy hooks provided by the plugin.</p>
449446

450447
<p>When jPanelMenu is <a href="#api-on" title="jPanelMenu | API | on">turned on</a>, the following elements are created (or classes applied, in the case of the <code>&lt;html&gt;</code> tag):</p>
451448

452449
<pre>&lt;html class="jPanelMenu"&gt;
453-
&lt;head&gt;
454-
<span class="plain-text">...</span>
455-
&lt;/head&gt;
456-
&lt;body&gt;
457-
&lt;div id="jPanelMenu-menu" /&gt;
458-
&lt;div class="jPanelMenu-panel" /&gt;
459-
&lt;/body&gt;
450+
&lt;head&gt;
451+
<span class="plain-text">...</span>
452+
&lt;/head&gt;
453+
&lt;body&gt;
454+
&lt;div id="jPanelMenu-menu" /&gt;
455+
&lt;div class="jPanelMenu-panel" /&gt;
456+
&lt;/body&gt;
460457
&lt;/html&gt;</pre>
461458

462459
<p class="caption"><strong>Note:</strong> Content abbreviated for simplicity.</p>
@@ -483,19 +480,29 @@ <h3 id="tips-progressive-enhancement"><a href="#tips-progressive-enhancement" ti
483480

484481
<p class="jPM-specific">That idea was used to create this page. Take a look at what this page looks like <a href="" title="Disable jPanelMenu" id="trigger-off">with jPanelMenu turned off</a> (particularly the navigation) to see this principle in action. Notice how all of the navigation is accessible in the <a href="#" title="jPanelMenu">header of the page</a>, and no content is lost.</p>
485482

486-
<h3>jPanelMenu and jRespond &mdash; Perfect Together</h3>
483+
<h3 id="tips-jrespond"><a href="#tips-jrespond" title="jPanelMenu and jRespond &mdash; Perfect Together">jPanelMenu and jRespond &mdash; Perfect Together</a></h3>
487484

488485
<p>I'm a <strong>huge</strong> fan of <a href="https://github.com/ten1seven/jRespond" title="jRespond | Github">jRespond</a>, which is &ldquo;a simple way to globally manage JavaScript on responsive websites.&rdquo;</p>
489486

490-
<p>jRespond and jPanelMenu are the perfect couple &mdash; use jRespond to enable and disable jPanelMenu at the appropriate breakpoints, creating a truly great experience. That&rsquo;s how I almost always use jPanelMenu (that&rsquo;s how this site works), and I suggest you give it a shot, too.</p>
487+
<p>jRespond and jPanelMenu are the perfect couple &mdash; use jRespond to enable and disable jPanelMenu at the appropriate breakpoints, creating a truly great experience. That&rsquo;s how I almost always use jPanelMenu, and I suggest you give it a shot, too.</p>
491488

492489
<p>Responsive design is awesome on its own, but add responsive behavior to the mix, and you&rsquo;ve made something incredible.</p>
490+
491+
<p>Check out the <a href="examples/jrespond" title="jPanelMenu Example | jPanelMenu with jRespond">example</a> of how to use jRespond with jPanelMenu, which includes a basic how-to, code snippets, and helpful tips.</p>
492+
493+
<p><a href="examples/jrespond" title="jPanelMenu Example | jPanelMenu with jRespond" class="button example"><span class="ss-icon">&#x1F440;</span> View Example</a></p>
493494
</section>
494495

495496
<section>
496-
<h2 id="contact"><a href="#contact">Questions, Comments, Insults, or Other Feedback?</a></h2>
497+
<h2 id="about"><a href="#about">Who Made This Wonderful Little Plugin?</a></h2>
498+
499+
<p>jPanelMenu was created, and is maintained, by <a href="http://acolangelo.com" title="Anthony Colangelo | Web Design &amp; Development">Anthony Colangelo</a>, a developer at <a href="http://happycog.com">Happy Cog</a>.</p>
500+
501+
<p>You can find him (<a href="https://twitter.com/acolangelo" title="Twitter | Anthony Colangelo (@acolangelo)">@acolangelo</a>) on <a href="https://twitter.com/acolangelo" title="Twitter | Anthony Colangelo (@acolangelo)">Twitter</a> and <a href="https://github.com/acolangelo" title="Github | Anthony Colangelo (@acolangelo)">Github</a>.</p>
497502

498-
<p><a href="http://acolangelo.com/contact" title="Anthony Colangelo | Web Design &amp; Development | Contact">Send me a message</a>, let&rsquo;s talk.</p>
503+
<p>Have a question about how jPanelMenu works that is not answered here? Have feedback for new features, options, or API functions that I should add? Anything else you want to talk about?</p>
504+
505+
<p>Talk to me on <a href="https://twitter.com/acolangelo" title="Twitter | Anthony Colangelo (@acolangelo)">Twitter</a>, where I am <a href="https://twitter.com/acolangelo" title="Twitter | Anthony Colangelo (@acolangelo)">@acolangelo</a>, or <a href="http://acolangelo.com/contact" title="Anthony Colangelo | Web Design &amp; Development | Contact">send me a message</a>, and let&rsquo;s talk!.</p>
499506
</section>
500507
</div>
501508

@@ -507,6 +514,22 @@ <h2 id="contact"><a href="#contact">Questions, Comments, Insults, or Other Feedb
507514
<script>try{Typekit.load();}catch(e){}</script>
508515
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
509516
<script>window.jQuery || document.write('<script src="js/lib/jquery-1.8.2.min.js"><\/script>')</script>
517+
518+
<!--
519+
520+
This is a concatenated and minifed file containing all scripts necessary to run this page.
521+
522+
View my uncompressed script for this page at http://jpanelmenu.com/js/script.js
523+
524+
Other Included Files:
525+
http://jpanelmenu.com/js/lib/modernizr-2.6.1.min.js
526+
http://jpanelmenu.com/js/lib/respond-1.1.0.min.js
527+
http://jpanelmenu.com/js/lib/jPanelMenu-1.0.0.min.js
528+
http://jpanelmenu.com/js/lib/highlight.min.js
529+
http://jpanelmenu.com/js/lib/plugins.js
530+
531+
-->
532+
510533
<script src="js/script.min.js"></script>
511534
</body>
512535
</html>

0 commit comments

Comments
 (0)