[风间]

让我们面对它：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;
}

[风间]

此回复已被标记为私有，🔒 仅楼主及管理员可见。

[作者]

帖子