Custom dropdown menu for hover and touch
Include modernizr.js check for touch events.
Instantly share code, notes, and snippets.
Last active
October 7, 2016 15:36
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save koentjuh1/6292d4ae434009222efa to your computer and use it in GitHub Desktop.
Custom menu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <header class="header"> | |
| <div class="container"> | |
| <a href="javascript:void(0)" class="menu-toggle"> | |
| <span class="icon-bar top-icon-bar"></span> | |
| <span class="icon-bar mid-icon-bar"></span> | |
| <span class="icon-bar bot-icon-bar"></span> | |
| </a> | |
| <nav class="menu-block"> | |
| <ul> | |
| <li class="active"><a href="/">Menu item</a></li> | |
| <li class="d-item1"> | |
| <a href="/">Dropdown menu</a> | |
| <ul class="d-menu1"> | |
| <li class="d-item2"> | |
| <a href="/">Menu item 1</a> | |
| <ul class="d-menu2"> | |
| <li><a href="/">Menu item 21</a></li> | |
| <li><a href="/">Menu item 2</a></li> | |
| <li><a href="/">Menu item 2</a></li> | |
| <li><a href="/">Menu item 2</a></li> | |
| <li><a href="/">Menu item 2</a></li> | |
| </ul> | |
| </li> | |
| <li class="d-item2"> | |
| <a href="/">Menu item 1</a> | |
| <ul class="d-menu2"> | |
| <li><a href="/">Menu item 22</a></li> | |
| <li><a href="/">Menu item 2</a></li> | |
| <li><a href="/">Menu item 2</a></li> | |
| <li><a href="/">Menu item 2</a></li> | |
| <li><a href="/">Menu item 2</a></li> | |
| </ul> | |
| </li> | |
| <li class="d-item2"> | |
| <a href="/">Menu item 1</a> | |
| <ul class="d-menu2"> | |
| <li><a href="/">Menu item 23</a></li> | |
| <li><a href="/">Menu item 2</a></li> | |
| <li><a href="/">Menu item 2</a></li> | |
| <li><a href="/">Menu item 2</a></li> | |
| <li><a href="/">Menu item 2</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="/">Menu item 1</a></li> | |
| <li><a href="/">Menu item 1</a></li> | |
| <li><a href="/">Menu item 1</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="/">Menu item</a></li> | |
| <li class="d-item1"> | |
| <a href="/">Dropdown menu</a> | |
| <ul class="d-menu1"> | |
| <li><a href="/">Menu item 1</a></li> | |
| <li><a href="/">Menu item 1</a></li> | |
| <li class="d-item2"> | |
| <a href="/">Menu item 1</a> | |
| <ul class="d-menu2"> | |
| <li><a href="/">Menu item 2</a></li> | |
| <li><a href="/">Menu item 2</a></li> | |
| <li><a href="/">Menu item 2</a></li> | |
| <li><a href="/">Menu item 2</a></li> | |
| <li><a href="/">Menu item 2</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="/">Menu item 1</a></li> | |
| <li><a href="/">Menu item 1</a></li> | |
| <li class="d-item2"> | |
| <a href="/">Menu item 1</a> | |
| <ul class="d-menu2"> | |
| <li><a href="/">Menu item 2</a></li> | |
| <li><a href="/">Menu item 2</a></li> | |
| <li><a href="/">Menu item 2</a></li> | |
| <li><a href="/">Menu item 2</a></li> | |
| <li><a href="/">Menu item 2</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="/">Menu item 1</a></li> | |
| <li><a href="/">Menu item 1</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="/">Menu item</a></li> | |
| </ul> | |
| </nav> | |
| <div class="menu-box-bg"></div> | |
| </div> | |
| </header> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| if (Modernizr.touchevents) { | |
| $(".menu-block .d-item1").append( "<i class='fa fa-caret-down fa-two'></i>" ); | |
| $(".menu-block .d-item2").append( "<i class='fa fa-caret-down fa-three'></i>" ); | |
| $('.menu-block').addClass('touche-menu-yes'); | |
| $(".menu-block .d-item1 .fa-two").click(function () { | |
| $(this.parentNode).toggleClass('d-open1'); | |
| }); | |
| $(".menu-block .d-item2 .fa-three").click(function () { | |
| $(this.parentNode).toggleClass('d-open2'); | |
| }); | |
| } else { | |
| $(".menu-block .d-item1 > a").append( "<i class='fa fa-caret-down fa-one'></i>" ); | |
| $(".menu-block .d-item2 > a").append( "<i class='fa fa-caret-right fa-four'></i>" ); | |
| $('.menu-block .menu-box').addClass('touche-menu-no'); | |
| } | |
| $('.menu-toggle').on({ | |
| click:function(){ | |
| $('html').toggleClass('open-menu'); | |
| } | |
| }); | |
| $(".menu-toggle").click(function () { | |
| $(this).toggleClass("menu-toggle-animate"); | |
| }); | |
| $(".menu-box-bg").click(function () { | |
| $(".menu-toggle").removeClass("menu-toggle-animate"); | |
| }); | |
| $('.menu-box-bg').on({ | |
| click:function(){ | |
| $('html').removeClass('open-menu'); | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .menu-toggle | |
| display: none | |
| .menu-block.touche-menu-yes > ul > li.d-item1 .d-menu1 > li:hover a | |
| background-color: transparent | |
| .menu-block.touche-menu-yes li.d-item2:focus a | |
| background-color: transparent | |
| .menu-block.touche-menu-yes li.d-item2 a:focus | |
| background-color: transparent | |
| .menu-block.touche-menu-yes li.d-item2:hover ul.d-menu2 | |
| display: none | |
| .menu-block.touche-menu-yes li.d-item2 ul.d-menu2 | |
| display: none | |
| .menu-block.touche-menu-yes li.d-item2.d-open2 ul.d-menu2 | |
| display: block | |
| background-color: darken($color1, 10) | |
| .menu-block.touche-menu-yes li.d-item2.d-open2 .fa-three | |
| border-color: darken($color1, 15) | |
| .menu-block.touche-menu-yes li.d-item2 | |
| border-top: 1px solid transparent | |
| .menu-block.touche-menu-yes li.d-item2.d-open2 | |
| background-color: darken($color1, 10) | |
| border-top: 1px solid darken($color1, 15) | |
| .menu-block.touche-menu-yes li.d-item2.d-open2 .fa-caret-down.fa-three:before | |
| transform: rotate(180deg) | |
| transition: all 300ms ease-in-out | |
| .menu-block.touche-menu-yes .fa-caret-down.fa-three:before | |
| position: absolute | |
| left: 50% | |
| margin-left: -4px | |
| transform: rotate(0deg) | |
| transition: all 300ms ease-in-out | |
| .menu-block.touche-menu-yes > ul > li:hover a, .menu-block.touche-menu-yes > ul > li.d-item1:focus a | |
| background-color: transparent | |
| .menu-block.touche-menu-yes > ul > li.d-item1:hover ul.d-menu1 | |
| display: none | |
| .menu-block.touche-menu-yes > ul > li.d-item1 ul.d-menu1 | |
| display: none | |
| .menu-block.touche-menu-yes > ul > li.d-item1.d-open1 ul.d-menu1 | |
| display: block | |
| background-color: darken($color1, 5) | |
| .menu-block.touche-menu-yes > ul > li.d-item1.d-open1 .fa-two | |
| border-color: darken($color1, 10) | |
| .menu-block.touche-menu-yes > ul > li.d-item1.d-open1 | |
| background-color: darken($color1, 5) | |
| .menu-block.touche-menu-yes > ul > li.d-item1.d-open1 .fa-caret-down.fa-two:before | |
| transform: rotate(180deg) | |
| transition: all 300ms ease-in-out | |
| .menu-block.touche-menu-yes .fa-caret-down.fa-two:before | |
| transform: rotate(0deg) | |
| transition: all 300ms ease-in-out | |
| position: absolute | |
| left: 50% | |
| margin-left: -4px | |
| .menu-block | |
| ul | |
| padding: 0px | |
| margin: 0px | |
| list-style: none | |
| > ul | |
| display: flex | |
| > li | |
| flex-grow: 1 | |
| text-align: center | |
| &:hover, &:focus | |
| a | |
| background-color: darken($color1, 5) | |
| > a | |
| padding: 12px 0px | |
| display: block | |
| &.d-item1 | |
| position: relative | |
| &:hover | |
| .d-menu1 | |
| display: block | |
| .fa-two | |
| position: absolute | |
| right: 0px | |
| top: 0px | |
| width: 45px | |
| height: 43px | |
| text-align: center | |
| line-height: 45px | |
| color: #fff | |
| border-left: 1px solid darken($color1, 5) | |
| .fa-one | |
| margin-left: 10px | |
| font-size: 14px | |
| .d-menu1 | |
| position: absolute | |
| display: none | |
| top: 100% | |
| left: 0px | |
| min-width: 170px | |
| background-color: $color1 | |
| > li | |
| text-align: left | |
| &:hover | |
| a | |
| background-color: darken($color1, 10) | |
| > a | |
| display: block | |
| padding: 7px 15px | |
| .d-item2 | |
| position: relative | |
| &:hover | |
| .d-menu2 | |
| display: block | |
| .fa-three | |
| position: absolute | |
| right: 0px | |
| top: 0px | |
| width: 45px | |
| height: 35px | |
| text-align: center | |
| color: #fff | |
| font-size: 12px | |
| line-height: 35px | |
| border-left: 1px solid darken($color1, 10) | |
| .fa-four | |
| float: right | |
| font-size: 12px | |
| position: relative | |
| top: 5px | |
| .d-menu2 | |
| display: none | |
| position: absolute | |
| left: 100% | |
| top: 0px | |
| min-width: 170px | |
| > li | |
| > a | |
| display: block | |
| padding: 7px 15px | |
| .menu-block > ul > li.d-item1 .d-menu2 > li:hover a | |
| background-color: darken($color1, 15) | |
| @media only screen and (max-width: 1199px) | |
| .menu-block > ul > li.d-item1 .fa-two | |
| width: 26px | |
| height: 43px | |
| font-size: 12px | |
| @media only screen and (max-width: 991px) | |
| .menu-block > ul > li.d-item1 .fa-two | |
| width: 26px | |
| height: 43px | |
| font-size: 12px | |
| @media only screen and (max-width: 768px) | |
| .menu-box-bg | |
| background-color: rgba(0,0,0,.3) | |
| width: 0 | |
| height: 0 | |
| position: fixed | |
| top: 0 | |
| left: 0 | |
| transition: opacity 300ms ease-in-out | |
| z-index: -1 | |
| opacity: 0 | |
| .open-menu | |
| .menu-box-bg | |
| z-index: 10 | |
| opacity: 1 | |
| transition: opacity 300ms ease-in-out | |
| width: 100% | |
| height: 100% | |
| .menu-block | |
| left: 0px | |
| transition: left 300ms ease-in-out | |
| .menu-toggle | |
| position: absolute | |
| display: block | |
| right: 15px | |
| top: 15px | |
| z-index: 500 | |
| .icon-bar | |
| width: 40px | |
| height: 4px | |
| display: block | |
| margin-bottom: 6px | |
| background-color: $color1 | |
| position: relative | |
| transition: all 200ms ease-in-out | |
| top: 0px | |
| opacity: 1 | |
| &.menu-toggle-animate | |
| .icon-bar | |
| transition: all 200ms ease-in-out | |
| &.top-icon-bar | |
| transform: rotate(45deg) | |
| top: 13px | |
| &.mid-icon-bar | |
| opacity: 0 | |
| &.bot-icon-bar | |
| transform: rotate(-45deg) | |
| top: -7px | |
| .menu-block .d-item2 .d-menu2 | |
| position: relative | |
| left: 0px | |
| top: 0px | |
| .menu-block .d-item2 .d-menu2 > li | |
| border-top: 1px solid darken($color1, 15) | |
| .menu-block .d-item2 .d-menu2 > li > a | |
| padding: 7px 35px | |
| .menu-block .d-item2 .fa-four | |
| transform: rotate(90deg) | |
| .menu-block > ul > li.d-item1 .fa-two | |
| width: 45px | |
| height: 45px | |
| .menu-block | |
| transition: left 300ms ease-in-out | |
| width: 70% | |
| height: 100% | |
| overflow: auto | |
| left: -70% | |
| top: 0px | |
| background-color: $color1 | |
| position: fixed | |
| z-index: 5000 | |
| > ul | |
| display: block | |
| > li | |
| text-align: left | |
| > a | |
| padding: 12px 15px | |
| border-bottom: 1px solid darken($color1, 5) | |
| &.d-item1 | |
| .fa-one | |
| float: right | |
| margin: 0px | |
| position: relative | |
| top: 2px | |
| .d-menu1 | |
| position: relative | |
| > li | |
| > a | |
| padding: 7px 18px 7px 25px | |
| border-top: 1px solid darken($color1, 10) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment