User-Friendly Navigations
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
js
LICENSE
README.md
uxn-demo.gif
uxn-demo.psd

README.md

UXN 1.0 - Documentation

(hopefully in English)

UXN is a tool for creating user-friendly navigations. It tracks, whether the mouse is moving towards some (sub)menu, and if so, then the menu stays opened. As a result, the user need not to browse through the navigation like a robot and be moving the mouse at right angles (see the animation below).

The second function of UXN is adjusting positions of submenus into the browser's window (page or element).

UXN works exclusively on the basis of classes and thus it doesn't modify the style attribute of elements. All class names can be changed however you want.

UXN uses native methods and APIs (closest, matches, classList, ...), if they are available to ensure maximum efficiency.

Demo: michaljerabek.github.io/UXN

UXN

Dependencies

jQuery - tested with version 1.11.3

Browser support

All browsers supported by jQuery. Although older browsers (IE7 and lower) can be too slow.

Basic usage

JavaScript

var mainNav = new UXN("#main-nav");

//or
var mainNav = new UXN({
    nav: "#main-nav",
    itemOpened: "custom-opened-class"
});

The default selectors for the submenus and items are ul and li. These can be changed by subnav and item properties. It's important that these selctors do not select any other elements than elements of submenus or items.

Note: Do not use selectors like #main-nav .subnav, but only .subnav.

Note: nav selector does not have to be an id, but it must be unique.

Note: The default value of the nav property is #main-nav. So if your navigation has the id #main-nav, you can use just new UXN();.

HTML

Basic navigation:

<nav id="main-nav">  
    <ul>
        <li>
            <a href="#">link</a>  
            <ul>
                <li>...</li>
                ...
            </ul>  
        </li>
        ...
    </ul>  
</nav>

On touch devices may be useful to use a dedicated opening element (see demo #3), if we want to be able to use item's link and be able to open a submenu inside the item. The HTML could look like this:

<nav id="main-nav">  
    <ul>
        <li>
            <a href="#">link</a>  
            <div class="opener">
                <span>→</span>  
                <ul>
                    <li>...</li>
                    ...
                </ul>  
            </div>  
        </li>
        ...
    </ul>  
</nav>

Note: Selector for opening elements can be set by opener property.

Note: Last submenus do not have to have any item (see demo #4, #6, #7).

CSS

#main-nav li {
    position: relative;
    ...
}

#main-nav ul ul {
    position: absolute;
    top: 0px;
    left: 100%;
    
    display: none;
    ...
}        

#main-nav li.UXN__item--opened > ul {
    display: block;
}        

#main-nav li.UXN__item--highlighted {
    background-color: red;
    ...
}        

Usage with CSS Tranistions:

#main-nav li {
    position: relative;

    overflow: hidden;
    ...
}

#main-nav ul ul {
    position: absolute;
    top: 0px;
    left: 100%;
    
    opacity: 0;
    visibility: hidden;
    
    transition: 
    opacity    0.2s ease-in 0s, 
    visibility 0s           0.2s;
    ...
}        

#main-nav li.UXN__item--has-fading-out,
#main-nav li.UXN__item--opened {
    overflow: visible;
}        

#main-nav li.UXN__item--opened {
    background-color: red;
}        

#main-nav li.UXN__item--opened > ul {
    opacity: 1;
    visibility: visible;
    
    transition: opacity 0.2s ease-out;
}        

For more, see the demo.

Classes Used for Browsing a Menu

Initialization and Activation

  • UXN__item--has-subnav (itemHasSubnav):
    - Item with a submenu.
  • <li>
        <code>UXN__opener--has-subnav</code> (<code>openerHasSubnav</code>):
        <br> - Opening element with a submenu.
    </li>
    
    <li>
        <code>UXN</code> (<code>instance</code>):
        <br> - Element which is an instance of UXN (set by the <code>nav</code> property).
    </li>
    
    <li>
        <code>UXN--active</code> (<code>activeInstance</code>):
        <br> - Element which is an instance of UXN and a user is browsing the menu.
    </li>
    

