Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

dropdown hide #31

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

dropdown hide #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
22df610
dropdown hide
Zykli Dec 25, 2017
e051faf
Update README.md
Zykli Dec 25, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
PriorityNav is a pure javascript plugin that will move your menu items if they don't fit its parent.
![Priority Navigation demo](http://gijsroge.github.io/priority-nav.js/priority-nav-demo.gif)

#### Take a look at the **[Demo](http://gijsroge.github.io/priority-nav.js/)** site.

----------

Expand Down Expand Up @@ -58,6 +57,7 @@ breakPoint: 500, //amount of pixels when all menu items should b
throttleDelay: 50, // this will throttle the calculating logic on resize because i'm a responsible dev.
offsetPixels: 0, // increase to decrease the time it takes to move an item.
count: true, // prints the amount of items are moved to the attribute data-count to style with css counter.
hiddenAfterClick: false, // hide dropdown after click on inside elemants.

//Callbacks
moved: function () {}, // executed when item is moved to dropdown
Expand Down
2 changes: 1 addition & 1 deletion demo/css/main.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

157 changes: 82 additions & 75 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!doctype html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
Expand All @@ -22,47 +22,66 @@
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<div class="bg">
<header class="wrapper">
<h1>PriorityNav.js</h1>
<a class="github" href="https://github.com/gijsroge/priority-navigation">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="24" height="25"
viewBox="0 0 24 25">
<defs>
<style>.cls-2 {
fill: #171717;
}</style>
</defs>
<path d="M11.998 0C5.37 0-.004 5.52-.004 12.327c0 5.444 3.44 10.063 8.21 11.693.6.112.818-.27.818-.595 0-.293-.01-1.068-.016-2.096-3.34.744-4.044-1.653-4.044-1.653-.545-1.424-1.332-1.803-1.332-1.803-1.09-.765.082-.75.082-.75 1.205.088 1.84 1.27 1.84 1.27 1.07 1.884 2.808 1.34 3.492 1.025.11-.797.42-1.34.762-1.65-2.665-.31-5.467-1.367-5.467-6.09 0-1.345.468-2.445 1.236-3.306-.123-.312-.535-1.565.118-3.262 0 0 1.007-.33 3.3 1.263.958-.273 1.984-.41 3.005-.414 1.018.005 2.045.142 3.004.415C17.294 4.78 18.3 5.112 18.3 5.112c.656 1.697.244 2.95.12 3.262.77.86 1.235 1.96 1.235 3.307 0 4.735-2.807 5.777-5.48 6.082.43.38.814 1.132.814 2.282 0 1.648-.015 2.977-.015 3.38 0 .33.216.714.825.594 4.765-1.633 8.2-6.25 8.2-11.692C24 5.518 18.628 0 12 0z"
id="path-1" class="cls-2" fill-rule="evenodd"/>
</svg>
download on GitHub</a>
</header>

<section class="wrapper">
<p class="heading">
PriorityNav is a lightweight pure javascript plugin that will move your menu items if they don't fit its parent.
</p>

<div class="social">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://gijsroge.github.io/priority-nav.js/" data-text="PriorityNav.js. A lightweight dependency free javascript plugin for smart responsive navigations." data-via="GijsRoge">Tweet</a>
<script>!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');</script>
<a class="github-button" href="https://github.com/gijsroge/priority-navigation" data-count-href="/gijsroge/priority-navigation/stargazers" data-count-api="/repos/gijsroge/priority-navigation#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star gijsroge/priority-navigation on GitHub">Star</a>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
<div class="bg">
<header class="wrapper">
<h1>PriorityNav.js</h1>
<a class="github" href="https://github.com/gijsroge/priority-navigation">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="24" height="25"
viewBox="0 0 24 25">
<defs>
<style>
.cls-2 {
fill: #171717;
}
</style>
</defs>
<path d="M11.998 0C5.37 0-.004 5.52-.004 12.327c0 5.444 3.44 10.063 8.21 11.693.6.112.818-.27.818-.595 0-.293-.01-1.068-.016-2.096-3.34.744-4.044-1.653-4.044-1.653-.545-1.424-1.332-1.803-1.332-1.803-1.09-.765.082-.75.082-.75 1.205.088 1.84 1.27 1.84 1.27 1.07 1.884 2.808 1.34 3.492 1.025.11-.797.42-1.34.762-1.65-2.665-.31-5.467-1.367-5.467-6.09 0-1.345.468-2.445 1.236-3.306-.123-.312-.535-1.565.118-3.262 0 0 1.007-.33 3.3 1.263.958-.273 1.984-.41 3.005-.414 1.018.005 2.045.142 3.004.415C17.294 4.78 18.3 5.112 18.3 5.112c.656 1.697.244 2.95.12 3.262.77.86 1.235 1.96 1.235 3.307 0 4.735-2.807 5.777-5.48 6.082.43.38.814 1.132.814 2.282 0 1.648-.015 2.977-.015 3.38 0 .33.216.714.825.594 4.765-1.633 8.2-6.25 8.2-11.692C24 5.518 18.628 0 12 0z"
id="path-1" class="cls-2" fill-rule="evenodd" />
</svg>
download on GitHub
</a>
</header>

<section class="wrapper">
<p class="heading">
PriorityNav is a lightweight pure javascript plugin that will move your menu items if they don't fit its parent.
</p>

<div class="social">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://gijsroge.github.io/priority-nav.js/" data-text="PriorityNav.js. A lightweight dependency free javascript plugin for smart responsive navigations." data-via="GijsRoge">Tweet</a>
<script>
!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');</script>
<a class="github-button" href="https://github.com/gijsroge/priority-navigation" data-count-href="/gijsroge/priority-navigation/stargazers" data-count-api="/repos/gijsroge/priority-navigation#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star gijsroge/priority-navigation on GitHub">Star</a>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
</div>
</section>

<div class="wrapper--big">
<div style="margin-top: 7rem;">Hide dropdown after click</div>
<nav class="nav">
<div class="wrapper resize-drag nav-wrapper">
<ul class="nav-ul">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</nav>
</div>
</section>

<div class="wrapper--big">
<div style="margin-top: 7rem;">Stayed open dropdown after click</div>
<nav class="nav">
<div class="wrapper resize-drag nav-wrapper">
<div class="wrapper resize-drag topnav-wrapper">
<ul class="nav-ul">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
Expand All @@ -72,43 +91,30 @@ <h1>PriorityNav.js</h1>
</ul>
</div>
</nav>
</div>

<nav class="nav">
<div class="wrapper resize-drag topnav-wrapper">
<ul class="nav-ul">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</nav>

<section class="wrapper bottom">
<p>
<strong>
PriorityNav is developed by <a href="http://www.twitter.com/gijsroge">@gijsroge</a> & weighs
around 5kb
& 2kb gzipped. The idea behind this plugin is based around the priority+ navigation from
<a href="http://bradfrost.com/blog/post/revisiting-the-priority-pattern/">Brad Frost</a>.
</strong>
</p>

<p>
PriorityNav is licensed under the MIT license which basically means you can do whatever you want as
long
as you include the original copyright and license notice in any copy of the software/source.
</p>

<h4></h4>

<p>
<b>Browsers support:</b><br/> ie9+ (if you include <a href="https://github.com/remy/polyfills">classList.js</a>), Chrome, Firefox, Safari, Opera. (mobile & desktop)
</p>
</section>
</div>
<section class="wrapper bottom">
<p>
<strong>
PriorityNav is developed by <a href="http://www.twitter.com/gijsroge">@gijsroge</a> & weighs
around 5kb
& 2kb gzipped. The idea behind this plugin is based around the priority+ navigation from
<a href="http://bradfrost.com/blog/post/revisiting-the-priority-pattern/">Brad Frost</a>.
</strong>
</p>

<p>
PriorityNav is licensed under the MIT license which basically means you can do whatever you want as
long
as you include the original copyright and license notice in any copy of the software/source.
</p>

<h4></h4>

<p>
<b>Browsers support:</b><br /> ie9+ (if you include <a href="https://github.com/remy/polyfills">classList.js</a>), Chrome, Firefox, Safari, Opera. (mobile & desktop)
</p>
</section>
</div>

<!--[if lte IE 9]>
<script src="js/classList.js"></script>
Expand All @@ -127,6 +133,7 @@ <h4></h4>
navDropdownLabel: 'test',
navDropdownClassName: "nav__dropdown", // class used for the dropdown.
navDropdownToggleClassName: "nav__dropdown-toggle", // class used for the dropdown toggle.
hiddenAfterClick: true,
});

var nav2 = priorityNav.init({
Expand Down
Loading