純CSS側邊欄下拉選單（無引導程式）-有解無憂

我正在嘗試使用純 css/js/html/jquery（無引導程式）撰寫一個帶有可擴展下拉選項和一些平滑影片的側邊欄。在使用引導程式之前，我已經寫了一個這樣的側邊欄，請參見這個示例： https ://bootstrap-menu.com/demos/sidebar-nav-accordion.html

但現在我正試圖僅使用純 css 作為挑戰來實作相同的最終結果，并消除我對引導程式的依賴。

到目前為止，我一直在使用這個示例，但還沒有展開/折疊手風琴作業：

var isSidebarOpen = false;

function sideNavClicked(){
    console.log('sideNavClicked()')
    isSidebarOpen ? closeNav() : openNav();
}

function openNav() {
console.log('openNav')
    isSidebarOpen=true;
  document.getElementById("mySidebar").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
console.log('closeNav')
    isSidebarOpen=false;
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}

body {
  font-family: "Lato", sans-serif;
}

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

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

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@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">

</head>
<body>

<div id="mySidebar" class="sidebar">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">About</a>
  <a href="#">Expand This ▼</a>
    <ul>
      <li><a href="#">Coffee</a></li>
      <li><a href="#">Coverage</a></li>
    </ul>
  
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div id="main">
  <button class="openbtn" onclick="sideNavClicked()">?</button>  
  <h2>Collapsed Sidebar</h2>
  <p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
</div>


</body>
</html>

想知道我可以將哪些小規模示例合并到此代碼中？也托管在 jsfiddle 上： https ://jsfiddle.net/martinradio/7wey2ujt/7/

uj5u.com熱心網友回復：

使用您的影片，嘗試：

#animatedObj{
    filter: opacity: 0; /* or something else because there will be a gap */
    -webkit-transition: filter 200ms linear;
}
.show{
    filter: opacity: 1;
    -webkit-transition: filter 200ms linear;

然后在你的 JS/Jquery

$('#animatedObj').click(function(){
    $('#animatedObj').toggleClass('show')
    if($('#animatedObj').hasClass('show')){
        $('#animatedObj').append("<list thing>")
    }else{
        $('#animatedObj').remove("<list thing>")
    }
})

請記住，您可能希望有不同的 CSS 效果。

uj5u.com熱心網友回復：

對于你的挑戰，試試這個只有 css 沒有 javascript：

        body {
            font-family: "Lato", sans-serif;
        }

        .MenuSide {
            width: 250px;
            height: 100%;
            top: 0;
            left: 0;
        }

        .MenuSide:focus-within #mySidebar {
            width: 250px;
        }
        .MenuSide:focus-within .openbtn{
            margin-left: 250px;
            pointer-events: none;
        }

        #mySidebar {
            float: left;
        }

        .sidebar {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: #111;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
        }

        .sidebar a {
            padding: 8px 8px 8px 32px;
            text-decoration: none;
            font-size: 25px;
            color: #818181;
            display: block;
            transition: 0.3s;
        }

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

        .sidebar .closebtn {
            position: absolute;
            top: 0;
            right: 25px;
            font-size: 36px;
            margin-left: 50px;
            transition: 0.5s;
        }

        .openbtn {
            font-size: 20px;
            cursor: pointer;
            background-color: #111;
            color: white;
            padding: 10px 15px;
            border: none;
            transition: 0.5s;
        }

        .openbtn:hover {
            background-color: #444;
        }

        #main {
            transition: margin-left .5s;
            padding: 16px;
        }


        /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
        @media screen and (max-height: 450px) {
            .sidebar {
                padding-top: 15px;
            }

            .sidebar a {
                font-size: 18px;
            }
        }

    <div class="MenuSide">
        <div id="mySidebar" class="sidebar">
            <!-- <a href="javascript:void(0)"  onclick="closeNav()">×</a> -->
            <a href="#">About</a>
            <a href="#">Expand This ▼</a>
            <ul>
                <li><a href="#">Coffee</a></li>
                <li><a href="#">Coverage</a></li>
            </ul>

            <a href="#">Clients</a>
            <a href="#">Contact</a>
        </div>
        <button class="openbtn">?</button>
    </div>

uj5u.com熱心網友回復：

也許這就是你要找的我在你的 javascript 代碼中添加了幾行，還在 html 中添加了一些類，包括用于折疊子選單的ul標簽和標簽。a我在添加的代碼中添加了注釋，讓您知道修改了什么...

看一下片段

如果對你有幫助請采納答案

var isSidebarOpen = false;

function sideNavClicked() {
  console.log("sideNavClicked()");
  isSidebarOpen ? closeNav() : openNav();
}

function openNav() {
  console.log("openNav");
  isSidebarOpen = true;
  document.getElementById("mySidebar").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  console.log("closeNav");
  isSidebarOpen = false;
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

////------------Added Line of Code----------------
const list = document.querySelector(".toggle--list");
// const submenu
document.querySelector(".submenu").classList.add("hidden");
list.addEventListener("click", e => {
  document.querySelector(".submenu").classList.toggle("hidden");
});
///////////////////

body {
    font-family: "Lato", sans-serif;
  }
  
  .sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }
  
  .sidebar a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  
  .sidebar a:hover {
    color: #f1f1f1;
  }
  
  .sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  
  .openbtn:hover {
    background-color: #444;
  }
  
  #main {
    transition: margin-left .5s;
    padding: 16px;
  }
  
  /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
  @media screen and (max-height: 450px) {
    .sidebar {padding-top: 15px;}
    .sidebar a {font-size: 18px;}
  }

/*-----------added line of code----------------*/
.hidden{
    display:none;
    visibility: hidden;
}
/*---------------------------------------------*/

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="mySidebar" class="sidebar">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
      <a href="#">About</a>
      <a href="#" class="toggle--list">Expand This ▼</a>
      <!--Added classname here-->
      <ul class="submenu">
        <!--Added classname here-->
        <li><a href="#">Coffee</a></li>
        <li><a href="#">Coverage</a></li>
      </ul>

      <a href="#">Clients</a>
      <a href="#">Contact</a>
    </div>

    <div id="main">
      <button class="openbtn" onclick="sideNavClicked()">?</button>
      <h2>Collapsed Sidebar</h2>
      <p>
        Click on the hamburger menu/bar icon to open the sidebar, and push this
        content to the right.
      </p>
    </div>
    <script src="script.js"></script>
  </body>
</html>

uj5u.com熱心網友回復：

您可以在這里嘗試我的解決方案，希望它能解決您的問題。我添加了一些影片。

var isSidebarOpen = false;

function sideNavClicked() {
  isSidebarOpen ? closeNav() : openNav();
}

function openNav() {
  isSidebarOpen = true;
  document.getElementById('mySidebar').classList.add('sidebar-show');
  document.getElementById('main').classList.add('main-show');
}

function closeNav() {
  isSidebarOpen = false;
  document.getElementById('mySidebar').classList.remove('sidebar-show');
  document.getElementById('main').classList.remove('main-show');
}

function toggleMenuItem(element){
    document.getElementById(element.dataset.ulid).classList.toggle("ul-show");
}

html,
body {
  font-family: "Lato", sans-serif;
  height: 100%;
  margin: 0;
}

.super-animation{
  -webkit-transition: -webkit-transform 300ms ease;
  -webkit-transition-duration: 300ms;
  -moz-transition: -moz-transform 300ms ease;
  transition: transform 300ms ease;
}

.main-content{
  margin: 0;
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
}

.sidebar {
  height: 100%;
  max-height: calc(100% - 15px);
  width: 250px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 60px;
  
  right: 0;
  -webkit-transform: translate3d(calc(-100%), 0, 0);
  -moz-transform: translate3d(calc(-100%), 0, 0);
  transform: translate3d(calc(-100%), 0, 0);
}

.sidebar.sidebar-show{
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

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

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

#main {
  padding: 16px;
}

#main.main-show{
  -webkit-transform: translate3d(250px, 0, 0);
  -moz-transform: translate3d(250px, 0, 0);
  transform: translate3d(250px, 0, 0);
}

.main-content .sidebar ul{
  margin: 0;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 200ms ease-out;
}

.main-content .sidebar ul.ul-show{
  transition: max-height 200ms ease-in;
  max-height: 400px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@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">

</head>
<body>

<div class="main-content">
  <div id="mySidebar" class="sidebar super-animation">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
    <a href="#">About</a>
    <a data-ulid="expand_this" onclick="toggleMenuItem(this);" href="#">Expand This ▼</a>
      <ul id="expand_this">
        <li><a href="#">Coffee</a></li>
        <li><a href="#">Coverage</a></li>
      </ul>

    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>

  <div id="main" class="super-animation">
    <button class="openbtn" onclick="sideNavClicked()">?</button>  
    <h2>Collapsed Sidebar</h2>
    <p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
  </div>
</div>

</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/453205.html

標籤：javascript html jQuery css

上一篇：選擇被欄位集包圍

下一篇：為什么我的網址中的圖片沒有顯示？