Opening of Submenu

  • UXN__item--opened (itemOpened):
    - Item with an opened submenu. This class should not be used for setting any visual styles (background-color, ...) and should ensure only the opening of submenu (in the final position; [display, transform, left, ...]). (For visual styles can be used UXN__item--highlighted.)
  • <li>
        <code>UXN__opener--opened</code> (<code>openerOpened</code>):
        <br> - Opening element with an opened submenu. This class should not be used for setting any visual styles (<code>background-color</code>, ...) and should ensure only the opening of submenu (in the final position; [<code>display</code>, <code>transform</code>, <code>left</code>, ...]). (For visual styles can be used <code>UXN__opener--highlighted</code>.)
        </li>
    
    <li>
        <code>UXN__item--highlighted</code> (<code>itemHighlighted</code>):
        <br> - Item with an opened submenu.
    </li>
    
    <li>
        <code>UXN__opener--highlighted</code> (<code>openerHighlighted</code>):
        <br> - Opening element with an opened submenu.
    </li>
    
    <li>
        <code>UXN__subnav--has-opened</code> (<code>subnavHasOpened</code>):
        <br> - Submenu with an opened item.
    </li>
    
    <li>
        <code>UXN__subnav--current</code> (<code>currentSubnav</code>):
        <br> - Submenu the mouse is over (or last was).
    </li>
    

Closing of Submenu

    <li>
        <code>UXN__item--has-fading-out</code> (<code>itemHasFadingOut</code>):
        <br> - Item, which submenu is closing. (Only if <code>fading</code> is used.)
    </li>
    
    <li>
        <code>UXN__opener--has-fading-out</code> (<code>openerHasFadingOut</code>):
        <br> - Opening element, which submenu is closing. (Only if <code>fading</code> is used.)
    </li>
    
    <li>
        <code>UXN__subnav--has-fading-out</code> (<code>subnavHasFadingOut</code>):
        <br> - Submenu, which has a closing submenu. (Only if <code>fading</code> is used.)
    </li>
    
    <li>
        <code>UXN-no-fading</code> (<code>noFading</code>):
        <br> - Submenu, that does not use transitions or animations. In case of some submenus use transitions or animations and some not, it's necessary to identify for which submenus should not be expected a <code>transitionend</code> / <code>animationend</code> event (or a <code>done</code> function call in case of using JS animations).
    </li>
    
    <li>
        <code>UXN-sliding--vertical</code> (<code>slidingVertical</code>):
        <br> - It allows custom control of opening submenus. In case that a submenu has a <code>UXN-sliding--vertical</code> class, the submenu is opened without having to stop the mouse, if the mouse is moving vertically.
    </li>
    
    <li>
        <code>UXN-sliding--horizontal</code> (<code>slidingHorizontal</code>):
        <br> - It allows custom control of opening submenus. In case that a submenu has a <code>UXN-sliding--horizontal</code> class, the submenu is opened without having to stop the mouse, if the mouse is moving horizontally.
        </li>
    

Classes containing "fading" are important for the correct work of transitions and animations. They are mainly used to set the element to overflow: visible;, in order to its closing (fading) submenu would be visible.

Other

    <li>
        <code>UXN-exclude</code> (<code>exclude</code>):
        <br> - Submenu that should be excluded from the mouse tracking.
    </li>
    
    <li>
        <code>UXN-exclude--inside</code> (<code>excludeInside</code>):
        <br> - Submenu that should be excluded from the mouse tracking, if the mouse is inside the submenu. (See demo <a href="http://michaljerabek.github.io/UXN#6">#6</a>.)
        <br> - Useful only if <code>hideFollowing</code> is set to <code>false</code>.
    </li>
    
    <li>
        <code>UXN-horizontal</code> (<code>horizontal</code>):
        <br> - Submenu, which is horizontal. (Important, if <code>allowSliding</code> is set to <code>true</code>. <a href="#allowSliding">More info</a>.)
    </li>
    

Adjusting Positions

Basic process is as follows:

  1. Set styles for submenus to a default direction. (For example: Submenus will be positioned down right)
  2. Set styles to classes in the opposite direction. (For example: UXN__subnav--top and UXN__subnav--left.)

If a submenu fits into the window (page, element) and thus its position is not changed, the submenu will not have any class except in the case, that adjusting positions from the center is used. More info.

If the positions are adjusted based on the page (<html>) and the page is smaller then the browser's window, the window is used instead.

If a submenu does not fit into the window (page, element) even in the changed position, direction down right is preferred.

The first level of submenus can be adjusted by a different base then the others. In that case the property firstLevelPositionsFromCenter is set to true, if the property is not explicitly set to false. The other submenus will then continue the direction from the first level.

Setting the base for positioning:

var mainNav = new UXN({
    nav: "#main-nav",
    positionBase: UXN.POSITIONS.BASE.PAGE // UXN.POSITIONS.BASE.WINDOW // $("#wrapper") // document.getElementById("wrapper")
});

Classes Used for Adjusting Positions:

    <li>
        <code>UXN-position--skip</code> (<code>positionSkip</code>):
        <br> - It may be set to submenus that should not be positioned. Typically, the first level of submenus. (Can be set by <code>positionSkipOnFirstLevel: true</code>, in this case, you don't have to add these classes.)
    </li>
    
    <li>
        <code>UXN__subnav--left</code> (<code>subnavLeft</code>) |
        <code>UXN__subnav--right</code> (<code>subnavRight</code>) |
        <code>UXN__subnav--top</code> (<code>subnavTop</code>) |
        <code>UXN__subnav--bottom</code> (<code>subnavBottom</code>):
        <br> - A submenu which should be positioned in the corresponding direction.
    </li>
    
    <li>
        <code>UXN__item--has--left</code> (<code>itemHasLeft</code>) |
        <code>UXN__item--has--right</code> (<code>itemHasRight</code>) |
        <code>UXN__item--has--top</code> (<code>itemHasTop</code>) |
        <code>UXN__item--has--bottom</code> (<code>itemHasBottom</code>):
        <br> - An item with a submenu in the corresponding direction.
    </li>
    
    <li>
        <code>UXN__opener--has--left</code> (<code>openerHasLeft</code>) |
        <code>UXN__opener--has--right</code> (<code>openerHasRight</code>) |
        <code>UXN__opener--has--top</code> (<code>openerHasTop</code>) |
        <code>UXN__opener--has--bottom</code> (<code>openerHasBottom</code>):
        <br> - An opening element with a submenu in the corresponding direction.
    </li>
    

Note: The process of adujsting positions causes a delay before the corresponding submenu is opened. Some browsers (IE) may not respond for a few milliseconds.

Options

To set up custom classes, see above.

Options can be changed at runtime by instance.opt.property, but do not change classes.

    <li>
        <code>nav</code> (default: <code>"#main-nav"</code>):
        <br> - Selector for an element wrapping the navigation (Must be unique.)
        <br> - Type: <code>String</code>
    </li>
    
    <li>
        <code>item</code> (default: <code>"li"</code>):
        <br> - Selector for items of the navigation. (Inside the navigation the selector must not select anything but items.)
        <br> - Type: <code>String</code>
    </li>
    
    <li>
        <code>subnav</code> (default: <code>"ul"</code>):
        <br> - Selector for submenus of the navigation. (Inside the navigation the selector must not select anything but submenus.)
        <br> - Type: <code>String</code>
    </li>
    
    <li>
        <code>opener</code> (default: value from <code>item</code>):
        <br> - Selector for opening elements of the navigation. (Inside the navigation the selector must not select anything but opening elements.)
        <br> - Type: <code>String</code>
    </li>
    
    <li>
        <code>closer</code> (default: <code>"a"</code>):
        <br> - Selector for elements closing the navigation on click.
        <br> - Type: <code>String</code>
    </li>
    
    <li>
        <code>autoSleep</code> (default: <code>true</code>):
        <br> - The navigation stop responding to events, if it's outside the viewport<!-- (or inside an element with <code>display: none</code>)-->.
        <br> - Type: <code>Boolean</code>
    </li>
    
    <li>
        <code>fading</code> (default: <code>UXN.FADING_TYPE.NONE</code>):
        <br> - Sets whether the navigation uses CSS Transitions, CSS Animations or JavaScript animations.
        <br> - Options: <code>UXN.FADING_TYPE.TRANSITION</code> |
        <code>UXN.FADING_TYPE.ANIMATION</code> |
        <code>UXN.FADING_TYPE.JS</code> |
        <code>UXN.FADING_TYPE.NONE</code>
        <br> - Type: <code>UXN.FADING_TYPE</code>
    </li>
    
    <li>
        <code>animation</code> (default: <code>"UXN-hide"</code>):
        <br> - Name of the animation (or array with names) used for closing a submenu.
        <br> - Type: <code>String</code> / <code>Array</code>
    </li>
    
    <li>
        <code>delayHide</code> (default: <code>false</code>):
        <br> - Sets whether an opened submenu should be closed immediately after the mouse leaves the item or just before another submenu is opened (or the mouse is not moving for <code>openTimeout</code>).
        <br> - Type: <code>Boolean</code>
    </li>
    
    <li>
        <code>autoHide</code> (default: <code>true</code>):
        <br> - Sets whether in the case, that the mouse is stopped outside the navigation, the navigation should be automatically closed after an <code>outsideTimeout</code>.
        <br> - Type: <code>Boolean</code>
    </li>
    
    <li>
        <code>closeOnlyInLevel</code> (default: <code>false</code>):
        <br> - It will only close opened submenu, which is at the same level as the newly opened. This allows you to keep open the last submenu. See demo <a href="http://michaljerabek.github.io/UXN#6">#6</a>.
        <br> - Type: <code>Boolean</code>
    </li>
    
    <li>
        <code>doNotCloseFirstLevel</code> (default: <code>false</code>):
        <br> - The last opened submenu at the first level stays always opened. (During the initialization a submenu at the first level can be opened by an <code>onInit</code> handler using <code>open</code> method.)
        <br> - Type: <code>Boolean</code>
    </li>
    
    <li>
        <code>hideFollowing</code> (default: <code>true</code>):
        <br> - Sets whether the submenus following a submenu the mouse is over should be immediately closed even if the <code>insideTimeout</code> timer did not elapse. (Applicable if the user is browsing the navigation [moving the mouse] backwards.) If the <code>insideTimeout</code> is set to a longer time and <code>hideFollowing</code> to <code>false</code>, then the user may return back, if he/she realizes, that the searched item is inside already opened submenu (several levels down), but he/she had moved back into a different submenu (several levels up).
        <br> - Type: <code>Boolean</code>
    </li>
    
    <li>
        <code>keepOpened</code> (default: <code>true</code>):
        <br> - The last opened item stays opened even if the mouse is outside of any item (but inside the same submenu).
        <br> - Type: <code>Boolean</code>
    </li>
    
    <li>
        <code>excludeFirstLevel</code> (default: <code>true</code>):
        <br> - Excludes the first level from mouse tracking.
        <br> - Type: <code>Boolean</code>
    </li>
    
    <li id="allowSliding">
        <code>allowSliding</code> (default: <code>true</code>):
        <br> - Sets whether the user does not have to stop the mouse over an item for a time set by <code>openTimeout</code> before a submenu is opened. This feature takes into account the layout of the current submenu. In case that <code>ignoreLayoutOnSliding</code> is set to <code>false</code> (default), it is necessary to add a class specified in <code>horizontal</code> to submenus, which are horizontal. (The default behavior can be overridden using classes.)
        <br> - Type: <code>Boolean</code>
    </li>
    
    <li>
        <code>allowSlidingOnFirstLevel</code> (default: <code>false</code>):
        <br> - Sets whether <code>allowSliding</code> is used even for the first level.
        <br> - Type: <code>Boolean</code>
    </li>
    
    <li>
        <code>ignoreLayoutOnSliding</code> (default: <code>false</code>):
        <br> - Sets, if <code>allowSliding</code> feature should take into account the layout of the current submenu. (If this option is <code>false</code> and if the current submenu is vertical, the need to stop the mouse will be applied only if the mouse is moving vertically.) 
        <br> - Type: <code>Boolean</code>
    </li>
    
    <li>
        <code>slidingZone</code> (default: <code>75</code>):
        <br> - Sets a percentage size of a zone (from farther side of the cursor), in which the opening of submenus won't be delayed.
        <br> - Type: <code>Number</code>
    </li>
    
    <li>
        <code>openTimeout</code> (default: <code>30</code>):
        <br> - Sets a time for which the user must stop the mouse over an item to open it.
        <br> - Type: <code>Number</code>
    </li>
    
    <li>
        <code>preventClickOnTouch</code> (default: <code>true</code>):
        <br> - Sets whether click events (<code>onclick</code>) should be blocked (<code>preventDefault</code>), if the user taps (<code>ontouchend</code>) on an item with a submenu (and without an opening element).
        <br> - Type: <code>Boolean</code>
    </li>
    
    <li>
        <code>closeOnClick</code> (default: <code>false</code>):
        <br> - Sets whether the navigation should be closed after the user clicks (anywhere).
        <br> - Type: <code>Boolean</code>
    </li>
    
    <li>
        <code>mouseTolerance</code> (default: <code>1</code>):
        <br> - The number of pixels in the direction of the mouse movement, that should be taken into account when testing, whether the mouse is moving towards any submenu. 
        <br> - Type: <code>Number</code>
    </li>
    
    <li>
        <code>minZoneExt</code> (default: <code>25</code>):
        <br> - Sets a minimum extention of a zone, which is considered as "moving towards the menu". (The size of an extension increases with the increasing distance from the mouse to the navigation. For an example, see the <a href="http://michaljerabek.github.io/UXN#2">demo</a> and turn on debug mode.)
        <br> - Type: <code>Number</code>
    </li>
    
    <li>
        <code>maxZoneExt</code> (default: <code>250</code>):
        <br> - Sets a maximum extention of a zone, which is considered as "moving towards the menu". (The size of an extension increases with the increasing distance from the mouse to the navigation. For an example, see the <a href="http://michaljerabek.github.io/UXN#2">demo</a> and turn on debug mode.)
        <br> - Type: <code>Number</code>
    </li>
    
    <li>
        <code>zoneExtOffset</code> (default: <code>0</code>):
        <br> - Sets a fixed extention (reduction) of a zone, which is considered as "moving towards the menu". (The value is added to the result.)
        <br> - Type: <code>Number</code>
    </li>
    
    <li>
        <code>surroundingZone</code> (default: <code>15</code>):
        <br> - Size (in px) of a zone around a submenu to which the user may move the mouse and the navigation won't be immediately closed (but for the time set in <code>surroundingTimeout</code> [if the mouse stops moving]).
        <br> - Type: <code>Number</code>
    </li>
    
    <li>
        <code>insideTimeout</code> (default: <code>30</code>):
        <br> - The time at which a submenu will be closed, if the user is not moving the mouse towards it, if the mouse is inside the navigation.
        <br> - Type: <code>Number</code>
    </li>
    
    <li>
        <code>outsideTimeout</code> (default: <code>400</code>):
        <br> - The time at which the navigation will be closed, if the user is not moving the mouse towards any submenu, if the mouse is outside the navigation.
        <br> - Type: <code>Number</code>
    </li>
    
    <li>
        <code>surroundingTimeout</code> (default: <code>600</code>):
        <br> - The time at which the navigation will be closed, if the user is not moving the mouse towards it, if the mouse hits a <code>surroundingZone</code>.
    
        <br> - Type: <code>Number</code>
    </li>
    
    <li>
        <code>stopFadingOnHover</code> (default: <code>true</code>):
        <br> - If the user hover over a fading submenu, the submenu will be reopened.
        <br> - Type: <code>Boolean</code>
    </li>
    
    <li>
        <code>waitForFading</code> (default: <code>false</code>):
        <br> - By default, it is possible to use (browse) only one instance. Thanks to this, if the user is browsing a navigation and hover over another navigation (UXN instance), this navigation won't be opened. The <code>waitForFading</code> property sets, whether another navigation should be openable until after all animations/transitions were completed.
        <br> - Type: <code>Boolean</code>
    </li>
    
    <li>
        <code>isFadedOut</code>:
        <br> - Function to determine whether a currently closing submenu is closed (faded out). (It's called on <code>transitionend</code>.) Important for the proper functioning of CSS Transitions. The default function detects if the <code>transitionend</code> event was triggered by <code>visibility</code> property.
        <br> - Parameters:
        <br>
        <ul>
            <li><code>jQuery</code> - element of the submenu</li>
            <li><code>TransitionEvent</code></li>
            <li><code>Function</code> - callback notifying that the submenu was closed, which can be called later</li>
        </ul>
        <br> - The function must return <code>false</code>, if the submenu was not closed. In case it was, then <code>true</code>.
        <br> - When using transitions, it's strongly recommended to use the pattern used above (a submenu is opened/closed by <code>visibility</code>, which is set in the <code>transition</code> property with a delay and a class <code>UXN__item--opened</code> removes the <code>visibility</code> from the <code>transition</code>), because <code>TransitionEvent</code> may not be triggered if the submenu is switched fast (but in case of <code>visibility</code> it works every time) or the <code>TransitionEvent</code> may be captured from a previous event.
        <br> - Type: <code>Function &lt;= Boolean</code>
    </li>
    
    <li>
        <code>onInit</code> (default: <code>null</code>):
        <br> - Function is called at the end of initialization.
        <br> - Type: <code>Function</code>
    </li>
    
    <li>
        <code>onSubnavChange</code> (default: <code>null</code>):
        <br> - Function is called when the mouse is moved towards a different submenu.
        <br> - Parameters:
        <br>
        <ul>
            <li><code>jQuery</code> - element with the current submenu</li>
        </ul>
    
        <br> - Type: <code>Function</code>
    </li>
    
    <li>
        <code>onOpen</code> (default: <code>null</code>):
        <br> - Function is called before a submenu is opened. If the function returns <code>false</code>, the submenu won't be opened.
        <br> - Function can be used for JavaScipt animations. (See the demo <a href="http://michaljerabek.github.io/UXN#5">#5</a>.)
        <br> - Parameters:
        <ul>
            <li><code>jQuery</code> - element with the submenu</li>
            <li><code>jQuery</code> - element with the corresponding item</li>
            <li><code>jQuery</code> - the corresponding opening element</li>
        </ul>
    
        <br> - Type: <code>Function [&lt;= Boolean]</code>
    </li>
    
    <li>
        <code>onClose</code> (default: <code>null</code>):
        <br> - Function is called before a submenu is closed. If the function returns <code>false</code>, the submenu won't be closed.
        <br> - Function can be used for JavaScipt animations. In that case it's necessary to set the property <code>fading</code> to <code>UXN.FADING_TYPE.JS</code> and after the animation ends call the callback function and remove from the <code>style</code> attribute properties[1] that removes (not literally) the submenu from the document (most likely a <code>display</code> property). The <code>UXN__item--opened</code> class must ensure opening of submenus[2], although this is done using JS. See the demo <a href="http://michaljerabek.github.io/UXN#5">#5</a>. (*1 and *2 is true when using the position adjusting feature.)
        <br> - Parameters:
        <br>
        <ul>
            <li><code>jQuery</code> - element with the submenu</li>
            <li><code>jQuery</code> - element with the corresponding item</li>
            <li><code>jQuery</code> - the corresponding opening element</li>
            <li><code>Function</code> - callback notifying the end of the animation (= the submenu is closed)</li>
        </ul>
    
        - Type: <code>Function [&lt;= Boolean]</code>
    </li>
    
    <li>
        <code>setPositions</code> (default: <code>true</code>):
        <br> - Turns on position adjusting of submenus to fit the browser's window (page, element);
        <br> - Type: <code>Boolean</code>
    </li>
    
    <li>
        <code>setPositionsOnReset</code> (default: <code>true</code>):
        <br> - Positions will be reset even after scrolling.
        <br> - Type: <code>Boolean</code>
    </li>
    
    <li>
        <code>setPositionsOnDeactivation</code> (default: <code>true</code>):
        <br> - Positions will be reset even after the navigation is closed.
        <br> - Type: <code>Boolean</code>
    </li>
    
    <li>
        <code>setPositionsOnElement</code> (default: <code>false</code>):
        <br> - Positions will be reset even after the size of the page or the element set in <code>positionBase</code> or <code>firstLevelPositionBase</code> is changed.
        <br> - Type: <code>Boolean</code>
    </li>
    
    <li>
        <code>positionSkipOnFirstLevel</code> (default: <code>true</code>):
        <br> - Submenus at the first level won't be positioned.
        <br> - Type: <code>Boolean</code>
    </li>
    
    <li>
        <code>positionBase</code> (default: <code>UXN.POSITIONS.BASE.WINDOW</code>):
        <br> - Sets whether the positions should be set based on the browser's window, the page (<code>&lt;html&gt;</code>) or a specific element.
        <br> - Options: <code>UXN.POSITIONS.BASE.WINDOW</code> | <code>UXN.POSITIONS.BASE.PAGE</code>
        <br> - Type: <code>UXN.POSITIONS.BASE</code> / <code>jQuery</code> / <code>HTMLElement</code>
    </li>
    
    <li>
        <code>firstLevelPositionBase</code> (default: <code>UXN.POSITIONS.BASE.WINDOW</code>):
        <br> - Sets whether the positions at the first level should be set based on the browser's window, the page (<code>&lt;html&gt;</code>) or a specific element.
        <br> - If this option is set and it is not specified in the setting object otherwise, <code>fristLevelPositionsFromCenter</code> is set to <code>true</code> and <code>positionSkipOnFirstLevel</code> to <code>false</code>.
        <br> - Options: <code>UXN.POSITIONS.BASE.WINDOW</code> | <code>UXN.POSITIONS.BASE.PAGE</code>
        <br> - Type: <code>UXN.POSITIONS.BASE</code> / <code>jQuery</code> / <code>HTMLElement</code>
    </li>
    
    <li>
        <code>inheritPositions</code> (default: <code>UXN.POSITIONS.DIRECTION.BOTH</code>):
        <br> - Direction of position which will be inherited from parents.
        <br> - Options: <code>UXN.POSITIONS.DIRECTION.BOTH</code> | <code>UXN.POSITIONS.DIRECTION.VERTICAL</code> | <code>UXN.POSITIONS.DIRECTION.HORIZONTAL</code> | <code>UXN.POSITIONS.DIRECTION.NONE</code>
        <br> - Type: <code>UXN.POSITIONS.DIRECTION</code>
    </li>
    
    <li id="firstLevelPositionsFromCenter">
        <code>firstLevelPositionsFromCenter</code> (default: <code>UXN.POSITIONS.DIRECTION.NONE</code>):
        <br> - Position at the first level will be set to be directed to larger space (based on the postions of items). The following submenus will follow positions of its parents, if possible.
        <br> - Options: <code>UXN.POSITIONS.DIRECTION.BOTH</code> | <code>UXN.POSITIONS.DIRECTION.VERTICAL</code> | <code>UXN.POSITIONS.DIRECTION.HORIZONTAL</code> | <code>UXN.POSITIONS.DIRECTION.NONE</code>
        <br> - Type: <code>UXN.POSITIONS.DIRECTION</code>
    </li>
    
    <li>
        <code>positionOffset</code> (default: <code>10</code>):
        <br> - Space (in px) that should be around the edges of <code>positionBase</code>.
        <br> - Type: <code>Number</code>
    </li>
    
    <li>
        <code>hideOverflow</code> (default: <code>true</code>):
        <br> - Hides overflows of items (openers or submenus) during position adjustment.
        <br> - Type: <code>Boolen</code>
    </li>
    
    <!--
    
  • onResetPositionsStart (výchozí: null):
    • Funkce se spustí před přenastavováním pozic nabídek. V případě, že funkce vrátí false, operace se nespustí.

    • Typ: Function [<= boolean]

  • onResetPositionsEnd (výchozí: null):
    • Funkce se spustí po přenastavení pozic nabídek.

    • Typ: Function

  • -->
    <li>
        <code>debug</code> (default: <code>false</code>):
        <br> - Turns on displaying of tested zones used to determine whether the mouse is moving towards a submenu, and displaying of added classes. Not available in minified version. (I recommend to test it in Chrome, Opera or Firefox. Correct functioning can not be guaranteed due to unknown CSS.)
        <br> - Type: <code>Boolean</code>
    </li>
    

Global Settings

    <li>
        <code>UXN.VENDOR_PREFIXES</code> (default: <code>false</code>):
        <br> - Sets whether transitions or animations use prefixes (<code>-webkit-</code>, <code>-moz-</code>, ...).
        <br> - Type: <code>Boolean</code>
    </li>
    
    <li>
        <code>UXN.MULTIPLE_INSTANCES</code> (default: <code>false</code>):
        <br> - Sets whether it is possible to use multiple instances simultaneously.
        <br> - Type: <code>Boolean</code>
    </li>
    
    <li>
        <code>UXN.SKIP_MOUSE_EVENTS</code> (default: <code>0</code>):
        <br> - Sets how many <code>onmousemove</code> events should be skipped. In case that <code>insideTimeout</code> is set to a longer time, you can save a little work for the browser.
        <br> - Type: <code>Number</code>
    </li>
    
    <li>
        <code>UXN.DEFAULTS</code> (default: <code>{...}</code>):
        <br> - Default settings.
        <br> - Type: <code>Object</code>
    </li>
    
    <li>
        <code>UXN.PREFIX</code> (default: <code>"UXN"</code>):
        <br> - Prefix added to the default classes and to data assigned to elements.
        <br> - Type: <code>String</code>
    </li>
    
    <li>
        <code>UXN.EVENT_NS</code> (default: <code>"UXN"</code>):
        <br> - Namespace of events.
        <br> - Type: <code>String</code>
    </li>
    
    <li>
        <code>UXN.BEM.EL</code> (default: <code>"__"</code>):
        <br> - A separator of blocks and elements in the default classes.
        <br> - Type: <code>String</code>
    </li>
    
    <li>
        <code>UXN.BEM.MOD</code> (default: <code>"--"</code>):
        <br> - A separator of elements and modifiers in the default classes.
        <br> - Type: <code>String</code>
    </li>
    
    <li>
        <code>UXN.POSITIONS.IDS.STYLE</code> (default: <code>"UXN-positioning__style"</code>):
        <br> - <code>id</code> of <code>&lt;style&gt;</code> inside <code>&lt;head&gt;</code> used for adjusting positions.
        <br> - Type: <code>String</code>
    </li>
    
    <li>
        <code>UXN.POSITIONS.CLASSES.RESET</code> (default: <code>"UXN-positioning__reset-start"</code>):
        <br> - Class used for adjusting positions.
        <br> - Type: <code>String</code>
    </li>
    
    <li>
        <code>UXN.DEBUG</code>:
        <br> - Settings of debug mode.
    </li>
    

Methods

    <li>
        <code>destroy()</code>:
        <br> - Destroys an instance.
        <br>
    </li>
    
    <li>
        <code>refresh([options])</code>:
        <br> - Refreshes an instance.
        <br> - Parameters:
        <ul>
            <li><code>Object</code> - new options</li>
        </ul>
    </li>
    
    <li>
        <code>open(subnav [, notParents]) &lt;= <code>Boolean</code></code>:
        <br> - Opens a submenu. In case the submenu is opened (no error has occurred) returns <code>true</code>, otherwise <code>false</code>.
        <br> - Parameters:
        <br>
        <ul>
            <li><code>String</code> / <code>HTMLElement</code> / <code>jQuery</code> - submenu to be opened</li>
            <li><code>Boolean</code> - do not open parent submenus</li>
        </ul>
    </li>
    
    <li>
        <code>close([subnav, preserveFirstLevel]) &lt;= <code>Boolean</code></code>:
        <br> - Closes a submenu. In case the submenu is closed (no error has occurred) returns <code>true</code>, otherwise <code>false</code>. If the method is called without any parameters, it will close the whole navigation.
        <br> - Parameters:
        <ul>
            <li><code>String</code> / <code>HTMLElement</code> / <code>jQuery</code> - submenu to be closed</li>
            <li><code>Boolean</code> - in case that <code>doNotCloseFirstLevel</code> is set to <code>true</code>, submenus at the first level won't be closed</li>
        </ul>
    </li>
    
    <li>
        <code>sleep([touchEvents])</code>:
        <br> - Instance stops responding to events.
        <br> - Parameters:
        <ul>
            <li><code>Boolean</code> - stop responding even to touch events</li>
        </ul>
    </li>
    
    <li>
        <code>wake()</code>:
        <br> - Instance again begins to respond to events.
    </li>
    
    <li>
        <code>toggleDebug()</code>:
        <br> - Turns on/off debug mode. (Not available in minified version.)
    </li>
    
    <li>
        - Plenty of other self-explanatory methods for browsing a navigation. I recommend take a look in the developer tools in Chrome.
    </li>
    

Warning: Native methods like querySelector or querySelectorAll do not always select the same elements as jQuery (and do not use exactly the same selectors). Therefore use only the selectors that will always select the same elements. More information here.