Demo #1: Basic usage

HTML

<nav id="demo1">
    <ul class="UXN-horizontal"> 
    <!-- UXN-horizontal: not necessary if "allowSlidingOnFirstLevel" is set to false or "ignoreLayoutOnSliding" to true -->

        <!-- first level items --> 
        <li><a href="#">Item</a> 

            <ul>
                <!-- second level items -->
                <li><a href="#">Item</a> 

                    <ul>
                        <!-- third level items -->
                        <li><a href="#">Item</a> 
                            ... 
                        </li>
                        ... 
                        <!-- third level items -->
                    </ul>
                </li>
                ... 
                <!-- second level items -->
            </ul>
        </li>
        ... 
        <!-- first level items -->
    </ul>
</nav>

CSS

Show full CSS

#demo1 {
    font-size: 18px;
    font-family: open-sans;

    margin: 50px 35px;
}

#demo1 ul {
    list-style: none;

    background-color: #f4f4f4;
    box-shadow: 0 0 10px 0 rgba(10, 51, 68, 0.35);
}

#demo1 .UXN-horizontal {
    height: 40px;

    border: 1px solid #6b9bae;
}

#demo1 ul ul {
    position: absolute;
    top: 100%;

    width: 100%;

    display: none; /* hide submenus */
}

#demo1 .UXN__item--opened > ul {
    display: block; /* show opened submenu */
}

#demo1 .UXN-horizontal > li > ul {
    left: -1px;

    width: calc(100% + 1px);
}

#demo1 .UXN-horizontal > li ~ li > ul {
    left: 1px;

    width: calc(100% - 1px);
}

#demo1 .UXN-horizontal > li + li + li + li + li > ul {
    width: 100%;
}

/* third level + */
#demo1 ul ul ul {
    left: 95%; 
    top: 25%; /* default direction: down-right */
    
min-width: 175px;
}

/* opposite of the default direction */
#demo1 .UXN__subnav--left {
    left: auto;
    right: 95%;
}

/* opposite of the default direction */
#demo1 .UXN__subnav--top {
    top: auto;
    bottom: 25%;
}

#demo1 li {
    text-align: left;


    position: relative;
    float: left;

color: #23556a;

width: 20%;
}

#demo1 li li {
    float: none;

    width: 100%;
}

#demo1 li:hover {
    background-color: #0b6185;
    color: #fff;
}

/* Visual styles of an opened item are set by .UXN__item--highlighted not .UXN__item--opened,
 * otherwise the styles would be visible during the position adjustment process. */
#demo1 li.UXN__item--highlighted {
    z-index: 2;

    background-color: #1b4253;
    color: #fff;
}

#demo1 ul ul .UXN__item--has-left {
    text-align: right;
}

#demo1 a {
    text-decoration: none;
    line-height: 40px;

    padding: 0 40px 0 20px;

    color: #1b4253;

    display: block;
}

#demo1 .UXN__item--highlighted > a,
#demo1 a:hover {
    color: #fff;
}

#demo1 .UXN-horizontal > li ~ li > a {
    border-left: 1px solid #abc2ce;
}

#demo1 ul ul .UXN__item--has-left > a {
    padding: 0 20px 0 40px;
}

#demo1 .UXN__item--has-subnav:after {
    line-height: 40px;


    position: absolute;
    right: 20px;
    top: 0;
    
color: #20546a;
}

#demo1 .UXN-horizontal > .UXN__item--has-subnav:after {
    content: "\2193";
}

#demo1 .UXN__item--has-subnav:after {
    content: "\2192";
}

#demo1 ul ul .UXN__item--has-left:after {
    content: "\2190";

    left: 20px;
    right: auto;
}

#demo1 .UXN__item--has-subnav:hover:after,
#demo1 .UXN__item--opened:after {
    color: #fff;
}

JavaScript

new UXN({
    nav: "#demo1",
    
    setPositions: true,
    firstLevelPositionBase: $("#demo1").closest(".examples__tab")
});

Demo #2: Basic usage with CSS Transitions

HTML

<nav id="demo2">
    <ul class="UXN-horizontal"> 
    <!-- UXN-horizontal: not necessary if "allowSlidingOnFirstLevel" is set to false or "ignoreLayoutOnSliding" to true -->

        <!-- first level items --> 
        <li><a href="#">Item</a>

            <ul>
                <!-- second level items -->
                <li><a href="#">Item</a> 

                    <ul>
                        <!-- third level items -->
                        <li><a href="#">Item</a> 
                            ... 
                        </li>
                        ... 
                        <!-- third level items -->
                    </ul>
                </li>
                ... 
                <!-- second level items -->
            </ul>
        </li>
        ... 
        <!-- first level items -->
    </ul>
</nav>

CSS

Show full CSS

demo2 {
    font-size: 18px;
    font-family: open-sans;

    margin: 50px 35px;
}

#demo2 ul {
    list-style: none;

    background-color: #f4f4f4;
    box-shadow: 0 0 10px 0 rgba(10, 51, 68, 0.35);
}

#demo2 .UXN-horizontal {
    height: 40px;

    border: 1px solid #6b9bae;
}

#demo2 ul ul {
    position: absolute;
    top: 100%;
    transform: translateY(-5%);
    
width: 100%;


    /* hide submenus */
    opacity: 0;
    visibility: hidden;

    transition: 
        opacity    0.15s ease-in 0s, 
        transform  0.15s ease-in 0s, 
        visibility 0s            0.15s; 
        /* Visibility is delayed to the end of the transition.
         * Using "visibility" in transitions is strongly recommended. */
}

#demo2 .UXN-horizontal > li > ul {
    left: -1px;

    width: calc(100% + 1px);
}

#demo2 .UXN-horizontal > li ~ li > ul {
    left: 1px;

    width: calc(100% - 1px);
}

#demo2 .UXN-horizontal > li + li + li + li + li > ul {
    width: 100%;
}

/* third level + */
#demo2 ul ul ul {
    left: 95%;
    top: 25%; /* default direction: down-right */
    transform: translateX(-5%);
    
min-width: 175px;
}

/* opposite of the default direction */
#demo2 ul ul .UXN__subnav--left {
    left: auto;
    right: 95%;
    transform: translateX(5%);
}

/* opposite of the default direction */
#demo2 ul ul .UXN__subnav--top {
    top: auto;
    bottom: 25%;
}

#demo2 li {
    text-align: left;


    position: relative;
    
float: left;

width: 20%;

color: #23556a;


    overflow: hidden; /* submenus would otherwise be rendered on the page */
    
transition: background 0.15s ease-in;
}

#demo2 .UXN__item--opened,
#demo2 .UXN__item--has-fading-out {
    overflow: visible; /* opened and fading (!) submenu would not be visible */
}

#demo2 li li {
    float: none;

    width: 100%;
}

#demo2 li:hover {
    background-color: #0b6185;
    color: #fff;
    
transition: background 0.15s ease-out;
}

/* show opened submenu */
#demo2 ul .UXN__item--opened > ul {
    z-index: 2;
    transform: translateY(0%) translateX(0%);

    opacity: 1;
    visibility: visible;

    transition: 
        opacity   0.15s ease-out 0s, 
        transform 0.15s ease-out 0s; /* visibility is removed from the transition; strongly recommended pattern */
}

/* Visual styles of an opened item are set by .UXN__item--highlighted not .UXN__item--opened,
 * otherwise the styles would be visible during the position adjustment process. */
#demo2 li.UXN__item--highlighted {
    background-color: #1b4253;
    color: #fff;
}

#demo2 ul ul .UXN__item--has-left {
    text-align: right;
}

#demo2 a {
    text-decoration: none;
    line-height: 40px;

    padding: 0 40px 0 20px;

    color: inherit;

    display: block;
    transition: color 0.15s ease-in;
}

#demo2 li:hover > a {
    color: #fff;

    transition: color 0.15s ease-out;
}

#demo2 .UXN-horizontal > li ~ li > a {
    border-left: 1px solid #abc2ce;
}

#demo2 ul ul .UXN__item--has-left > a {
    padding: 0 20px 0 40px;
}

#demo2 .UXN__item--has-subnav:after {
    line-height: 40px;

    
    position: absolute;
    right: 20px;
    top: 0;
    transform: translateX(0%);
    
color: #20546a;

transition: 
    color     0.15s ease-in, 
    transform 0.15s ease-in;
}

#demo2 .UXN-horizontal > .UXN__item--has-subnav:after {
    content: "\2193";

    transform: translateY(0%);
}

#demo2 .UXN__item--has-subnav:after {
    content: "\2192";
}

#demo2 ul ul .UXN__item--has-left:after {
    content: "\2190";

    left: 20px;
    right: auto;
}

#demo2 .UXN__item--has-subnav:hover:after,
#demo2 .UXN__item--highlighted:after {
    transform: translateX(50%);
    
color: #fff;

transition: 
    color     0.15s ease-out, 
    transform 0.15s ease-out;
}

#demo2 .UXN__item--has-left.UXN__item--has-subnav:hover:after,
#demo2 .UXN__item--has-left.UXN__item--highlighted:after {
    transform: translateX(-50%);
}

#demo2 .UXN-horizontal > .UXN__item--highlighted.UXN__item--has-subnav:after,
#demo2 .UXN-horizontal > .UXN__item--has-subnav:hover:after {
    transform: translateY(25%);
}

JavaScript

new UXN({
    nav: "#demo2",
    
    setPositions: true,
    firstLevelPositionBase: $("#demo2").closest(".examples__tab"),
    
    fading: UXN.FADING_TYPE.TRANSITION
});

Demo #3: Touch-friendly navigation with CSS Animations

HTML

<nav id="demo3">
    <ul class="UXN-horizontal">
    <!-- UXN-horizontal: not necessary if "allowSlidingOnFirstLevel" is set to false or "ignoreLayoutOnSliding" to true -->

        <!-- first level items --> 
        <li><a href="#">Item</a>
            <div class="UXN__opener"> <!-- opening element -->

                <ul>
                    <!-- second level items --> 
                    <li><a href="#">Item</a>

                        <div class="UXN__opener"> <!-- opening element -->
                            <ul>
                                <!-- third level items --> 
                                <li><a href="#">Item</a></li>
                                ...
                                <!-- third level items --> 
                            </ul>
                        </div>            
                    </li>
                    ...
                    <!-- second level items --> 
                </ul>
            </div>            
        </li>
        ...
        <!-- first level items --> 
    </ul>
</nav>

CSS

Show full CSS

#demo3 {
    font-size: 18px;
    font-family: open-sans;

    margin: 50px 35px;
}

#demo3 ul {
    list-style: none;

    background-color: #f4f4f4;
    box-shadow: 0 0 10px 0 rgba(10, 51, 68, 0.35);
}

#demo3 .UXN-horizontal {
    font-size: 0;

    height: 40px;
    width: 100%;

    border: 1px solid #6b9bae;

    table-layout: fixed;
    display: table;
}

#demo3 ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    
width: 100%;


    /* hide submenus */
    opacity: 0;
    visibility: hidden;
}

#demo3 .UXN-horizontal > li > .UXN__opener > ul {
    left: -1px;
}

#demo3 .UXN-horizontal > li ~ li > .UXN__opener > ul {
    left: 0px;

    width: calc(100% - 1px);
}

#demo3 .UXN-horizontal > li + li + li + li + li > .UXN__opener > ul {
    width: calc(100% + 1px);
}

/* third level + */
#demo2 ul ul ul {
    left: 100%;
    top: 0%; /* default direction: down-right */
    transform: translateX(-5%);
    
min-width: 175px;
}

/* opposite of the default direction */
#demo3 ul ul .UXN__subnav--left {
    left: auto;
    right: 100%;
}

/* opposite of the default direction */
#demo3 ul ul .UXN__subnav--top {
    top: auto;
    bottom: 0%;
}

/* show opened submenu */
#demo3 ul .UXN__opener--opened > ul {
    z-index: 2;

    opacity: 1;
    visibility: visible;
}

#demo3 .UXN-horizontal > li > .UXN__opener--opened > ul {
    animation: 
        show       0.3s ease-in 1 forwards,
        moveInDown 0.3s ease-in 1 forwards;
}

#demo3 .UXN-horizontal ul .UXN__opener--opened > ul {
    animation: 
        show        0.3s ease-in 1 forwards,
        moveInRight 0.3s ease-in 1 forwards;
}

#demo3 .UXN-horizontal ul .UXN__opener--opened > .UXN__subnav--left {
    animation: 
        show       0.3s ease-in 1 forwards,
        moveInLeft 0.3s ease-in 1 forwards;
}

/* fade out closed submenu */
#demo3 .UXN-horizontal > li > .UXN__opener--has-fading-out > ul {
    animation: 
        hide      0.15s ease-in 1 forwards,
        moveOutUp 0.15s ease-in 1 forwards;
}

#demo3 .UXN-horizontal ul .UXN__opener--has-fading-out > ul {
    animation: 
        hide        0.15s ease-in 1 forwards,
        moveOutLeft 0.15s ease-in 1 forwards;
}

#demo3 .UXN-horizontal ul .UXN__opener--has-fading-out > .UXN__subnav--left {
    animation: 
        hide         0.15s ease-in 1 forwards,
        moveOutRight 0.15s ease-in 1 forwards;
}

#demo3 li {
    text-align: left;


    position: relative;
    
width: 20%;

color: #23556a;


    overflow: hidden; /* submenus would otherwise be rendered on the page */
}

#demo3 .UXN__item--has-subnav.UXN__item--opened,
#demo3 .UXN__item--has-subnav.UXN__item--has-fading-out {
    overflow: visible; /* opened and fading (!) submenu would not be visible */
}

#demo3 li li {
    width: 100%;
}

#demo3 li .UXN__item--has-subnav {
    width: 100%;

    display: table;
    table-layout: fixed;
}

#demo3 .UXN-horizontal > .UXN__item--has-subnav {
    font-size: 18px;

    float: left;
}

#demo3 li > *:hover {
    background-color: #0b6185;
    color: #fff;
    
transition: 
    color      0.15s ease-out,
    background 0.15s ease-out;
}

#demo3 a {
    text-decoration: none;
    line-height: 40px;

    padding: 0 40px 0 20px;

    color: inherit;

    display: block;
    transition: 
        color      0.15s ease-in,
        background 0.15s ease-in;
}

#demo3 .UXN__opener {
    float: right;
    margin-top: -40px;

    height: 40px;
    width: 55px;

    border-right: 1px solid #b8c9d2;
    border-left: 1px solid #b8c9d2;
    background-color: #f4f4f4;

    transition: background 0.15s ease-in;
}

#demo3 > ul > li + li + li + li + li > .UXN__opener,
#demo3 .UXN__opener .UXN__opener {
    border-right: none;
}

/* Visual styles of an opened opener are set by .UXN__opener--highlighted not .UXN__opener--opened,
 * otherwise the styles would be visible during the position adjustment process. */
#demo3 .UXN__opener.UXN__opener--highlighted {
    background-color: #1b4253;
    
transition: background 0.15s ease-out;
}

#demo3 .UXN__opener:after {
    text-align: center;
line-height: 40px;


    position: absolute;
    right: 0px;
    top: 0;
    transform: translateX(0%);
    
width: 57px;

color: #20546a;

transition: 
    color     0.15s ease-in, 
    transform 0.15s ease-in;
}

#demo3 .UXN__opener:after {
    content: "\2192";
}

#demo3 .UXN-horizontal > li > .UXN__opener:after {
    content: "\2193";

    transform: translateY(0%);
}

#demo3 ul ul .UXN__opener--has-left:after {
    content: "\2190";
}

#demo3 .UXN__opener:hover:after,
#demo3 .UXN__opener--highlighted:after {
    transform: translateX(15%);
    
color: #fff;

transition: 
    color     0.15s ease-out, 
    transform 0.15s ease-out;
}

#demo3 .UXN__opener--has-left.UXN__opener:hover:after,
#demo3 .UXN__opener--has-left.UXN__opener--highlighted:after {
    transform: translateX(-15%);
}

#demo3 .UXN-horizontal > li > .UXN__opener--highlighted.UXN__opener:after,
#demo3 .UXN-horizontal > li > .UXN__opener:hover:after {
    transform: translateY(25%);
}

@supports (display: flex) {
    
#demo3 li .UXN__item--has-subnav {
    width: 100%;

    display: flex;
    flex-flow: row nowrap;
}

#demo3 li .UXN__item--has-left  {
    flex-direction: row-reverse;
}

#demo3 li .UXN__item--has-subnav > * {
    display: block;
}

#demo3 li .UXN__item--has-subnav > a {
    flex: 1;

    width: 100%;
}

#demo3 li .UXN__item--has-left > a {
    text-align: right;

    padding: 0 20px 0 40px;
}

#demo3 li li > .UXN__opener {
    margin-top: 0;

    min-width: 55px;
    min-height: 40px;
}

#demo3 li .UXN__item--has-left .UXN__opener {
    border-right: 1px solid #b8c9d2;
    border-left: none;
}

#demo3 li .UXN__item--has-left .UXN__opener:after {
    right: auto;
    left: 0;
}
}

/* Animations */
@keyframes hide { /* set in the object with options */
      0% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden;  }
}

@keyframes show {
      0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes moveOutUp {
      0% { transform: translateY(  0px); }
    100% { transform: translateY(-10px); }
}

@keyframes moveOutLeft {
      0% { transform: translateX(  0px); }
    100% { transform: translateX(-10px); }
}

@keyframes moveOutRight {
      0% { transform: translateX( 0px); }
    100% { transform: translateX(10px); }
}

@keyframes moveInDown {
      0% { transform: translateY(-10px); }
     55% { transform: translateY(  4px); }
     85% { transform: translateY( -1px); }
    100% { transform: translateY(  0px); }
}

@keyframes moveInRight {
      0% { transform: translateX(-10px); }
     55% { transform: translateX(  4px); }
     85% { transform: translateX( -1px); }
    100% { transform: translateX(  0px); }
}

@keyframes moveInLeft {
      0% { transform: translateX(10px); }
     55% { transform: translateX(-4px); }
     85% { transform: translateX( 1px); }
    100% { transform: translateX( 0px); }
}

JavaScript

new UXN({
    nav: "#demo3",
    opener: ".UXN__opener",
    
    setPositions: true,
    firstLevelPositionBase: $("#demo3").closest(".examples__tab"),
    
    fading: UXN.FADING_TYPE.ANIMATION,
    animation: "hide"
});

Demo #4: Amazon-like navigation

HTML

<nav id="demo4">
    <!-- "first level" -->
    <div class="UXN__subnav UXN__subnav--top-level">

        <!-- the only item in the "first level" -->
        <div class="UXN__item UXN__item--top-level">
            <span>Categories</span> 
            
            <!-- second level - list with categories -->
            <ul class="UXN__subnav UXN__subnav--categories">
               
                <!-- categories -->
                <li class="UXN__item UXN__item--category">
                    <a href="#">Category 1</a>                        

                    <!-- third level - category -->
                    <div class="UXN__subnav UXN__subnav--category">
                        <img src="http://lorempixel.com/400/600/food/5/" alt="">
                        <h2>Category 1</h2>
                        <a href="#">Item in category 1 <span>description of the item</span></a>
                        ...
                        <!-- links in the category -->
                    </div>
                    <!-- third level -->
                </li>    
                ...
                <!-- categories -->
            </ul>
            <!-- second level -->
        </div>
        <!-- item in the "first level" -->
    </div>
    <!-- "first level" -->
</nav>

CSS

Show full CSS

#demo4 {
    font-size: 18px;
    font-family: open-sans;

    margin: 50px 35px;

    width: 144px;
    height: 44px;

    color: #23556a;
}

#demo4 a {
    text-decoration: none;

    color: #23556a;
}

#demo4 .UXN__subnav {
    list-style: none;

    background-color: #f4f4f4;
    box-shadow: 0 0 10px 0 rgba(10, 51, 68, 0.35);
}

#demo4 .UXN__subnav--top-level {
    float: left;

    border: 1px solid #6b9bae;
    border-radius: 6px;
}

#demo4 .UXN__subnav--categories {
    position:absolute;
    top: 125%;
    left: -1px;
transform: translateY(-10px);

padding: 10px 0px;
width: 190px;

border-radius: 6px;
background-color: #fff;


    /* hide submenus */
    opacity: 0;
    visibility: hidden;
    overflow: hidden;

    transition: 
        width      0.3s  ease-in 0s, 
        opacity    0.15s ease-in 0s, 
        transform  0.15s ease-in 0s, 
        visibility 0s            0.15s;       
        /* Visibility is delayed to the end of the transition.
         * Using "visibility" in transitions is strongly recommended. */
}

#demo4 .UXN__subnav--categories.UXN__subnav--has-opened {
    width: 640px;
}

/* show categories list */
#demo4 .UXN__item--opened > .UXN__subnav--categories,
#demo4 .UXN__item--opened.UXN__item--top-level:after {
    transform: translateY(0px);

    opacity: 1;
    visibility: visible;
}

#demo4 .UXN__item--opened > .UXN__subnav--categories,
#demo4 .UXN__item--opened.UXN__item--top-level:after {
    transition: 
        width     0.3s  ease-out, 
        opacity   0.15s ease-out, 
        transform 0.15s ease-out; /* visibility is removed from the transition; strongly recommended pattern */
}

#demo4 .UXN__subnav--category {
    position:absolute;
    top: 0px;
    left: 190px;
    
padding: 15px 25px;
width: 450px;
height: 100%;

box-sizing: border-box;
box-shadow: none;
border-left: 1px solid #b8c9d2;


    opacity: 0;
    visibility: hidden;
    overflow: hidden;

    transition: 
        opacity    0.3s ease-in 0s, 
        visibility 0s           0.3s; 
    /* Here the "visibility pattern" is not necessary, because parent items do not have "overflow: hidden". 
     * In that case these submenus should have a "UXN-no-fading" class. */
}

#demo4 .UXN__subnav--category > * {
    position: relative;
    z-index: 2;
}

#demo4 .UXN__subnav--category h2 {
    font-size: 20px;

    clear: both;
    margin-bottom: 10px;

    color: #23556a;
}

#demo4 .UXN__subnav--category h2 ~ h2 {
    padding-top: 5px;
}

#demo4 .UXN__subnav--category a {
    font-size: 14px;

    float: left;
    clear: both;
    margin-bottom: 10px;

    color: #1b4253;

    transition: 
        color 0.05s ease-in, 
        font  0.05s ease-in;
}

#demo4 .UXN__subnav--category a:hover {
    font-weight: bold;

    color: #23556a;

    transition: 
        color 0.05s ease-out, 
        font  0.05s ease-out;
}

#demo4 .UXN__subnav--category a span {
    font-size: 12px;
    font-weight: normal;

    color: #59727d;

    display: block;
}

#demo4 .UXN__subnav--category img {
    position:absolute;
    top: 0px;
    right: 0px;
    z-index: 0;
}

#demo4 .UXN__subnav--category:after {
    content: "";

    position: absolute;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;

    background: #fff; 
    background: 
        linear-gradient(125deg, #fff  5%, transparent 55%),
        linear-gradient( 75deg, #fff  5%, transparent 55%),
        linear-gradient( 90deg, #fff 10%, transparent 70%);
}

/* show category */
#demo4 .UXN__item--opened > .UXN__subnav--category {
    z-index: 2;

    opacity: 1;
    visibility: visible;

    transition: opacity 0.15s ease-out 0s;
}

/* opening element - "Categories" */
#demo4 .UXN__item--top-level {
    position: relative;
    
border-radius: 6px;


    overflow: hidden; /* submenus would otherwise be rendered on the page */
    
cursor: default;

}

/* arrow */
#demo4 .UXN__item--top-level:after {
    content: "";

    position:absolute;
    bottom: -25%;
    left: 106px;
    transform: translateY(-10px);

    border: 15px solid;
    border-color: transparent transparent #fff transparent;

    opacity: 0;
    visibility: hidden;

    transition: 
        opacity    0.15s ease-in 0s,
        transform  0.15s ease-in 0s,
        visibility 0s            0.15s;
}

#demo4 .UXN__item--top-level > span {
    padding: 9px 15px 9px 18px;

    display: block;
}

#demo4 .UXN__item--top-level > span:after {
    content: "\2193";

    font-size: 20px;
    line-height: 0;

    margin-left: 9px;
    position: relative;
    top: 0px;
}

#demo4 .UXN__item,
#demo4 .UXN__item > a {
    transition: 
        background 0.15s ease-in, 
        color      0.15s ease-in;
}

#demo4 .UXN__item:hover,
#demo4 .UXN__item:hover > a,
#demo4 .UXN__item.UXN__item--highlighted,
#demo4 .UXN__item.UXN__item--highlighted > a {
    transition:
        background 0.15s ease-out,
        color      0.15s ease-out;
}

#demo4 .UXN__item.UXN__item--opened,
#demo4 .UXN__item.UXN__item--has-fading-out {
    overflow: visible; /* opened and fading (!) submenu would not be visible */
}

#demo4 .UXN__item--top-level:hover,
#demo4 .UXN__item:hover > a,
#demo4 .UXN__subnav--top-level:hover {
    background-color: #0b6185;
    color: #fff;
}

/* Visual styles of an opened item are set by .UXN__item--highlighted not .UXN__item--opened,
 * but because the position adjustment is not enabled, it actually does not matter. */
#demo4 .UXN__item--top-level.UXN__item--highlighted,
#demo4 .UXN__item.UXN__item--highlighted > a,
#demo4 .UXN__subnav--top-level.UXN__subnav--has-opened {
    background-color: #1b4253;
    color: #fff;
}

#demo4 .UXN__item--category {
    width: 190px;
}

#demo4 .UXN__item--category > a {
    font-size: 16px;

    position: relative;

    width: 140px;
    padding: 6px 25px;

    display: block;
}

#demo4 .UXN__item--category.UXN__item--has-subnav > a:after {
    content: "\2192";
    
line-height: 0;


    position: absolute;
    right: 15px;
    top: 16px;

    color: #b8c9d2;
    
transition: 
    right 0.15s ease-in,
    color 0.15s ease-in;

}

#demo4 .UXN__item.UXN__item--highlighted > a:after,
#demo4 .UXN__item:hover > a:after {
    color: #fff;

    transition: 
        right 0.15s ease-out, 
        color 0.15s ease-out;
}

#demo4 .UXN__item.UXN__item--highlighted > a:after {
    right: 0px;
}

JavaScript

new UXN({
    nav: "#demo4",
    item: ".UXN__item",
    subnav: ".UXN__subnav",
    
    fading: UXN.FADING_TYPE.TRANSITION,
    
    // category is opened without having to stop the mouse even if the mouse is moving vertically
    ignoreLayoutOnSliding: true, 
    
    minZoneExt: 0,
    maxZoneExt: 15,
    mouseTolerance: 0.25
});

Demo #5: Animations with jQuery

HTML

<nav id="demo5">
    <ul class="UXN-horizontal"> 
    <!-- UXN-horizontal: not necessary if "allowSlidingOnFirstLevel" is set to false or "ignoreLayoutOnSliding" to true -->
        
        <!-- first level items --> 
        <li><a href="#">Item</a> 
           
            <ul>
                <!-- second level items -->
                <li><a href="#">Item</a> 
                   
                    <ul>
                        <!-- third level items -->
                        <li><a href="#">Item</a> 
                            ... 
                        </li>
                        ... 
                        <!-- third level items -->
                    </ul>
                </li>
                ... 
                <!-- second level items -->
            </ul>
        </li>
        ... 
        <!-- first level items -->
    </ul>
</nav>

CSS

Show full CSS

#demo5 {
    font-size: 18px;
    font-family: open-sans;

    margin: 50px 35px;
}

#demo5 ul {
    list-style: none;

    background-color: #f4f4f4;
    box-shadow: 0 0 10px 0 rgba(10, 51, 68, 0.35);
}

#demo5 .UXN-horizontal {
    height: 40px;

    border: 1px solid #6b9bae;
}

#demo5 ul ul {
    position: absolute;
    top: 100%;

    width: 100%;

    display: none; /* hide submenus */
}

/* Notice that although a submenu will be displayed with jQuery, 
 * the submenu must be openable with a .UXN__item--opened class,
 * so that the position adjustment process works properly. */
#demo5 .UXN__item--opened > ul {
    display: block; /* show opened submenu */
}

#demo5 .UXN-horizontal > li > ul {
    left: -1px;

    width: calc(100% + 1px);
}

