mobile trigger effect



/*============= JS ==============*/

$('.custom-menu-primary .hs-menu-wrapper').before('<div class="mobile-trigger"><span></span><span></span><span></span><span></span><span></span><span></span></div>');

/*============= CSS ==============*/

.mobile-trigger {
    display: inline-block !important;
    cursor: pointer;
    position: absolute;
    left: 15px;
    top: 22px;
    z-index: 9999999;
    width: 34px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    height: 24px;
  }
  .mobile-trigger span {
    display: block;
    position: absolute;
    height: 2px;
    width: 50%;
    background: #fff;
    opacity: 1;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
  }
  .mobile-trigger span:nth-child(odd) {
    left: 0;
  }
  .mobile-trigger span:nth-child(even) {
    left: 50%;
  }
  .mobile-trigger span:nth-child(1), .mobile-trigger span:nth-child(2) {
    top: 0;
  }
  .mobile-trigger span:nth-child(3), .mobile-trigger span:nth-child(4) {
    top: 11px;
  }
  .mobile-trigger span:nth-child(5), .mobile-trigger span:nth-child(6) {
    top: 22px;
  }

  .mobile-open .mobile-trigger span:nth-child(1), .mobile-open .mobile-trigger span:nth-child(6) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .mobile-open .mobile-trigger span:nth-child(2), .mobile-open .mobile-trigger span:nth-child(5) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  .mobile-open .mobile-trigger span:nth-child(1) {
    left: 0;
    top: 6px;
  }
  .mobile-open .mobile-trigger span:nth-child(2) {
    left: calc(50% - 5px);
    top: 6px;
  }
  .mobile-open .mobile-trigger span:nth-child(3) {
    left: -50%;
    opacity: 0;
  }
  .mobile-open .mobile-trigger span:nth-child(4) {
    left: 100%;
    opacity: 0;
  }
  .mobile-open .mobile-trigger span:nth-child(5) {
    left: 0;
    top: 18px;
  }
  .mobile-open .mobile-trigger span:nth-child(6) {
    left: calc(50% - 5px);
    top: 18px;
  }

Comments

Post a Comment

Popular posts from this blog

Pagination of multiple recent post blog

<div class="blog-section">   <div class="blog-listing-wrapper cell-wrapper">     <div class="post-listing clearfix">       {% set blog_one_posts = blog_recent_posts('6126215542', 200) %} <!-- sets a variable for a the 5 most recent posts of my default COS blog -->       {% set blog_two_posts = blog_recent_posts('6126300566', 200) %}  <!-- sets a variable for a the 5 most recent posts of my blog id 47082700. You can find the blog id in the URL of the blog dashboard for a particular blog-->       {% set blog_three_posts = blog_recent_posts('6130453958', 200) %}       {% set blog_four_posts = blog_recent_posts('6131348719', 200) %}       {% set all_posts = (blog_one_posts + blog_two_posts + blog_three_posts + blog_four_posts) | sort(true, false, 'publish_date')  %} <!-- combines the two variables into a single variable and sorts them by publish date. ...
Read more

Posts by category

Image
ADD " module.blog" as a field in custom module <h2>Posts by category</h2> {% set topics_list = blog_topics(module.blog, 250) %} {% if topics_list %} <ul> {% for topic in topics_list %}   <li><strong>Category: </strong> <a href="{{ blog_tag_url(module.blog, topic.slug) }}">{{ topic.name }}</a></li> {% set topic_posts = blog_recent_topic_posts( module.blog , topic.slug , 10) %}   {% for topic_post in topic_posts %}     {% if topic_post.absolute_url != request.full_url %}       <div class="post-title"><a href="{{topic_post.absolute_url}}">{{ topic_post.name }}</a></div>     {% endif %}   {% endfor %} {% endfor %} </ul> {% endif %}
Read more

Js Code

Javascript Codes Wrap Text Node function wrapSpan(node, index) { if (node.nodeName === '#text') { var text = node.textContent; var s = document.createElement('span'); s.textContent = text; node.parentElement.insertBefore(s, node.parentElement.childNodes[index]); node.remove(); } else { var length = node.childNodes.length; // childNodes is a collection, not an array. :-/ for (var i = 0; i Use this for Add Class on menu links using Javascript (function(){ var el = document.querySelectorAll('.custom-menu-primary a') el.forEach(function(e){ e.classList = e.textContent.toLowerCase().replace(/[^a-zA-Z0-9\.-]+/g,""); }) })(); Use this for Add Class active class on categories (function(){ var value1 = window.location.href.substring(window.location.href.lastIndexOf('/') + 1); docume...
Read more