<button class="nav-toggle chapter-toggle">
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1536 1792">
<path id="svg-icon-bookmark" d="M1164 128q23 0 44 9 33 13 52.5 41t19.5 62v1289q0 34-19.5 62t-52.5 41q-19 8-44 8-48 0-83-32l-441-424-441 424q-36 33-83 33-23 0-44-9-33-13-52.5-41t-19.5-62v-1289q0-34 19.5-62t52.5-41q21-9 44-9h1048z"/>
<path id="svg-icon-bookmark-close" d="M1298 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/> </svg>
</button>
<button class="nav-toggle search-toggle">
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1536 1792">
<path id="svg-icon-search" d="M1152 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z"/>
<path id="svg-icon-search-close" d="M1298 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/> </svg>
</button>
<button class="nav-toggle menu-toggle">
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1536 1792">
<path id="svg-icon-menu" d="M1536 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"/>
<path id="svg-icon-menu-close" d="M1298 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/> </svg>
</button>
.nav-toggle {
background-color: transparent;
border: 0;
width: 30px;
height: 30px;
padding: 0;
position: relative;
.svg-icon {
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
}
}
.svg-icon path:not(:first-child) {
visibility: hidden;
}
body {
margin: 20px;
text-align: center;
}
View Compiled
$('.menu-toggle').click(function() {
$(this).toggleClass('toggle-on');
if ($(this).hasClass('toggle-on')) {
TweenLite.to("#svg-icon-menu", .25, {morphSVG:"#svg-icon-menu-close"});
} else {
TweenLite.to("#svg-icon-menu", .25, {morphSVG:"#svg-icon-menu"});
}
});
$('.search-toggle').click(function() {
$(this).toggleClass('toggle-on');
if ($(this).hasClass('toggle-on')) {
TweenLite.to("#svg-icon-search", .25, {morphSVG:"#svg-icon-search-close"});
} else {
TweenLite.to("#svg-icon-search", .25, {morphSVG:"#svg-icon-search"});
}
});
$('.chapter-toggle').click(function() {
$(this).toggleClass('toggle-on');
if ($(this).hasClass('toggle-on')) {
TweenLite.to("#svg-icon-bookmark", .25, {morphSVG:"#svg-icon-bookmark-close"});
} else {
TweenLite.to("#svg-icon-bookmark", .25, {morphSVG:"#svg-icon-bookmark"});
}
});
This Pen doesn't use any external CSS resources.