#demo5 .UXN-horizontal > li ~ li > ul {
    left: 1px;

    width: calc(100% - 1px);
}

#demo5 .UXN-horizontal > li + li + li + li + li > ul {
    width: 100%;
}

/* third level + */
#demo5 ul ul ul {
    left: 95%; 
    top: 25%; /* default direction: down-right */
    
min-width: 175px;
}

/* opposite of the default direction */
#demo5 .UXN__subnav--left {
    left: auto;
    right: 95%;
}

/* opposite of the default direction */
#demo5 .UXN__subnav--top {
    top: auto;
    bottom: 25%;
}

#demo5 li,
#demo5 li:after,
#demo5 a {
    transition: 
        color      0.15s ease-in,
        background 0.15s ease-in;
}

#demo5 li:hover,
#demo5 li:hover:after,
#demo5 li:hover > a,
#demo5 .UXN__item--highlighted,
#demo5 .UXN__item--highlighted:after,
#demo5 .UXN__item--highlighted > a {
    transition: 
        color      0.15s ease-out,
        background 0.15s ease-out;
}

#demo5 li {
    text-align: left;


    position: relative;
    float: left;

color: #23556a;

width: 20%;
}

#demo5 li li {
    float: none;

    width: 100%;
}

#demo5 li:hover {
    background-color: #0b6185;
    color: #fff;
}

/* Visual styles of an opened item are set by .UXN__item--highlighted not .UXN__item--opened,
 * otherwise the styles would be visible during the position adjustment process. */
#demo5 li.UXN__item--highlighted {
    z-index: 2;
    
    background-color: #1b4253;
    color: #fff;
}

#demo5 ul ul .UXN__item--has-left {
    text-align: right;
}

#demo5 a {
    text-decoration: none;
    line-height: 40px;

    padding: 0 40px 0 20px;

    color: #1b4253;

    display: block;
}

#demo5 .UXN__item--highlighted > a,
#demo5 a:hover {
    color: #fff;
}

#demo5 .UXN-horizontal > li ~ li > a {
    border-left: 1px solid #abc2ce;
}

#demo5 ul ul .UXN__item--has-left > a {
    padding: 0 20px 0 40px;
}

#demo5 .UXN__item--has-subnav:after {
    line-height: 40px;


    position: absolute;
    right: 20px;
    top: 0;
    
color: #20546a;
}

#demo5 .UXN-horizontal > .UXN__item--has-subnav:after {
    content: "\2193";
}

#demo5 .UXN__item--has-subnav:after {
    content: "\2192";
}

#demo5 ul ul .UXN__item--has-left:after {
    content: "\2190";

    left: 20px;
    right: auto;
}

#demo5 .UXN__item--has-subnav:hover:after,
#demo5 .UXN__item--opened:after {
    color: #fff;
}

JavaScript

new UXN({
    nav: "#demo5",
    
    setPositions: true,
    firstLevelPositionBase: $("#demo5").closest(".examples__tab"),

    fading: UXN.FADING_TYPE.JS,
    onOpen: function ($subnav, $opener, $item) {

        $subnav.stop().slideDown(150);
    },
    onClose: function ($subnav, $opener, $item, done) {

        $subnav.stop().slideUp(150, function () {

            /* At the end of the animation the "done" function must be called 
             * and the "display" property must be removed from the style
             * attribute to be able to open this submenu with a class 
             * during the position adjustment process. */
             
            $subnav.css("display", "");

            done();
        });
    }
});

Demo #6: Another type of navigation

HTML

<nav id="demo6">
    <!-- first level - list of categories -->
    <ul class="UXN__subnav UXN__subnav--categories UXN-sliding--horizontal">
    <!-- UXN-sliding--horizontal - if the mouse is moving horizontally, the items will be opened without having to stop the mouse -->

        <!-- categories -->
        <li class="UXN__item UXN__item--category">
            <a href="#">Category</a>

            <!-- second level - list of subcategories -->
            <ul class="UXN__subnav UXN__subnav--subcategories UXN-sliding--vertical UXN-sliding--horizontal UXN-exclude--inside">
            <!-- UXN-sliding--horizontal + UXN-sliding--vertical - the items will be opened without having to stop the mouse regardless of the direction of the mouse movement -->

                <!-- subcategories -->
                <li class="UXN__item UXN__item--subcategory">
                    <a href="#">Subcategory</a>

                    <!-- third level - articles -->
                    <div class="UXN__subnav UXN__subnav--subcategory UXN-no-fading UXN-exclude--inside">
                    <!-- UXN-exclude--inside - exclude this submenu from mouse tracking (slight optimization; not necessary) -->
                    <!-- UXN-no-fading - the submenu doesn't use transitions (required) -->

                        <article>
    <a href="#">
        <img src="http://lorempixel.com/400/250/city/5/" alt="">
        <h2>Title of the Article</h2>
    </a>
</article>
...
                        <!-- articles -->
                    </div>
                    <!-- third level -->
                </li>
                ...
                <!-- subcategories -->
            </ul>
            <!-- second level -->
        </li>
        ...
        <!-- categories -->
    </ul>
    <!-- first level -->
</nav>

CSS

Show full CSS

#demo6 {
    fot-size: 18px;
font-family: open-sans, sans-serif;

margin: 50px 35px;
    position: relative;
    
height: 45px;
}

#demo6 .UXN__subnav {
    list-style: none;
    background-color: #f4f4f4;
}

#demo6 .UXN__subnav--categories {
    position:absolute;
    top: 0px;
    left: 0px;
    
    height: 45px;
    width: 100%;

border: 1px solid #6b9bae;
box-shadow: 0 0 10px 0 rgba(10, 51, 68, 0.35);


    overflow: hidden;

    transition: height 0.25s ease-in;
}

#demo6 .UXN__subnav--categories.UXN__subnav--has-opened {
    height: 295px;

    transition: height 0.25s ease-out;
}

@media screen and (max-width: 1180px) {

    #demo6 .UXN__subnav--categories.UXN__subnav--has-opened {
        height: 255px;
    }
}

#demo6 .UXN__subnav--subcategories {
    position: absolute;
    top: 45px;
    left: 0;
    
    width: 20%;
    height: 229px;
padding: 10px 0;

border-top: 1px solid #abc2ce;
background-color: #fff;


    transition: visibility 0s 0.25s; 
    /* Set "visibility: hidden" after the .UXN__subnav--categories is closed. 
     * Using "visibility" in transitions is strongly recommended. */
}

@media screen and (max-width: 1180px) {

    #demo6 .UXN__subnav--subcategory {
        height: 209px;
    }
}

#demo6 .UXN__subnav--subcategory {
    position: absolute;
    top: -1px;
    left: 100%;
    
padding: 15px 0px;
    width: 400%;
    height: 249px;

border-top: 1px solid #abc2ce;
border-left: 1px solid #abc2ce;

box-sizing: border-box;
}

#demo6 .UXN__subnav--subcategory article {
    width: 33.33333%;
    width: calc(99.999% / 3);
    height: 219px;
    padding: 0 15px;

    border-left: 1px solid transparent;

    box-sizing: border-box;
    display: table-cell;
}

@media screen and (max-width: 1180px) {

    #demo6 .UXN__subnav--subcategory article {
        height: 179px;
    }
}

#demo6 .UXN__subnav--subcategory article + article {
    border-color: #dbe4e9;
}

#demo6 .UXN__subnav--subcategory img {
    width: 100%;

    border: none;
}

#demo6 .UXN__subnav--subcategory a:hover img {
    opacity: 0.8;
}

#demo6 .UXN__subnav--subcategory h2 {
    font-size: 20px;
    text-align: left;
    line-height: 1;
}

#demo6 .UXN__subnav--subcategory a:hover h2 {
    color: #0b6185;
}

/* hide submenus */
#demo6 .UXN__subnav .UXN__subnav {
    visibility: hidden;
}

/* show opened submenu */
#demo6 .UXN__item--opened > .UXN__subnav {
    visibility: visible;
}

#demo6 .UXN__item--opened > .UXN__subnav--subcategories {
    z-index: 3;

    transition: none; /* visibility is removed from the transition; strongly recommended pattern */
}

#demo6 .UXN__item--has-fading-out > .UXN__subnav--subcategories {
    z-index: 2;
}

#demo6 a {
    text-decoration: none;

    display: block;
}

#demo6 a,
#demo6 a:after {
    color: #1b4253;
}

#demo6 a img,
#demo6 .UXN__item,
#demo6 .UXN__item > a,
#demo6 .UXN__item > a:after {
    transition: 
        transform  0.15s ease-in,
        color      0.15s ease-in,
        opacity    0.15s ease-in,
        background 0.15s ease-in;
}

#demo6 a:hover img,
#demo6 .UXN__item:hover,
#demo6 .UXN__item:hover > a,
#demo6 .UXN__item:hover > a:after,
#demo6 .UXN__item.UXN__item--highlighted,
#demo6 .UXN__item.UXN__item--highlighted > a,
#demo6 .UXN__item.UXN__item--highlighted > a:after {
    transition-timing-function: ease-out;
}

#demo6 .UXN__item--category {
    text-align: center;

    float: left;

    height: 45px;
    width: 14.285%;
    width: calc(99.999% / 7);
}

#demo6 .UXN__item:hover {
    background-color: #0b6185;
}

/* Visual styles of an opened item are set by .UXN__item--highlighted not .UXN__item--opened,
 * but because the position adjustment is not enabled, it actually does not matter. */
#demo6 .UXN__item.UXN__item--highlighted {
    background-color: #1b4253;
}

#demo6 .UXN__item--category > a {
    line-height: 44px;

    height: 45px;
}

#demo6 .UXN__item:hover > a,
#demo6 .UXN__item.UXN__item--highlighted > a,
#demo6 .UXN__item:hover > a:after,
#demo6 .UXN__item.UXN__item--highlighted > a:after {
    color: #fff;
}

#demo6 .UXN__item--category + .UXN__item--category > a {
    border-left: 1px solid #abc2ce;
}

#demo6 .UXN__item--category > a:after {
    content: "\2193";

    margin-left: 12px;
    position: relative;
    top: -2px;

    color: #b8c9d2;
}

#demo6 .UXN__item--subcategory {
    font-size: 16px;
    line-height: 2;
}

#demo6 .UXN__item--subcategory > a:after {
    content: "\25B6";

    margin-left: 10px;
}

JavaScript

 new UXN({
    nav: "#demo6",
    item: ".UXN__item",
    subnav: ".UXN__subnav",

    delayHide: true, // hide submenu just before the other is opened
    closeOnlyInLevel: true, // "save" last opened subcategory

    allowSlidingOnFirstLevel: true,
    fading: UXN.FADING_TYPE.TRANSITION,
    
       
    // On touch devices we need to block the possibility of closing all subcategories.
    onClose: function ($subnav, $opener, $item) {

        if ($item.hasClass("UXN__item--subcategory") && this.$currentItem[0] === $item[0]) {

            return false;
        }
    },

    // If there is no opened subcategory, the first is opened.
    onOpen: function ($subnav, $opener, $item) {

        if ($item.hasClass("UXN__item--category") && !this.hasSubnavOpenedSubnav($subnav)) {

            this.open(this.getSubnav($subnav), true /* we don't need to open parent submenus */);
        }
    },

    onSubnavChange: function ($current) {

        if ($current[0] === this.$firstLevel[0]) {

            this.opt.mouseTolerance = 0;

        } else {

            this.opt.mouseTolerance = 0.25;
        }
    },

    minZoneExt: 0,
    maxZoneExt: 15,
    mouseTolerance: 0.25
});

Demo #7: Something Completely Different

1
Sunny. Full forecast →
5
Cloudy. Full forecast →
#
Snow. Full forecast →
8
Rainy. Full forecast →
3
Partly cloudy. Full forecast →
6
Storm. Full forecast →

HTML

<div id="demo7">

    <ul class="UXN__subnav">

        <!-- "circles" -->
        <li class="UXN__item">&1
        
            <!-- "speech bubble" -->
            <div class="UXN__subnav">
                <span>Sunny. <a href="#">Full forecast &rarr;</a></span>
            </div>
        </li>
        ...
        <!-- "circles" -->
    </ul>
</div>

CSS

Show full CSS

#demo7 {
    font-size: 18px;
    font-family: open-sans, sans-serif;

    margin: 100px 25px;
}

#demo7 ul {    
    text-align: center;

    list-style: none;
}

#demo7 ul .UXN__subnav {
    z-index: 2;
    position:absolute; /* default direction: top */
    top: -90px;
    left: -94px;

    transform: scale(0);
    transform-origin: 50% 118px;
    
background-color: #1b4253;
border-radius: 6px;
box-shadow: 0 0 10px 0 rgba(10, 51, 68, 0.35);


    /* hide bubbles */
    visibility: hidden;
    opacity: 0;

    transition: 
        opacity    0.25s ease-in 0s,
        transform  0.25s ease-in 0s,
        visibility 0s            0.25s;
        /* Visibility is delayed to the end of the transition.
         * Using "visibility" in transitions is strongly recommended. */
}

/* triangle */
#demo7 ul .UXN__subnav:after {
    content: "";

    position: absolute;
    bottom: -38px;
    left: 99px;

    width: 0;
    height: 0;

    border: 19px solid;
    border-color: #1b4253 transparent transparent transparent;
}

#demo7 ul .UXN__subnav--left {
    left: -179px;
    transform-origin: 203px 118px;
}

#demo7 ul .UXN__subnav--left.UXN__subnav--bottom {
    left: -179px;
    transform-origin: 203px -44px;
}

/* triangle */
#demo7 ul .UXN__subnav--left:after {
    left: 184px;
}

#demo7 ul .UXN__subnav--right {
    left: auto;
    right: -179px;   

    transform-origin: 37px 118px;
}

#demo7 ul .UXN__subnav--right.UXN__subnav--bottom {
    left: auto;
    right: -179px;  

    transform-origin: 37px -44px;
}

/* triangle */
#demo7 ul .UXN__subnav--right:after {
    left: auto;
    right: 184px;
}

#demo7 ul .UXN__subnav--bottom {
    top: 75px;

    transform-origin: 50% -44px;
}

/* triangle */
#demo7 ul .UXN__subnav--bottom:after {
    top: -38px;

    border-color: transparent transparent #1b4253 transparent;
}

#demo7 ul .UXN__subnav span {
    font-size: 18px;
    line-height: 32px;
    text-align: center;

    padding: 15px 10px;
    width: 220px;
    height: 32px;

    display: block;
}

#demo7 ul .UXN__subnav a {
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;

    color: #fff;

    transition: font 0.05s ease-in;
}

#demo7 ul .UXN__subnav a:hover {
    font-weight: 700;

    transition: font 0.05s ease-out;
}

/* show opened bubble */
#demo7 .UXN__item--opened > .UXN__subnav {
    transform: scale(1);

    opacity: 1;
    visibility: visible;

    transition: 
        transform 0.25s ease-out 0s,
        opacity   0.25s ease-out 0s;
    /* visibility is removed from the transition; strongly recommended pattern */
}

#demo7 .UXN__item {
    font-family: MeteoconsRegular;
font-size: 32px;
line-height: 50px;
text-align: left;
text-indent: 8px;


    position: relative;
    float: left;

width: 48px;
height: 48px;

color: #1b4253;
background-color: #f4f4f4;
border: 2px solid #23556a;
border-radius: 50%;
box-shadow: 0 0 10px 0 rgba(10, 51, 68, 0.35);


    overflow: hidden; /* bubbles would otherwise be rendered on the page */
    cursor: default;
transition: 
    background 0.15s ease-in,
    color      0.15s ease-in,
    border     0.15s ease-in;
}

#demo7 .UXN__item * {
    font-family: open-sans, sans-serif;
}

#demo7 .UXN__item + .UXN__item {
    margin-left: 12.2%;
    margin-left: calc((100% / 5) - 62.5px);
}

#demo7 .UXN__item + .UXN__item + .UXN__item + .UXN__item + .UXN__item + .UXN__item {
    line-height: 53px;
}

#demo7 .UXN__item--opened,
#demo7 .UXN__item--has-fading-out {
    overflow: visible; /* opened and fading (!) bubble would not be visible */
}

#demo7 .UXN__item:hover,
#demo7 .UXN__item--highlighted:hover,
#demo7 .UXN__item--opened {
    color: #fff;

    transition-timing-function: ease-out;
}

#demo7 .UXN__item:hover {
    border-color: #0b6185;
    background-color: #0b6185;
}

/* Visual styles of an opened item are set by .UXN__item--highlighted not .UXN__item--opened,
 * otherwise the styles would be visible during the position adjustment process. */
#demo7 .UXN__item--highlighted:hover,
#demo7 .UXN__item--highlighted {
    border-color: #1b4253;
    background-color: #1b4253;
}

JavaScript

new UXN({
    nav: "#demo7",
    item: ".UXN__item",
    subnav: ".UXN__subnav",

    setPositions: true,
    firstLevelPositionBase: $("#window"), // simulated window
    firstLevelPositionsFromCenter: false, 
    // Position of a bubble is changed, if it exceeds the edges of the window.
    // If the "firstLevelPositionBase" is set, the default value is "true".
    
    fading: UXN.FADING_TYPE.TRANSITION
});