Skip to content
New issue

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

#

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

Already on GitHub? # to your account

Added element targeting option #34

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

Added element targeting option #34

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
3197adc
Added element targeting
tkorsback Feb 13, 2013
f5a63b6
Added nested ul for nav3 in demo.html
tkorsback Oct 11, 2013
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
43 changes: 39 additions & 4 deletions demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@
<style>
/* styles for desktop */
.tinynav { display: none }
#nav .selected a, #nav2 .selected a { color: red }
#nav .selected a, #nav2 .selected a, #nav3 .selected a { color: red }
/* styles for mobile */
@media screen and (max-width: 600px) {
.tinynav { display: block }
#nav, #nav2 { display: none }
#nav, #nav2, #nav3 { display: none }
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="tinynav.min.js"></script>
<script src="tinynav.js"></script>
<script>
$(function () {

Expand All @@ -33,6 +33,14 @@
header: 'Navigation' // Writing any title with this option triggers the header
});

// TinyNav.js 3
$('#nav3').tinyNav({
active: 'selected',
header: 'Header text',
label: 'Label text',
element: '#select-container'
});

});
</script>

Expand All @@ -55,14 +63,41 @@ <h1>TinyNav.js</h1>
<li><a href="http://yahoo.com">Yahoo</a></li>
</ul>


<ul id="nav2">
<li><a href="http://google.com">Google</a></li>
<li><a href="demo.html">Demo page</a></li>
<li class="selected"><a href="http://bing.com">Bing</a></li>
<li><a href="http://yahoo.com">Yahoo</a></li>
</ul>

<ul id="nav3">
<li><a href="http://google.com">Google</a></li>
<li><a href="demo.html">Demo page</a></li>
<li><a href="http://bing.com">Bing</a>
<ul>
<li><a href="http://google.com">Google</a></li>
<li><a href="demo.html">Demo page</a>
<ul>
<li><a href="http://google.com">Google</a></li>
<li><a href="demo.html">Demo page</a></li>
<li><a href="http://bing.com">Bing</a></li>
<li><a href="http://yahoo.com">Yahoo</a></li>
</ul>
</li>
<li><a href="http://bing.com">Bing</a></li>
<li><a href="http://yahoo.com">Yahoo</a></li>
</ul>
</li>
<li class="selected"><a href="http://yahoo.com">Yahoo</a></li>
<li><a href="#">This navigation will land in the container</a></li>
</ul>

<hr />

<div id="select-container"></div>

<hr />

<p><a href="http://tinynav.viljamis.com/">See the documentation</a></p>

</body>
Expand Down
13 changes: 10 additions & 3 deletions tinynav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
var settings = $.extend({
'active' : 'selected', // String: Set the "active" class
'header' : '', // String: Specify text for "header" and show header instead of the active item
'label' : '' // String: sets the <label> text for the <select> (if not set, no label will be added)
'label' : '', // String: Sets the <label> text for the <select> (if not set, no label will be added)
'element' : '' // String: Inject the select to a specific element
}, options);

return this.each(function () {
Expand Down Expand Up @@ -60,8 +61,14 @@
window.location.href = $(this).val();
});

// Inject select
$(l_namespace_i).after($select);
// Check if a target element is set
if (settings.element) {
// Inject select to the target element
$(settings.element).append($select);
} else {
// Inject select after the navigation
$(l_namespace_i).after($select);
}

// Inject label
if (settings.label) {
Expand Down