个人中心
gpt4 book ai didi

javascript - 使用切换模式显示导航图标 "slide over content"

转载 作者：太空宇宙 更新时间：2023-11-04 05:57:39 25 4
gpt4 key购买 nike

我想要实现的是一个图标总是可见的导航菜单，点击侧边栏切换后，菜单应该滑过内容并显示导航图标。

我想要实现的是一个图标总是可见的导航菜单，点击侧边栏切换后，菜单应该滑过内容并显示导航图标。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: "Lato", sans-serif;}

#toggle_icon {
  width: 35px;
  height: 5px;
  background-color: white;
  margin:6px;
}
.sidebar {
  height: 100%;
  width: 160px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 16px;
}

.sidebar a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.main {
  margin-left: 160px; /* Same as the width of the sidenav */
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}
</style>
</head>
<body>

<div class="sidebar">
  <a href="#" style="display:flex;justify-content:space-between; margin:0px 5px;"><i class="fa fa-stethoscope"></i><i class="fa fa-bars"></i></a>
  <a href="#home"><i class="fa fa-fw fa-home"></i> Home</a>
  <a href="#services"><i class="fa fa-fw fa-wrench"></i> Services</a>
  <a href="#clients"><i class="fa fa-fw fa-user"></i> Clients</a>
  <a href="#contact"><i class="fa fa-fw fa-envelope"></i> Contact</a>
</div>

<div class="main">
  <h2>Sidebar with Icons</h2>
  <p>ntur his ad. Eum no moles.</p>
  <p>Lorem ipsum .</p>
  <p>efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

</body>
</html>

最佳答案

在这里，我已经为您完成了。看看它是否能帮助您解决问题。我使用了最新版本的 jquery

function ToggleSidebar(e) {
    var sidebar_width = parseInt($('.sidebar').css('width').trim().split('px')[0]);
    if(sidebar_width > 60){
        $(".sidebar").css('width', '60px');
        $(".sidebar-control").fadeOut();
        $(".nav-left-icon").fadeOut();
    }
    else {
        $(".sidebar").css('width', '160px');                
        $(".sidebar-control").fadeIn();
        $(".nav-left-icon").fadeIn();
    }
};
body {font-family: "Lato", sans-serif;}

#toggle_icon {
  width: 35px;
  height: 5px;
  background-color: white;
  margin:6px;
}
.sidebar {
  height: 100%;
  width: 160px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 16px;
  transition: 0.3s linear;
}

.sidebar a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar-control{
    position: absolute;
}

.main {
  margin-left: 160px; /* Same as the width of the sidenav */
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
</head>
<body>
<div class="sidebar">
  <div class="nav-switcher">
        <a href="javascript:void(0)" onclick="ToggleSidebar(event)" style="display:flex;justify-content:space-between; margin:0px 5px;">
            <i class="fa fa-stethoscope nav-left-icon"></i>
            <i class="fa fa-bars"></i>
        </a>
  </div>
  <a href="#home"><i class="fa fa-fw fa-home"></i><span class="sidebar-control">&nbsp;Home</span></a>
  <a href="#services"><i class="fa fa-fw fa-wrench"></i><span class="sidebar-control">&nbsp;Services</span></a>
  <a href="#clients"><i class="fa fa-fw fa-user"></i><span class="sidebar-control">&nbsp;Clients</span></a>
  <a href="#contact"><i class="fa fa-fw fa-envelope"></i><span class="sidebar-control">&nbsp;Contacts</span></a>
</div>

  <div class="main">
    <h2>Sidebar with Icons</h2>
    <p>ntur his ad. Eum no moles.</p>
    <p>Lorem ipsum .</p>
    <p>efficiantur his ad. Eum no molestiae voluptatibus.</p>
  </div>

</body>
</html>

关于javascript - 使用切换模式显示导航图标 "slide over content"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57633804/

25 4 0
文章推荐： css - chrome 对表行 div 的粘性支持
文章推荐： c - 按 '/' 拆分字符串失败，C
文章推荐： c - 为什么我的初始化函数返回 null？
文章推荐： javascript - 功能组件的 redux hooks
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com