[風間]

讓我們面對它：WooCommerce「我的帳户」 頁面導航看起來很蹩腳，它的默認樣式！這只是一個項目清單。在 Divi（我們最常用的主題） 列表中的所有鏈接都是相同的顏色，即使是你現在使用的那個。因此，對於用户而言，這只是不太好或者非常有用。一探究竟：

Woocommerce 醜陋帳户導航

這很簡單，沒用，對不對？所以我開始努力用 CSS 來改進它。結果如下：

下面的 CSS 是我寫的，以獲得這些結果。如果您使用全寬 （無側邊欄） 佈局，它應該與大多數主題一起工作。但是，您可能需要調整一些東西來適應您的主題需求。

/* Change WC Acct Page Column Widths */
@media only screen and (min-width: 769px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    width: 22%;
  }
  .woocommerce-account .woocommerce-MyAccount-content { 
    width: 75%;
  }
}
/* Style WC Account Endpoint Links */
nav.woocommerce-MyAccount-navigation ul {
  list-style-type: none;
  padding-left: 0;
  max-width:200px;
  font-size: 17px;
  line-height: 26px;
}
nav.woocommerce-MyAccount-navigation ul li {
  padding: 8px 20px;
  background-color: rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
nav.woocommerce-MyAccount-navigation ul li.is-active {
  background-color: rgba(0,0,0,0.1);
}
nav.woocommerce-MyAccount-navigation ul li.is-active a {
  color: rgba(0,0,0,0.8); cursor: default;
}
nav.woocommerce-MyAccount-navigation ul li.is-active:after {
  content: "";
  height: 0;
  width: 0;
  border-top: 20px solid transparent;
  border-left: 14px solid rgba(0,0,0,0.1);
  border-bottom: 20px solid transparent;
  float: right;
  margin-right: -34px;
  margin-top: -7px;
}
nav.woocommerce-MyAccount-navigation ul li:not(.is-active):hover {
  background-color: rgba(0,0,0,0.07);
}
nav.woocommerce-MyAccount-navigation ul li:not(.is-active):hover:after { 
  content: "";
  height: 0;
  width: 0;
  border-top: 20px solid transparent;
  border-left: 14px solid rgba(0,0,0,0.07);
  border-bottom: 20px solid transparent;
  float: right;
  margin-right: -34px;
  margin-top: -7px;
}

[薇曉朵]

此回覆已被標記為私有，🔒 僅樓主及管理員可見。

[風間]

讓導航菜單橫排效果：

nav.woocommerce-MyAccount-navigation {
    width: 20%;
    float: left;
    display: inline-block;
}
.woocommerce-MyAccount-navigation ul {
    margin-top: 0;
}
.woocommerce-MyAccount-navigation ul {
    margin-top: 0;
}
.woocommerce-MyAccount-navigation-link {
     display: initial;
}
.woocommerce-MyAccount-navigation-link a {
    margin: 0;
    padding: 15px 6px;
    text-align: left;
}
.woocommerce-MyAccount-navigation-link a:before {
    border-top: 1px solid #cccccc;
    border-radius: 0;
    background-color: transparent;
    opacity: .875;
    border-bottom-width: 0;
    border-left-width: 0;
    border-right-width: 0;
}
.woocommerce-MyAccount-navigation-link:last-child a:before {
    border-top: 1px solid #cccccc;
    border-radius: 0;
    background-color: transparent;
    opacity: .875;
    border-bottom-width: 0;
    border-left-width: 0;
    border-right-width: 0;
}
nav.woocommerce-MyAccount-navigation ul li:last-child a:before {
    border-bottom: 1px solid #ccc;
}

懸停效果：

.woocommerce-MyAccount-navigation-link a:hover {
  	background-color:#edf1f7;
}

更新版的：

.woocommerce-MyAccount-navigation-link.is-active a,
.woocommerce-MyAccount-navigation-link a:hover {
  	background-color:#edf1f7;
}

[風間]

此回覆已被標記為私有，🔒 僅樓主及管理員可見。

[作者]

帖子