[英]Responsive menu fix
Please view it on full screen.请全屏观看。 Whenever I click on menu arrow to minimize it, I want the text from menu and logo text to dissapear.
每当我单击菜单箭头将其最小化时,我都希望菜单中的文本和徽标文本消失。 I just want to leave the icons and make them centered.
我只想留下图标并使它们居中。 What would be best approach to do this?
什么是最好的方法来做到这一点? I have tried using style display none for one menu and adding another one but there is no transition when adding display property.
我曾尝试对一个菜单使用 style display none 并添加另一个菜单,但在添加 display 属性时没有过渡。
function smallNav() { let menu = document.getElementById('sidebar-container'); menu.style.width = "5rem"; }
.router-link-active { background-color: #2b445f; font-weight: 700; border-left: 3px solid #1089ff; } #right, .left { cursor: pointer; } #sidebar-container { min-height: 100vh; transition: 400ms; bottom: 0; width: 18rem; background: #23374d; } #sidebar-small { min-height: 100vh; transition: 400ms; bottom: 0; width: 0px; background: #23374d; } #sidebar-container .logo { padding: 20px; } .menuicon { font-size: 24px; } .menu { transition: 200ms; } .menu a { color: white; } .btn-search { right: 5px; } .left { color: white; font-size: 24px; } .avatar { max-width: 43px; } .menu a { padding: 10px; width: 100%; } .menu a:hover { background-color: #2b445f; } ion-icon { font-size: 24px; color: #fff !important; } @media (max-width: 768px) { #sidebar-container { display: none; } #mobile { display: flex !important; flex-direction: column; text-align: left; } #mobile li { padding: 20px; } .btn-search { bottom: 0; } }
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"> <div> <div class="d-flex"> <div class="bg-primary text-left" id="sidebar-container"> <div class="logo p-3 d-flex justify-content-between align-items-center"> <h4 class="text-white">Company Name</h4> <div class="i fas fa-chevron-circle-left left" id="left" onClick="smallNav()"></div> </div> <div class="menu d-flex flex-column"> <router-link class="nav-link mt-4 d-flex py-3" :to="{name: 'Home'}" exact="true"> <div class="d-flex align-items-center"> <i class="fas fa-home mr-3 menuicon"> </i>Home</div> </router-link> <router-link class="nav-link text-white py-3" :to="{name: 'About'}"> <div class="d-flex align-items-center"> <i class="fas fa-home mr-3 menuicon"></i>Plan </div> </router-link> </div> </div> <div class="w-100"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid pl-0 pr-0"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <form class="form-inline my-2 position-relative d-inline-block"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" /> <button class="btn position-absolute btn-search" type="submit"><i class="fas fa-search"> </i></button> </form> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item dropdown"><a class="nav-link dropdown-toggle d-flex align-items-center" id="navbarDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img class="avatar mr-2 img-fluid" src="https://www.kindpng.com/picc/m/464-4644512_circle-avatar-picture-png-transparent-png.png" />Jan Kowalski</a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">Mój profil</a><a class="dropdown-item" href="#">Subskrypcja</a> <div class="dropdown-divider"></div><a class="dropdown-item" href="#">Wyloguj</a> </div> </li> <div class="d-none" id="mobile"> <li class="nav-item"></li>Home <li class="nav-item"></li>About <li class="nav-item"></li>About </div> </ul> </div> </div> </nav> </div> </div> </div>
You can change your source like below.您可以像下面一样更改您的来源。 Your CSS doesn't change, but I added some change in your HTML tags and js code.
您的 CSS 没有改变,但我在您的 HTML 标签和 js 代码中添加了一些更改。
function smallNav() { let menu = document.getElementById('sidebar-container'); menu.style.width = "4rem"; document.getElementById('logo-name').hidden = true; for(i=0; document.getElementsByClassName('menu-title').length - 1; i++) document.getElementsByClassName('menu-title').item(i).hidden = true; }
<div> <div class="d-flex"> <div class="bg-primary text-left" id="sidebar-container"> <div class="logo p-3 d-flex justify-content-between align-items-center"> <h4 class="text-white" id="logo-name">Company Name</h4> <div class="i fas fa-chevron-circle-left left" id="left" onClick="smallNav()"></div> </div> <div class="menu d-flex flex-column"> <router-link class="nav-link mt-4 d-flex py-3" :to="{name: 'Home'}" exact="true"> <div class="d-flex align-items-center"> <i class="fas fa-home mr-3 menuicon"> </i><span class="menu-title">Home</span></div> </router-link> <router-link class="nav-link text-white py-3" :to="{name: 'About'}"> <div class="d-flex align-items-center"> <i class="fas fa-home mr-3 menuicon"></i><span class="menu-title">Plan</span> </div> </router-link> </div> </div> <div class="w-100"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid pl-0 pr-0"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <form class="form-inline my-2 position-relative d-inline-block"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" /> <button class="btn position-absolute btn-search" type="submit"><i class="fas fa-search"> </i></button> </form> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item dropdown"><a class="nav-link dropdown-toggle d-flex align-items-center" id="navbarDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img class="avatar mr-2 img-fluid" src="https://www.kindpng.com/picc/m/464-4644512_circle-avatar-picture-png-transparent-png.png" />Jan Kowalski</a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="#">Mój profil</a><a class="dropdown-item" href="#">Subskrypcja</a> <div class="dropdown-divider"></div><a class="dropdown-item" href="#">Wyloguj</a> </div> </li> <div class="d-none" id="mobile"> <li class="nav-item"></li>Home <li class="nav-item"></li>About <li class="nav-item"></li>About </div> </ul> </div> </div> </nav> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.