创建侧边栏导航菜单

Question

我想在我的侧边栏导航应用程序中创建一个菜单。 我尝试创造，但结果从来不是我所期望的。 也许问题出在图书馆或缺少某些图书馆。 这是我的疑问之一，我将正在使用的库与代码放在一起：

所以我有以下代码和库：

 $(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-pl-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-pl-10">x of y Bundled Remaining</div> </div> <div class="subitem no-cursor"> <div class="label kd-pl-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>

但是当我检查我的页面时，它看起来像这样：

你能帮助理解为什么吗？

Answer 1

那是SCSS 。 你需要把编译好的CSS那里。 您可能还会看到SASS ，它类似于SCSS语言的表亲，其中使用制表符缩进语法代替{} 。 然而，您的浏览器无法理解SASS/SCSS 。

其次，您似乎没有在 head 标签或任何地方链接您的 javascript/jquery 和 css 文件。

链接 CSS 链接 Jquery/JS