如何切换菜单的打开/关闭？

时间：2018-09-07 16:06:07

标签： javascript jquery html css

在此codepen中，我创建了一个简单的菜单，但是我不知道如何切换菜单的打开/关闭。正确地，它会在每次svg菜单蓝色区域单击时切换。

在下面的youtube vide中，完整地描述了我的问题。

  (function($) {

  $(document).ready(function(){
  $('.toggle-nav').on('click', function() {
  toggleNavigation($(this), $('.nav-pane'));
  changeLetters($(this));
  });
  function toggleNavigation(btn, nav) {
  btn.toggleClass('open');
  nav.toggleClass('open');
  }

  function changeLetters(btn) {
  var m = $('.toggle-nav span.m');
  var e = $('.toggle-nav span.e');
  var n = $('.toggle-nav span.n');
  var u = $('.toggle-nav span.u');

  e.toggleClass('btn-close');

  if(btn.hasClass('open'))
  {
  m.text("E").css("top" ,"-2px" );
  n.text("I").css("top" ,"-2px" );
  u.text("T").css("top" ,"-2px" );
  }
  else
  {
  m.text("M");
  n.text("N");
  u.text("U");
  }
  }
  });

  })(jQuery);





  (function() {
function SVGDDMenu( el, options ) {
  this.el = el;
  this.init();
}
SVGDDMenu.prototype.init = function() {
  this.shapeEl = this.el.querySelector( 'div.morph-shape' );

  var s = Snap( this.shapeEl.querySelector( 'svg' ) );
  this.pathEl = s.select( 'path' );
  this.paths = {
  reset : this.pathEl.attr( 'd' ),
  trans : this.shapeEl.getAttribute( 'data-morph-trans' ),
  open : this.shapeEl.getAttribute( 'data-morph-open' )
  };

  this.isOpen = false;

  this.initEvents();
};

SVGDDMenu.prototype.initEvents = function() {
  this.el.addEventListener( 'click', this.toggle.bind(this)
  )};

SVGDDMenu.prototype.toggle = function() {
  var self = this;

  if( this.isOpen ) {
  classie.remove( self.el, 'menu--open' );

  self.pathEl.stop().animate( { 'path' : this.paths.reset }, 3000, mina.elastic );

  }
  else {
  classie.add( self.el, 'menu--open' );

  this.pathEl.stop().animate( { 'path' : this.paths.trans }, 320, mina.easeinout, function() {
      self.pathEl.stop().animate( { 'path' : self.paths.open }, 2500, mina.elastic );
  } );
  }
  this.isOpen = !this.isOpen;
};
new SVGDDMenu( document.getElementById( 'menu' ) );
})();
body{
    margin: 0;
    padding: 0;
    background: #282828;
    font-family: sans-serif;
}
.toggle-nav {
position: absolute;
top: 25%;
right:40px;
cursor: pointer;
color: #ffffff;
}
.toggle-nav.open span.m, .toggle-nav.open span.n, .toggle-nav.open span.u {
opacity: 1;
}
.toggle-nav span.m, .toggle-nav span.n, .toggle-nav span.u {
font-family: 'ProximaNova-Light';
font-weight: 0;
font-size: 1.25rem;
opacity: 0;
transition: 250ms;
letter-spacing: 1.5px;
}
.toggle-nav span.e {
display: inline-block;
height: 12px;
width: 17px;
}
.toggle-nav span.e.btn-close span.bar:nth-child(1) {
transition:250ms;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 6px;
width:20px;
}
.toggle-nav span.e.btn-close span.bar:nth-child(2) {
opacity: 0;
transition: 250ms;
}
.toggle-nav span.e.btn-close span.bar:nth-child(3) {
transition: 250ms;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
bottom: 6px;
width:20px;
}
.toggle-nav span.e span.bar {
    transition: 500ms;
    position: relative;
    display: block;
    background: #ffffff;
    border-radius: 10px;
    width: 25px;
    height: 1.4px;
    left: -5.8px;
}
.toggle-nav span.e span.bar:nth-child(1) {
    margin-top:-3.5px;
}
.toggle-nav span.e span.bar:nth-child(2) {
    margin: 4.5px 0;
    width: 20px;
    left:-1px;
}
.toggle-nav:hover span.m, .toggle-nav:hover span.n, .toggle-nav:hover span.u {
top: -2px;
opacity: 1;
transition: 0.2s ease, opacity 0.17s 0.03s ease-in;
}

.toggle-nav span.m, .toggle-nav span.n, .toggle-nav span.u{
  position: absolute;
  transition: .8s ease, opacity 0.17s 0.03s ease-in;
  opacity: 0;
  pointer-events: none;
}
.toggle-nav span.m{
  top: -60px;
  left:-24px;
}
.toggle-nav span.n{
  top: 50px;
  left:22px;
}
.toggle-nav span.u {
  top: -90px;
  left:37px;
} 

#menu {
	max-width: 100%;
	height: 60px;
	margin: auto;
	position: relative;
	text-align: center;
	cursor: pointer;
    z-index: 100;
    font-family: 'ProximaNova-Light';
}

.menu__label {
	display: block;
    background: none;
    font-family: 'ProximaNova-Light';
    font-weight: 0;
	border: none;
	width:100%;
	height: 70px;
	padding: 0 1.25em;
	font-size: 1.3em;
	color: #fff;
	position: relative;
	outline: none;
	text-align: left;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent; /* For some Androids */
}

.menu__inner {
    display: block;
    text-align: center;
    width:100%;
	list-style: none;
	margin: 0;
	position: absolute;
	overflow: hidden;
	height: 0;
	-webkit-transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
  
}

.menu.menu--open .menu__inner {
    height: 510px;
    width:100%;
    text-align: center;
    border-top:1px solid #282828;
}

.menu__inner li a {
    display: block;
    font-family: sans-serif;
    opacity: 0;
    margin-left: -60px;
    color: #ffffff;
    font-size: 1.3em;
    font-weight: normal;
    padding:20px;
    text-decoration: none;
    pointer-events: none;
    text-align: center;
	outline: none;
	-webkit-transform: translate3d(0, -20px, 0);
	transform: translate3d(0, -20px, 0);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;

}
.menu--open .menu__inner li a {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.morph-shape,
.morph-shape svg {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}

.morph-shape {
	height: 70px;
	-webkit-transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
	transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
	overflow: visible;
}

.morph-shape svg {
	height: 100%;
	overflow: visible;
}

.menu.menu--open .morph-shape {
	height:500px;
}
.menu.menu--open .toggle-nav {
    top: 35%;
    -webkit-transition: all 0.5s ;
	transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);

}

.menu.menu--open .morph-shape svg path {
    fill: rgba(17, 0, 255,.3);
}

.morph-shape svg path {
	fill: #2624B2;
  -webkit-transition: fill 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    transition: fill 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}
    
<body style="background:#282828;">   
<nav id="menu" class="menu">
        <div class="morph-shape" data-morph-open="M158.5,0H0v53.1c0,0,19.6-4.6,66-0.2s60.5-3.8,92.5-0.1V0z" data-morph-trans="M158.5,0H0v53.1c0,0,35.4,15.4,82,13.8s76.5-14.1,76.5-14.1V0z">
            <svg width="100%" height="100%" viewBox="0 0 158.5 61.2" preserveAspectRatio="none">
            <path fill="none" d="M158.5,0H0v55.6c20.9-12.8,38.5,19.5,73.5-1.9s73.2-7.2,85,0V0z" />
            </svg>
        </div>
        <button class="menu__label">
            <div class="toggle-nav">
                <span class="m">M</span>
                <span class="e">
                    <span class="bar"></span>
                    <span class="bar bar2"></span>
                    <span class="bar"></span>
                </span>
                <span class="n">N</span>
                <span class="u">U</span>
            </div>  
        </button>
        <ul class="menu__inner">
            <li><a href="#">Home</a></li>
            <li><a href="#">My Project</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Say Hello</a></li>
        </ul>
    </nav>
  
    
  <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<script src='https://tympanus.net/Development/ElasticSVGElements/js/classie.js'></script>
<script src='https://tympanus.net/Development/ElasticSVGElements/js/snap.svg-min.js'></script>
</body>

1 个答案:

答案 0 :(得分：0)

点击 .menu__label 元素时，您需要.stopPropagation()，然后点击.trigger()单击 #menu ：

$('.menu__label').on('click', function(e) {
     e.stopPropagation();
 })
 $('.toggle-nav').on('click', function(e) {
    $(this).toggleClass('open');
    $('#menu').trigger('click');
    changeLetters($(this));
});


(function($) {

    $(document).ready(function(){
        $('.menu__label, .menu__inner').on('click', function(e) {
            e.stopPropagation();
        });
        $('.menu__inner a').on('click', function(e) {
            //console.log('do your action....');
        })
        $('.toggle-nav').on('click', function(e) {
            $(this).toggleClass('open');
            $('#menu').trigger('click');
            changeLetters($(this));
        });

        function changeLetters(btn) {
            var m = $('.toggle-nav span.m');
            var e = $('.toggle-nav span.e');
            var n = $('.toggle-nav span.n');
            var u = $('.toggle-nav span.u');

            e.toggleClass('btn-close');

            if(btn.hasClass('open'))
            {
                m.text("E").css("top" ,"-2px" );
                n.text("I").css("top" ,"-2px" );
                u.text("T").css("top" ,"-2px" );
            }
            else
            {
                m.text("M");
                n.text("N");
                u.text("U");
            }
        }
    });

})(jQuery);





(function() {
    function SVGDDMenu( el, options ) {
        this.el = el;
        this.init();
    }
    SVGDDMenu.prototype.init = function() {
        this.shapeEl = this.el.querySelector( 'div.morph-shape' );

        var s = Snap( this.shapeEl.querySelector( 'svg' ) );
        this.pathEl = s.select( 'path' );
        this.paths = {
            reset : this.pathEl.attr( 'd' ),
            trans : this.shapeEl.getAttribute( 'data-morph-trans' ),
            open : this.shapeEl.getAttribute( 'data-morph-open' )
        };

        this.isOpen = false;

        this.initEvents();
    };

    SVGDDMenu.prototype.initEvents = function() {
        this.el.addEventListener( 'click', this.toggle.bind(this)
        )};

    SVGDDMenu.prototype.toggle = function(e) {
        var self = this;

        if( this.isOpen ) {
            classie.remove( self.el, 'menu--open' );

            self.pathEl.stop().animate( { 'path' : this.paths.reset }, 3000, mina.elastic );

        }
        else {
            classie.add( self.el, 'menu--open' );

            this.pathEl.stop().animate( { 'path' : this.paths.trans }, 320, mina.easeinout, function() {
                self.pathEl.stop().animate( { 'path' : self.paths.open }, 2500, mina.elastic );
            } );
        }
        this.isOpen = !this.isOpen;
    };
    new SVGDDMenu( document.getElementById( 'menu' ) );
})();
body{
    margin: 0;
    padding: 0;
    background: #282828;
    font-family: sans-serif;
}
.toggle-nav {
    position: absolute;
    top: 25%;
    right:40px;
    cursor: pointer;
    color: #ffffff;
}
.toggle-nav.open span.m, .toggle-nav.open span.n, .toggle-nav.open span.u {
    opacity: 1;
}
.toggle-nav span.m, .toggle-nav span.n, .toggle-nav span.u {
    font-family: 'ProximaNova-Light';
    font-weight: 0;
    font-size: 1.25rem;
    opacity: 0;
    transition: 250ms;
    letter-spacing: 1.5px;
}
.toggle-nav span.e {
    display: inline-block;
    height: 12px;
    width: 17px;
}
.toggle-nav span.e.btn-close span.bar:nth-child(1) {
    transition:250ms;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 6px;
    width:20px;
}
.toggle-nav span.e.btn-close span.bar:nth-child(2) {
    opacity: 0;
    transition: 250ms;
}
.toggle-nav span.e.btn-close span.bar:nth-child(3) {
    transition: 250ms;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    bottom: 6px;
    width:20px;
}
.toggle-nav span.e span.bar {
    transition: 500ms;
    position: relative;
    display: block;
    background: #ffffff;
    border-radius: 10px;
    width: 25px;
    height: 1.4px;
    left: -5.8px;
}
.toggle-nav span.e span.bar:nth-child(1) {
    margin-top:-3.5px;
}
.toggle-nav span.e span.bar:nth-child(2) {
    margin: 4.5px 0;
    width: 20px;
    left:-1px;
}
.toggle-nav:hover span.m, .toggle-nav:hover span.n, .toggle-nav:hover span.u {
    top: -2px;
    opacity: 1;
    transition: 0.2s ease, opacity 0.17s 0.03s ease-in;
}

.toggle-nav span.m, .toggle-nav span.n, .toggle-nav span.u{
    position: absolute;
    transition: .8s ease, opacity 0.17s 0.03s ease-in;
    opacity: 0;
    pointer-events: none;
}
.toggle-nav span.m{
    top: -60px;
    left:-24px;
}
.toggle-nav span.n{
    top: 50px;
    left:22px;
}
.toggle-nav span.u {
    top: -90px;
    left:37px;
}

#menu {
    max-width: 100%;
    height: 60px;
    margin: auto;
    position: relative;
    text-align: center;
    cursor: pointer;
    z-index: 100;
    font-family: 'ProximaNova-Light';
}

.menu__label {
    display: block;
    background: none;
    font-family: 'ProximaNova-Light';
    font-weight: 0;
    border: none;
    width:100%;
    height: 70px;
    padding: 0 1.25em;
    font-size: 1.3em;
    color: #fff;
    position: relative;
    outline: none;
    text-align: left;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /* For some Androids */
}

.menu__inner {
    display: block;
    text-align: center;
    width:100%;
    list-style: none;
    margin: 0;
    position: absolute;
    overflow: hidden;
    height: 0;
    -webkit-transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);

}

.menu.menu--open .menu__inner {
    height: 510px;
    width:100%;
    text-align: center;
    border-top:1px solid #282828;
}

.menu__inner li a {
    display: block;
    font-family: sans-serif;
    opacity: 0;
    margin-left: -60px;
    color: #ffffff;
    font-size: 1.3em;
    font-weight: normal;
    padding:20px;
    text-decoration: none;
    pointer-events: none;
    text-align: center;
    outline: none;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;

}
.menu--open .menu__inner li a {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.morph-shape,
.morph-shape svg {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

.morph-shape {
    height: 70px;
    -webkit-transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    overflow: visible;
}

.morph-shape svg {
    height: 100%;
    overflow: visible;
}

.menu.menu--open .morph-shape {
    height:500px;
}
.menu.menu--open .toggle-nav {
    top: 35%;
    -webkit-transition: all 0.5s ;
    transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);

}

.menu.menu--open .morph-shape svg path {
    fill: rgba(17, 0, 255,.3);
}

.morph-shape svg path {
    fill: #2624B2;
    -webkit-transition: fill 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    transition: fill 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src='https://tympanus.net/Development/ElasticSVGElements/js/classie.js'></script>
<script src='https://tympanus.net/Development/ElasticSVGElements/js/snap.svg-min.js'></script>

<body style="background:#282828;">
<nav id="menu" class="menu">
    <div class="morph-shape" data-morph-open="M158.5,0H0v53.1c0,0,19.6-4.6,66-0.2s60.5-3.8,92.5-0.1V0z" data-morph-trans="M158.5,0H0v53.1c0,0,35.4,15.4,82,13.8s76.5-14.1,76.5-14.1V0z">
        <svg width="100%" height="100%" viewBox="0 0 158.5 61.2" preserveAspectRatio="none">
            <path fill="none" d="M158.5,0H0v55.6c20.9-12.8,38.5,19.5,73.5-1.9s73.2-7.2,85,0V0z" />
        </svg>
    </div>
    <button class="menu__label">
        <div class="toggle-nav">
            <span class="m">M</span>
                <span class="e">
                    <span class="bar"></span>
                    <span class="bar bar2"></span>
                    <span class="bar"></span>
                </span>
            <span class="n">N</span>
            <span class="u">U</span>
        </div>
    </button>
    <ul class="menu__inner">
        <li><a href="#">Home</a></li>
        <li><a href="#">My Project</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Say Hello</a></li>
    </ul>
</nav>


</body>

相关问题
最新问题