Skip to content

Instantly share code, notes, and snippets.

@sh-sabbir

sh-sabbir/app.css

Last active October 28, 2022 13:54
Show Gist options
  • Save sh-sabbir/328fbbba80bb64bb27389c4a7f5bf207 to your computer and use it in GitHub Desktop.
Save sh-sabbir/328fbbba80bb64bb27389c4a7f5bf207 to your computer and use it in GitHub Desktop.
Download ZIP
Multilevel menu with slide effect
Raw
app.css
.navi-mobile-menu {
display: block;
overflow-x: hidden;
overflow-y: auto;
position: relative;
height: calc(100vh - 100px);
width: 100%;
background: #FBF8EC;
font-family: 'Graphik';
font-weight: 700;
font-size: 24px;
line-height: 24px;
}
.navi-mobile-menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
background: #FBF8EC;
}
.navi-mobile-menu .top-level-nav {
position: relative;
height: auto;
border-top: 2px solid #C7EEC8;
border-bottom: 2px solid #C7EEC8;
}
.navi-mobile-menu .top-level-nav > li {
border-bottom: 1px dashed #B0C7C4;
background: #FBF8EC;
padding-top: 20px 0px;
}
.navi-mobile-menu .top-level-nav > li:last-child {
border-bottom: none
}
.navi-mobile-menu .top-level-nav li.has-subnav > a {
position: relative;
}
.navi-mobile-menu .top-level-nav li.has-subnav > a:before {
position: absolute;
display: block;
color: #15433D;
content: url("data:image/svg+xml,%3Csvg width='10' height='16' viewBox='0 0 10 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.85984 7.02773L2.67241 0.558947C2.13571 -0.00246301 1.24475 -0.021131 0.683898 0.515002C0.123051 1.05222 0.103258 1.94213 0.639953 2.50351L5.89739 8.00001L0.639953 13.4965C0.103258 14.0579 0.123051 14.9478 0.683898 15.485C0.956359 15.7454 1.30627 15.875 1.65618 15.875C2.02641 15.875 2.39611 15.73 2.67241 15.4411L8.85984 8.97229C9.38004 8.42846 9.38004 7.57153 8.85984 7.02773Z' fill='%2315433D'/%3E%3C/svg%3E%0A");
right: 15px;
font-size: 24px;
top: 13px;
}
.navi-mobile-menu .top-level-nav a {
display: block;
padding: 15px 20px;
padding-left: 0px;
text-decoration: none;
color: #15433D;
}
.navi-mobile-menu .top-level-nav a.back-track {
padding-left: 28px;
color: #F15F4F;
font-family: 'Graphik';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 24px;
}
.navi-mobile-menu .top-level-nav a.back-track:before {
position: absolute;
display: block;
color: #15433D;
content: url("data:image/svg+xml,%3Csvg width='10' height='16' viewBox='0 0 10 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.14016 7.02767L7.32759 0.558886C7.86429 -0.00252405 8.75525 -0.021192 9.3161 0.514941C9.87695 1.05216 9.89674 1.94207 9.36005 2.50345L4.10261 7.99995L9.36005 13.4964C9.89674 14.0578 9.87695 14.9477 9.3161 15.485C9.04364 15.7453 8.69373 15.875 8.34382 15.875C7.97359 15.875 7.60389 15.73 7.32759 15.441L1.14016 8.97223C0.619957 8.4284 0.619957 7.57147 1.14016 7.02767Z' fill='%2315433D'/%3E%3C/svg%3E%0A");
left: 2px;
font-size: 24px;
top: 14.5px;
}
.navi-mobile-menu .subnav {
position: absolute;
top: 0;
bottom: 0;
z-index: 40;
transform: translate3d(100%, 0, 0);
transition: transform 0.3s ease-in-out;
}
.navi-mobile-menu .subnav > li.back-wrap {
padding-bottom: 22px
}
.navi-mobile-menu .subnav > li.back-wrap a{
padding-bottom: 0px;
}
.navi-mobile-menu .subnav > li:not(.back-wrap) {
border-top: 1px dashed #B0C7C4;
background: #FBF8EC;
padding: 5px 0px;
}
.navi-mobile-menu .subnav {
font-size: 18px;
line-height: 17px;
height: fit-content;
background: #faf8ec;
}
.navi-mobile-menu .subnav.active {
transform: translate3d(0, 0, 0);
}
.navi-mobile-menu .top-level-nav_level-2 {
z-index: 80;
background: #000;
}
.navi-mobile-menu .subnav li > ul > li{
border-top: none !important;
font-weight: normal;
font-size: 16px;
line-height: 16px;
}
.navi-mobile-menu .subnav li > ul > li a:not(.back-track){
padding: 12px 0;
font-size: 16px;
line-height: 14px;
}
.navi-mobile-menu .subnav li > ul > li.grouplabel{
font-weight: bold;
padding-top: 32px;
padding-bottom: 6px;
color: #15433D;
border-top: 1px dashed #B0C7C4 !important;
}
.navi-mobile-menu .subnav li > ul > li.grouplabel.with-border {
border-top: 1px dashed #B0C7C4 !important;
margin-top: 12px;
}
/* Style for secondary-menu */
.navi-mobile-menu ul.secondary-menu{
margin-top: 70px;
}
.navi-mobile-menu ul.secondary-menu >li a{
font-family: 'Graphik';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 18px;
}
.navi-mobile-menu ul.secondary-menu >li>ul{
padding-left: 16px;
margin-top: 10px;
margin-bottom: 6px;
}
.navi-mobile-menu ul.secondary-menu >li>ul>li{
margin-bottom: 10px;
}
.navi-mobile-menu ul.secondary-menu >li>ul>li>a{
font-weight: normal;
line-height: 24px;
}
Raw
app.js
jQuery(document).ready(function ($) {
$(".top-level-nav li > .subnav").parent().addClass("has-subnav");
$(".top-level-nav li.has-subnav > a").click(function () {
var $this = $(this);
$this.next(".subnav").addClass("active");
});
$(".top-level-nav a.back-track").click(function () {
var $this = $(this);
$this.parent().parent().removeClass("active");
});
});
Raw
index.html
<nav class="navi-mobile-menu">
<ul class="top-level-nav">
<li>
<a href="javascript:void(0)">Phones</a>
<ul class="main-nav_level-1 subnav">
<li class="back-wrap"><a href="javascript:void(0)" class="back-track">Phones</a></li>
<li>
<a href="javascript:void(0)">Apple Phones</a>
<ul class="main-nav_level-2 subnav">
<li class="back-wrap"><a href="javascript:void(0)" class="back-track">Apple Phones</a></li>
<li class="grouplabel">iPhone 14 Series</li>
<li><a href="/deal-apple-iphone-14-pro-max/">iPhone 14 Pro Max</a></li>
<li><a href="/deal-apple-iphone-14-pro/">iPhone 14 Pro</a></li>
<li><a href="/deal-apple-iphone-14-plus/">iPhone 14 Plus</a></li>
<li><a href="/deal-iphone-14/">iPhone 14</a></li>
<li class="grouplabel with-border">iPhone 13 Series</li>
<li><a href="/deal-apple-iphone-13-pro-max/">iPhone 13 Pro Max</a></li>
<li><a href="/deal-apple-iphone-13-pro/">iPhone 13 Pro</a></li>
<li><a href="/deal-apple-iphone-13/">iPhone 13</a></li>
<li><a href="/deal-apple-iphone-13-mini/">iPhone 13 Mini</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0)">Samsung Phones</a>
<ul class="main-nav_level-2 subnav">
<li class="back-wrap"><a href="javascript:void(0)" class="back-track">Samsung Phones</a></li>
<li class="grouplabel">Galaxy S22 Series</li>
<li><a href="/deal-samsung-galaxy-s22-ultra/">Samsung Galaxy S22 Ultra</a></li>
<li><a href="/deal-samsung-galaxy-s22-plus/">Samsung Galaxy S22+</a></li>
<li><a href="/deal-samsung-s22/">Samsung Galaxy S22</a></li>
<li class="grouplabel with-border">Galaxy Z Series</li>
<li><a href="/deal-samsung-galaxy-z-flip3-5g/">Samsung Galaxy Z Flip3 5G</a></li>
<li><a href="/deal-samsung-galaxy-z-fold3-5g/">Samsung Galaxy Z Fold3 5G</a></li>
<li><a href="/deal-samsung-galaxy-z-flip4/">Samsung Galaxy Z Flip4</a></li>
<li><a href="/deal-samsung-galaxy-fold4/">Samsung Galaxy Z Fold4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="/plan-navigator/">Plans</a></li>
<li><a href="/coverage-navigator/">Coverage</a></li>
</ul>
<ul class="secondary-menu">
<li>
<a href="/resources/">Resources</a>
<ul>
<li><a href="/guides/">Guides</a></li>
<li><a href="/phone-and-plan-comparisons/">Phone and Plan Comparisons</a></li>
<li><a href="/wireless-industry-insights/">Wireless Industry Insights</a></li>
</ul>
</li>
<li><a href="/about/">About</a></li>
</ul>
</nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment