TransWikia.com

Create Sidebar Nav menu

Stack Overflow Asked on December 30, 2021

I want to create a menu in my Sidebar Nav application.
I try to create but then the result is never what I expected.
Perhaps the problem is in the libraries or lack of some libraries.
That being one of my doubts, I put the libraries that I am using together with the code:

enter image description here

So I have the following code and libraries:

$(document).ready(function(){
  // Expand and Collapse Nav
  $('.toggle').on('click', function(){
    $('#kd-main-navigation').toggleClass('open');
  });
  
  // Nav Items
  $('.item').each(function(){
    var me = $(this);
    me.on('click', function(){
      console.log(me);
      if(me.hasClass('has-menu')) {
        
        // Hide all open nav menus
        $('.item').not(this).each(function(){
          if($(this).hasClass('show-menu')) {
            $(this).toggleClass('show-menu');
          }
        });
        
        // Show/Hide this items menu
        // Focus/UnFocus this item
        me.toggleClass('show-menu');
        me.toggleClass('focused');
        
      } else {
        $('.item').each(function(){
          // Clear all active items
          if($(this).hasClass('active')) {
            $(this).toggleClass('active');
          }
          // Close all menus
          if($(this).hasClass('show-menu')) {
            $(this).toggleClass('show-menu');
          }
        });
        
        // Make this item active
        me.addClass('active');
      }
      
    });
  });
  
  // Menu items
  $('.menu').find('.subitem').each(function(){
    // Clickable items
    if(!$(this).hasClass('no-cursor')) {
      $(this).click(function(e){
        e.stopPropagation(); // prevents parent nav item click event
        $('.item').each(function(){
          // Clear all active menu items
          if($(this).hasClass('active')) {
            $(this).toggleClass('active');
          }
          
          // Close all open menus after clicking a menu item
          if($(this).hasClass('show-menu')) {
            $(this).toggleClass('show-menu');
          }
        });
        
        // Set this menu item's parent as active item
        $(this).parent().parent().addClass('active');
      }); 
    }
  });
});
.kd-p-l-10 {
  padding-left: 10px;
}

html,
body {
    height: 100%;
}

body {
    padding: 0;
    margin: 0;
}

.kd-main-navigation {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 60px;
    background-color: rgba(35, 71, 103, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 7px;
    box-sizing: border-box;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: width .2s, box-shadow .2s;
    .inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1 0 0;
        min-height: 490px;
    }

    .logo,
    .toggle,
    .mainnav .item {
        width: 45px;
        height: 45px;
        min-width: 45px;
        min-height: 45px;
        border-radius: 4px;
        cursor: pointer;
        margin-top: 10px;
    }

    .logo {
        transition: width .2s;
        align-self: flex-start;
        background-color: #f00;
    }

    .toggle {
        font-family: 'fontawesome';
        color: #fff;
        font-size: 22px;
        align-self: flex-start;
        transition: width .2s, height .2s, margin-bottom .2s, margin-top .2s;

        @media screen and (max-height:680px) {
            width: 30px;
            height: 30px;
            min-width: 30px;
            min-height: 30px;
            margin-left: 7px;
        }

        .bars,
        .close {
            line-height: 45px;
            width: 45px;
            height: 45px;
            min-width: 45px;
            min-height: 45px;
            text-align: center;

            @media screen and (max-height:680px) {
                width: 30px;
                height: 30px;
                min-width: 30px;
                min-height: 30px;
                line-height: 30px;
            }
        }

        .close {
            display: none;
        }
    }

    

    .item {
        color: #fff;
        cursor: pointer;
        box-shadow: 0 0 0 rgba(0,0,0,0);
        transition: width .2s, height .2s, margin-bottom .2s, margin-top .2s, background-color .2s, box-shadow .2s;
        display: flex;
        overflow: hidden;
      position: relative;
        .glyph {
            font-family: 'FontAwesome';
            font-size: 22px;
            width: 45px;
            min-width: 45px;
            height: 45px;
            min-height: 45px;
            line-height: 45px;
            text-align: center;
            -webkit-font-smoothing: antialiased;
            font-smoothing: antialiased;
            font-smooth: always;
            transition: width .2s, height .2s, line-height .2s, font-size .2s;

            @media screen and (max-height:680px) {
                width: 30px;
                height: 30px;
                min-width: 30px;
                min-height: 30px;
                line-height: 30px;
                font-size: 16px;
            }
        }

        .label {
            font-family: 'OpenSans', Helvetica, Arial, sans-serif;
            font-size: 14px;
            white-space: nowrap;
            line-height: 45px;
            margin-left: 10px;
            opacity: 0;
            transition: opacity .2s;
            padding-right: 10px;
            @media screen and (max-height:680px) {
                line-height: 30px;
                padding-right: 5px;
            }
        }
        &:hover {
          background-color: rgba(67, 168, 216, 1);
          box-shadow: 0 3px 6px rgba(0,0,0,0.37);
          z-index: 10;
        }
      
        &:not(.show-menu):hover {
            width: auto;
            min-width: auto;
          .label {
            opacity: 1;
          }
        }

        &.active {
            background-color: #fff;
            color: rgba(54, 111, 160, 1);

            &:hover {
                background-color: #fff;
            }
        }
        &.show-menu {
            background-color: rgba(67, 168, 216, 1);
            box-shadow: 0 3px 6px rgba(0,0,0,0.37);
            color: #fff;
          &:hover {
            background-color: rgba(67, 168, 216, 1);
          }
        }
      
      .menu {
        background-color: #fff;
        font-size: 12px;
        border-radius: 4px;
        box-shadow: 0 5px 10px rgba(0,0,0,0.37);
        position: absolute;
        left: 60px;
        bottom:0;
        display: flex;
        flex-direction: column;
        opacity: 0;
        transition: opacity .2s, left .2s;
        
        .pointer {
          width: 20px;
          height: 20px;
          position: absolute;
          bottom:4px;
          left:-8px;
          background-color: #fff;
          border-radius: 2px;
          transform: rotate(45deg);
          z-index: 1;
        }
        
        .subitem {
          display: flex;
          z-index: 2;
          padding-right: 5px;
          transition: background-color .2s;
          &:not(.no-cursor):hover {
            background-color: rgba(0,0,0,0.08);
          }
        }
        .glyph {
          font-family:'FontAwesome';
          font-size: 16px;
          color: rgba(0,0,0,0.54);
          width: 20px;
          min-width: 20px;
          height: 20px;
          min-height: 20px;
          text-align: center;
        }
        .label {
          color: rgba(0,0,0,0.87);
          opacity: 1;
          margin-left: 0;
        }
      }
      
      &.show-menu {
       overflow: visible;
        .menu {
          opacity: 1;
          left: 47px;
        }
      }
    }

    .mainnav {
        display: flex;
        flex-direction: column;
        width: 100%;

        .item {
            margin-bottom: 0px;
            margin-top: 10px;

            @media screen and (max-height:680px) {
                width: 30px;
                height: 30px;
                min-width: 30px;
                min-height: 30px;
                margin-top: 5px;
                margin-left: 6px;
              &:not(.show-menu):hover {
                width: auto;
                min-width: auto;
              }
            }
        }
    }

    .spacer {
        flex: 1 0 0;
        min-height: 10px;
    }

    .subnav {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 110px;
        width: 100%;

        .item {
            width: 30px;
            height: 30px;
            min-width: 30px;
            min-height: 30px;
            border-radius: 4px;
            margin-bottom: 5px;
            margin-left: 6px;
          
            &:not(.show-menu):hover {
              width: auto;
              min-width: auto;
            }

            .glyph {
                width: 30px;
                min-width: 30px;
                height: 30px;
                min-height: 30px;
                line-height: 30px;
                font-size: 16px;
            }

            .label {
                font-size: 12px;
                line-height: 30px;
                padding-right: 5px;
            }
        }
    }

    &.open {
        width: 183px;
        box-shadow: 3px 0 6px rgba(0, 0, 0, .37);
        .toggle {
            .close {
                display: block;
            }

            .bars {
                display: none;
            }

        }

        .logo {
            width: 166px;
        }

        .item {
            width: 160px;
            .menu {
              left: 185px;
            }
            &.show-menu {
              .menu {
                left: 170px;
              }
            }
        }

        .mainnav {
            .item {
                width: 166px;

                @media screen and (max-height:680px) {
                    width: 160px;
                }

                .label {
                    opacity: 1;
                }
            }
        }

        .subnav {
            .item {
                .label {
                    opacity: 1;
                }
            }
        }
    }
}

.wrapper {
    position: absolute;
    left: 60px;
    z-index: 1;
    padding: 20px;
}

.no-cursor {
  cursor: default;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/fonts/FontAwesome.otf">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/fonts/fontawesome-webfont.eot">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/fonts/fontawesome-webfont.svg">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/fonts/fontawesome-webfont.ttf">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/fonts/fontawesome-webfont.woff">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/fonts/fontawesome-webfont.woff2">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>




<div id="kd-main-navigation" class="kd-main-navigation">
  <div class="inner">
    <div class="logo"></div>
    <div class="toggle"><div class="bars"></div><div class="close"></div></div>
  <div class="mainnav">
    <div class="item active">
      <div class="glyph"></div>
      <div class="label">Find Companies</div>
    </div>
    <div class="item">
      <div class="glyph"></div>
      <div class="label">Find People</div>
    </div>
    <div class="item">
      <div class="glyph"></div>
      <div class="label">Upload & Enrich</div>
    </div>
    <div class="item">
      <div class="glyph"></div>
      <div class="label">Prospects</div>
    </div>
    <div class="item">
      <div class="glyph"></div>
      <div class="label">To-Do</div>
    </div>
    <div class="item">
      <div class="glyph"></div>
      <div class="label">Flows</div>
    </div>
    <div class="item">
      <div class="glyph"></div>
      <div class="label">Notifications</div>
    </div>
  </div>
  <div class="spacer"></div>
  <div class="subnav">
    <div class="item has-menu">
      <div class="glyph"></div>
      <div class="label">Data Usage</div>
      <div class="menu">
        <div class="subitem no-cursor">
          <div class="label kd-p-l-10">x of y Bundled Remaining</div>
        </div>
        <div class="subitem no-cursor">
          <div class="label kd-p-l-10">a of b Premium Remaining</div>
        </div>
        <div class="pointer"></div>
      </div>
    </div>
    <div class="item has-menu">
      <div class="glyph"></div>
      <div class="label">Support</div>
      <div class="menu">
        <div class="subitem">
          <div class="glyph"></div>
          <div class="label">Feedback / Messages</div>
        </div>
        <div class="subitem">
          <div class="glyph"></div>
          <div class="label">Help Center</div>
        </div>
        <div class="pointer"></div>
      </div>
    </div>
    <div class="item has-menu">
      <div class="glyph"></div>
      <div class="label">Admin Settings</div>
      <div class="menu">
        <div class="subitem">
          <div class="glyph"></div>
          <div class="label">Organization</div>
        </div>
        <div class="subitem">
          <div class="glyph"></div>
          <div class="label">Licenses</div>
        </div>
        <div class="subitem">
          <div class="glyph"></div>
          <div class="label">Users</div>
        </div>
        <div class="subitem">
          <div class="glyph"></div>
          <div class="label">Roles</div>
        </div>
        <div class="subitem">
          <div class="glyph"></div>
          <div class="label">KD Licenses</div>
        </div>
        <div class="subitem">
          <div class="glyph"></div>
          <div class="label">Reports</div>
        </div>
        <div class="pointer"></div>
      </div>
    </div>
    <div class="item has-menu">
      <div class="glyph"></div>
      <div class="label">Settings</div>
      <div class="menu">
        <div class="subitem">
          <div class="glyph"></div>
          <div class="label">Profile</div>
        </div>
        <div class="subitem">
          <div class="glyph"></div>
          <div class="label">Accounts</div>
        </div>
        <div class="subitem">
          <div class="glyph"></div>
          <div class="label">Dialer</div>
        </div>
        <div class="subitem">
          <div class="glyph"></div>
          <div class="label">Call Scripts</div>
        </div>
        <div class="subitem">
          <div class="glyph"></div>
          <div class="label">Email</div>
        </div>
        <div class="subitem">
          <div class="glyph"></div>
          <div class="label">Invite Others</div>
        </div>
        <div class="subitem">
          <div class="glyph"></div>
          <div class="label">Log Out</div>
        </div>
        <div class="pointer"></div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="wrapper">
  <p>Logo needs to be added once in app using existing logo asset</p>
  <p>All glyphs used here are placeholder and are not to be used as is. Use existing glyphs in the app.</p>
  <p>Tooltips also need to be added to each nav item.</p>
 
</div>

But when I check my page it looks like this:

enter image description here

Can you help to understand why?

csshtmljavascript

One Answer

That's SCSS. You need to put compiled CSS there. You may also see SASS which is like a cousin of the SCSS language where instead of {} you use the tab indent syntax. Nevertheless your browser cannot understand SASS/SCSS.

Secondly, you seem to have not linked your javascript/jquery and css file in the head tag or anywhere.

Link CSS Link Jquery/JS

View Compiler CSS -Codepen

Answered by Vishesh Mangla on December 30, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP