multi level and unlimited advanced sidebar navigation
A Pen by Raul Quispe on CodePen.
Created
October 20, 2023 23:28
-
-
Save raulingg/2d4f13c28e07eae10e264c7a189170a5 to your computer and use it in GitHub Desktop.
advanced sidebar menu (multi level - unlimited navigation)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="sidebar-navigation"> | |
| <strong class="title">Pajamas</strong> | |
| <ul> | |
| <li><a href="#">Brand <em class="mdi mdi-chevron-down"></em></a> | |
| <ul> | |
| <li><a href="#">Brand personality </a></li> | |
| <li><a href="#">Tone of voice </a></li> | |
| <li><a href="#">Brand guidelines <em class="mdi mdi-chevron-down"></em></a> | |
| <ul> | |
| <li><a href="#">The GitLab logo</a></li> | |
| <li><a href="#">Colors</a></li> | |
| <li><a href="#">Typography</a></li> | |
| <li><a href="#">Buttons</a></li> | |
| <li><a href="#">Iconography</a></li> | |
| <li><a href="#">Content</a></li> | |
| </ul> | |
| </li> | |
| </li> | |
| <li><a href="#">Resources </a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Marketing <em class="mdi mdi-chevron-down"></em></a> | |
| <ul> | |
| <li><a href="#">Get started</a> | |
| <ul> | |
| <li><a href="#">Personas </a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Resources </a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Product <em class="mdi mdi-chevron-down"></em></a> | |
| <ul> | |
| <li><a href="#">Get started <em class="mdi mdi-chevron-down"></em></a> | |
| <ul> | |
| <li><a href="#">Structure </a></li> | |
| <li><a href="#">Personas </a></li> | |
| <li><a href="#">Status </a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Foundations <em class="mdi mdi-chevron-down"></em></a> | |
| <ul> | |
| <li><a href="#">Colors </a></li> | |
| <li><a href="#">Iconography </a></li> | |
| <li><a href="#">Motion </a></li> | |
| <li><a href="#">Illustration </a></li> | |
| <li><a href="#">Typography </a></li> | |
| <li><a href="#">Interactions </a></li> | |
| <li><a href="#">Savings and feedback </a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Layout <em class="mdi mdi-chevron-down"></em></a> | |
| <ul> | |
| <li><a href="#">Spacing</a></li> | |
| <li><a href="#">Grid</a></li> | |
| </ul> | |
| </li> | |
| </li> | |
| <li><a href="#">Components <em class="mdi mdi-chevron-down"></em></a> | |
| <ul> | |
| <li><a href="#">Alerts </a></li> | |
| <li><a href="#">Avatars </a></li> | |
| <li><a href="#">Badges </a></li> | |
| <li><a href="#">Banners </a></li> | |
| <li><a href="#">Navigation </a></li> | |
| <li><a href="#">Broadcast messages </a></li> | |
| <li><a href="#">Buttons </a></li> | |
| <li><a href="#">Checkboxes </a></li> | |
| <li><a href="#">Code snippets </a></li> | |
| <li><a href="#">Data tables </a></li> | |
| <li><a href="#">Data visualization </a></li> | |
| <li><a href="#">Dropdowns </a></li> | |
| <li><a href="#">File uploader </a></li> | |
| <li><a href="#">Filters </a></li> | |
| <li><a href="#">Forms </a></li> | |
| <li><a href="#">Labels </a></li> | |
| <li><a href="#">Links </a></li> | |
| <li><a href="#">Lists </a></li> | |
| <li><a href="#">Modal </a></li> | |
| <li><a href="#">Notifications </a></li> | |
| <li><a href="#">Pagination </a></li> | |
| <li><a href="#">Popovers </a></li> | |
| <li><a href="#">Progress bars </a></li> | |
| <li><a href="#">Radio buttons </a></li> | |
| <li><a href="#">Search </a></li> | |
| <li><a href="#">Segmented control </a></li> | |
| <li><a href="#">Skeleton loader </a></li> | |
| <li><a href="#">Sorting </a></li> | |
| <li><a href="#">Spinner </a></li> | |
| <li><a href="#">Tabs </a></li> | |
| <li><a href="#">Sorting </a></li> | |
| <li><a href="#">Toasts </a></li> | |
| <li><a href="#">Toggles</a></li> | |
| <li><a href="#">Tooltips </a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Regions <em class="mdi mdi-chevron-down"></em></a> | |
| <ul> | |
| <li><a href="#">Empty states</a></li> | |
| <li><a href="#">Navigation</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Content <em class="mdi mdi-chevron-down"></em></a> | |
| <ul> | |
| <li><a href="#">Voice & tone</a></li> | |
| <li><a href="#">Terminology</a></li> | |
| <li><a href="#">Punctuation</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Usability <em class="mdi mdi-chevron-down"></em></a> | |
| <ul> | |
| <li><a href="#">Internationalization</a></li> | |
| <li><a href="#">Helping users</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Resources<em class="mdi mdi-chevron-down"></em></a> | |
| <ul> | |
| <li><a href="#">Design resources</a></li> | |
| </ul> | |
| </li> | |
| </li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Research <em class="mdi mdi-chevron-down"></em></a> | |
| <ul> | |
| <li><a href="#">Get Started</a></li> | |
| <li><a href="#">Toolkit</a></li> | |
| <li><a href="#">First Look</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Accessibility <em class="mdi mdi-chevron-down"></em></a> | |
| <ul> | |
| <li><a href="#">Statement of Compliance</a></li> | |
| <li><a href="#">Best practices</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">Contribute</a></li> | |
| </ul> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(function(){ | |
| var $ul = $('.sidebar-navigation > ul'); | |
| $ul.find('li a').click(function(e){ | |
| var $li = $(this).parent(); | |
| if($li.find('ul').length > 0){ | |
| e.preventDefault(); | |
| if($li.hasClass('selected')){ | |
| $li.removeClass('selected').find('li').removeClass('selected'); | |
| $li.find('ul').slideUp(400); | |
| $li.find('a em').removeClass('mdi-flip-v'); | |
| }else{ | |
| if($li.parents('li.selected').length == 0){ | |
| $ul.find('li').removeClass('selected'); | |
| $ul.find('ul').slideUp(400); | |
| $ul.find('li a em').removeClass('mdi-flip-v'); | |
| }else{ | |
| $li.parent().find('li').removeClass('selected'); | |
| $li.parent().find('> li ul').slideUp(400); | |
| $li.parent().find('> li a em').removeClass('mdi-flip-v'); | |
| } | |
| $li.addClass('selected'); | |
| $li.find('>ul').slideDown(400); | |
| $li.find('>a>em').addClass('mdi-flip-v'); | |
| } | |
| } | |
| }); | |
| $('.sidebar-navigation > ul ul').each(function(i){ | |
| if($(this).find('>li>ul').length > 0){ | |
| var paddingLeft = $(this).parent().parent().find('>li>a').css('padding-left'); | |
| var pIntPLeft = parseInt(paddingLeft); | |
| var result = pIntPLeft + 20; | |
| $(this).find('>li>a').css('padding-left',result); | |
| }else{ | |
| var paddingLeft = $(this).parent().parent().find('>li>a').css('padding-left'); | |
| var pIntPLeft = parseInt(paddingLeft); | |
| var result = pIntPLeft + 20; | |
| $(this).find('>li>a').css('padding-left',result).parent().addClass('selected--last'); | |
| } | |
| }); | |
| var t = ' li > ul '; | |
| for(var i=1;i<=10;i++){ | |
| $('.sidebar-navigation > ul > ' + t.repeat(i)).addClass('subMenuColor' + i); | |
| } | |
| var activeLi = $('li.selected'); | |
| if(activeLi.length){ | |
| opener(activeLi); | |
| } | |
| function opener(li){ | |
| var ul = li.closest('ul'); | |
| if(ul.length){ | |
| li.addClass('selected'); | |
| ul.addClass('open'); | |
| li.find('>a>em').addClass('mdi-flip-v'); | |
| if(ul.closest('li').length){ | |
| opener(ul.closest('li')); | |
| }else{ | |
| return false; | |
| } | |
| } | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin transition($time){ | |
| -webkit-transition: all $time linear; | |
| -moz-transition: all $time linear; | |
| -o-transition: all $time linear; | |
| transition: all $time linear; | |
| } | |
| $font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";; | |
| $primary-color: #ecf0f1; //#f1c40f | |
| $text-color: #2e2e2e; | |
| body{ | |
| margin: 0; | |
| padding: 0; | |
| font-family: $font-family; | |
| font-size: 14px; | |
| line-height: 16px; | |
| color: $text-color; | |
| background-color: #eee; | |
| } | |
| .sidebar-navigation{ | |
| webkit-box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.16); | |
| -moz-box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.16); | |
| box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.16); | |
| position: fixed; | |
| z-index: 400; | |
| background-color: #fff; | |
| border-right: 1px solid #ccc; | |
| width: 256px; | |
| height: 100%; | |
| left: 0; | |
| top: 0; | |
| overflow-y: auto; | |
| .title{ | |
| display: block; | |
| font-size: 14px; | |
| line-height: 16px; | |
| background-color: #fff; | |
| align-items: center; | |
| font-weight: 600; | |
| padding: 16px; | |
| border-bottom: 1px solid #ccc; | |
| } | |
| ul{ | |
| margin: 0; | |
| padding: 0; | |
| li{ | |
| display: block; | |
| a{ | |
| position: relative; | |
| display: block; | |
| padding: 8px 16px; | |
| font-size: 14px; | |
| font-weight: 600; | |
| text-decoration: none; | |
| color: $text-color; | |
| @include transition(.3s); | |
| em{ | |
| font-size: 24px; | |
| position: absolute; | |
| right: 20px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| padding: 5px; | |
| border-radius: 50% | |
| } | |
| } | |
| &:hover, | |
| &.selected{ | |
| > a{ | |
| background-color: rgba(0,0,0,.06); | |
| } | |
| } | |
| ul{ | |
| display: none; | |
| li { | |
| font-weight: 400; | |
| } | |
| &.open{display: block} | |
| li{ | |
| a{ | |
| color: darken($primary-color, 60%); | |
| border-color: rgba(white, .1); | |
| font-weight: 400; | |
| } | |
| &:hover, | |
| &.selected{ | |
| > a{ | |
| background-color: darken($primary-color, 2%); | |
| &:before{margin-right: 10px} | |
| } | |
| } | |
| &.selected.selected--last{ | |
| > a{ | |
| background-color: darken($primary-color, 30%); | |
| color: #fff; | |
| &:before{background-color: #fff} | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| $colour1: lighten($primary-color, 5%); | |
| $colour2: lighten($primary-color, 10%); | |
| $colour3: lighten($primary-color, 15%); | |
| $colour4: lighten($primary-color, 20%); | |
| $colour5: lighten($primary-color, 25%); | |
| $colour6: lighten($primary-color, 30%); | |
| $colour7: lighten($primary-color, 35%); | |
| $colour8: lighten($primary-color, 40%); | |
| $colour9: lighten($primary-color, 45%); | |
| $colour10: lighten($primary-color, 50%); | |
| $colors: $colour1, $colour2, $colour3, $colour4, $colour5, $colour6, $colour7, $colour8, $colour9, $colour10; | |
| @each $colour in $colors { | |
| $i: index($colors, $colour); | |
| .subMenuColor#{$i} { | |
| background-color: $colour; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdn.materialdesignicons.com/2.1.99/css/materialdesignicons.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment