Based on the HTML5 folding card drop-down menu code,

Based on the HTML5 folding card drop-down menu code,

Based on the HTML5 folding card drop-down menu code. This is a special drop-down list box code based on jQuery + CSS3 + HTML5. As follows:

Download Online Preview source code

Implementation code.

Hmtl code:

<Div class = "container"> <div class = "card-drop"> <a class = 'toggle 'href = "#"> <I class = 'fa fa-suitcase '> </I> <span class = 'label-activity'> love programming </span> </a> <ul> <li class = 'active'> <a data -label = "Everyting" href = "#"> <I class = 'fa fa-suitcase'> </I> love programming </a> </li> <li> <a data-label = "Design" href = "#"> <I class = 'fa fa-magic '> </I> jQuery effect </a> </li> <li> <a data-label = "UI-UX" href = "#"> <I class = 'fa fa-bolt '> </I> CSS3 effects </a> </li> <a data-label = "Print" href = "#"> <I class = 'fa fa-tint'> </I> HTML5 special effects </ a> </li> <a data-label = "Photography" href = "#"> <I class = 'fa fa-camera-retro'> </I> sound download </a> </li> <a data-label = "Photography" href = "#"> <I class = 'fa fa-camera-retro '> </I> flash Animation </a> </li> </ul> </div>

Js Code:

(function ($) {           var cards = $('.card-drop'), toggler = cards.find('.toggle'), links = cards.find('ul>li>a'), li = links.parent('li'), count = links.length, width = 100;           li.each(function (i) {               $(this).css('z-index', count - i);           });           function setClosed() {               li.each(function (index) {                   $(this).css('top', index * 4).css('width', width - index * 0.5 + '%').css('margin-left', index * 0.25 + '%');               });               li.addClass('closed');               toggler.removeClass('active');           }           setClosed();           toggler.on('mousedown', function () {               var $this = $(this);               if ($this.is('.active')) {                   setClosed();               } else {                   $this.addClass('active');                   li.removeClass('closed');                   li.each(function (index) {                       $(this).css('top', 60 * (index + 1)).css('width', '100%').css('margin-left', '0px');                   });               }           });           links.on('click', function (e) {               var $this = $(this), label = $this.data('label');               icon = $this.children('i').attr('class');               li.removeClass('active');               if ($this.parent('li').is('active')) {                   $this.parent('li').removeClass('active');               } else {                   $this.parent('li').addClass('active');               }               toggler.children('span').text(label);               toggler.children('i').removeClass().addClass(icon);               setClosed();               e.preventDefault;           });       }(jQuery));

Via: http://www.w2bc.com/article/html5-fade-out-in-nav