Kesan tuding item menu meliputi keseluruhan ketinggian halaman

Question

Saya sedang membangunkan navigasi kiri. Saya mahu bar merah muncul sebelum item menu pada tuding. Ia berfungsi untuk item "Rumah" dan sub-itemnya, tetapi item akar lain menyebabkan bar merah pada tuding merentangi keseluruhan lebar halaman dari atas ke bawah.

$(document).foundation();

.vertical.dropdown.menu [href] > i {
  display: block;
}

.vertical.dropdown.menu [href] {
  display: block;
  text-align: center;
}

.left-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 150px;
  height: 100%;
  color: #333;
  background: #FFFFFF;
}

.left-bar .vertical.menu.nested {
  padding: 0;
}

.left-bar [href] > i {
  display: block;
}

.left-bar [href] {
  display: block;
  text-align: left;
  padding: 0;
  color: #333;
}

.left-bar [href]:hover {
  background: #9B9B9BFF;
}

.left-bar .vertical.menu > li {
  position: relative;
  background: #FFFFFF;
  color: #333;
  border: 0;
}


.left-bar .top-level-item [href]:hover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background-color: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.1/js/foundation.min.js"></script>
<ul class="vertical dropdown menu left-bar" data-dropdown-menu>
  <li class="top-level-item">
    <a href="#">
      <i class="zmdi zmdi-home zmdi-hc-3x"></i>
      <span>Home</span>
    </a>
    <ul class="vertical menu nested">
      <li><a href="#"><i class="zmdi zmdi-list zmdi-hc-3x"></i> Sub Item 1</a></li>
      <li><a href="#"><i class="zmdi zmdi-list zmdi-hc-3x"></i> Sub Item 2</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li class="top-level-item">
    <a href="#">
      <i class="zmdi zmdi-account zmdi-hc-3x"></i>
      <span>Account</span>
    </a>
  </li>
  <li class="top-level-item">
    <a href="#">
      <i class="zmdi zmdi-settings zmdi-hc-3x"></i>
      <span>Settings</span>
    </a>
  </li>
  <li class="top-level-item">
    <a href="#">
      <i class="zmdi zmdi-help-outline zmdi-hc-3x"></i>
      <span>Help</span>
    </a>
  </li>
  <!-- ... -->
</ul>

Bagaimana untuk memperbaikinya supaya bar merah hanya merentangi ketinggian item menu?

Answer 1

Saya membuat perubahan pada CSS dan menambah ulasan di sana. Terdapat masalah dengan pemilih CSS berdasarkan struktur DOM

.left-bar.vertical.menu li 而不是 .left-bar .vertical.menu > li ，我删除了空格和 > ，以便所有 li Kini semua mempunyai kedudukan relatif

$(document).foundation();

.vertical.dropdown.menu [href] > i {
  display: block;
}

.vertical.dropdown.menu [href] {
  display: block;
  text-align: center;
}

.left-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 150px;
  height: 100%;
  color: #333;
  background: #FFFFFF;
}

.left-bar .vertical.menu.nested {
  padding: 0;
}

.left-bar [href] > i {
  display: block;
}

.left-bar [href] {
  display: block;
  text-align: left;
  padding: 0;
  color: #333;
}

.left-bar [href]:hover {
  background: #9B9B9BFF;
}

/* I made a change here */
.left-bar.vertical.menu  li {
  position: relative;
  background: #FFFFFF;
  color: #333;
  border: 0;
}


.left-bar .top-level-item [href]:hover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background-color: red;
}

sssccc
sssccc

  

    
      
      Home
    
    

      
 Sub Item 1
      
 Sub Item 2
      
    
  
  

    
      
      Account
    
  
  

    
      
      Settings
    
  
  

    
      
      Help
    
  
  

Answer 2

Saya meninggalkan sempadan untuk merah pada mulanya ditetapkan kepada putih.

Saya membuat perubahan:

• Potong semua CSS yang tidak perlu, termasuk semua CSS berkaitan kedudukan barangan
• Gunakan kelas bukannya beberapa [href] yang saya anggap "rapuh"
• Ditukar kepada khusus background-color untuk kejelasan
• Tetapkan 0 sempadan, kemudian tambah butiran sempadan kiri
• Gunakan rem 而不是 px ，因为典型的浏览器使用 16px = 1rem saiz asas; anda boleh memaksa sokongan untuk mereka yang tidak jika diperlukan.

Jika anda mahu bekas itu terus mempunyai sempadan dan melakukan sesuatu yang berkaitan dengannya menggunakan CSS, anda boleh memutuskan anak seperti ini: Bagaimana untuk menggayakan elemen induk apabila kanak-kanak itu dilegar? Atau mungkin gunakan JavaScript mudah untuk membantu.

$(document).foundation();

.nav-item {
  width: 10rem;
  background-color: #FFFFFF;
  text-align: center;
  color: #333;
  border: 0;
  border-left-width: 0.25rem;
  border-left-style: solid;
  border-left-color: #FFFFFF;
}

.nav-item:hover {
  border-left-color: #FF0000;
}

.nav-item .nav-link:hover {
  background-color: #9B9B9BFF;
}

.nav-link {
  color: #333333;
}

.nav-link * {
  display: block;
}

sssccc
sssccc

  

    
      
      Home
    
    

      
 Sub Item 1
      
 Sub Item 2
    
  
  

    
      
      Account
    
  
  

    
      
      Settings
    
  
  

    
      
      Help