使用CSS更改文本名称

Question

我打算在菜单打开时将文本从"菜单"更改为"关闭菜单".我不知道该怎么做.

这是我的HTML:

<input type="checkbox" id="responsive-nav">
<label for="responsive-nav" class="responsive-nav-label">
    <span>&#9776;</span> Menu
</label>

<nav>
    <ul>
        <li><a href="download.php">Download Apps</a></li>
        <li><a href="manual.php">Download Manuals</a></li>
    </ul>
</nav>

这是我的CSS:

/* MENU */

/* hide the checkbox and the label */
input#responsive-nav,
label.responsive-nav-label {
    display: none;
    font-size: 15pt;
}

/* declarations for the not-responsove-menu */
nav {
    width: 220px;  /* Darüber laesst sich die breite des Aufklappmenue steuern */
    margin-left: -10px;  
    background: black
}

nav ul {
    padding: 0px;
    margin-left: -10px;
    margin-top: 43px;
}

nav a {
    display: block;
    background: #FFF;
    text-decoration: none;
    color: white;
    font-size: 15pt;
}

nav ul li {
    position: relative;
    float: left;
    list-style: none;
    color: #FFF;
    transition: 0.5s;
}

/* Declarations for the responsive menu 1680px */
@media screen and (max-width: 15360px) {

    * {
        font-size: 15pt;
    }

    label.responsive-nav-label {
        position: relative;
        display: block;
        padding: 0px;
        background: black;
        cursor: pointer;
        color: #fff;
    }

    nav {
        position: absolute;
        top: -9999px;
        padding: 0px;
    }

    input#responsive-nav[type=checkbox]:checked ~ nav {
        position: relative;
        top: 0;
    }

    nav a:after {
        display: none;
    }

    nav li {
        float: none !important;
        width: 100% !important;
        border-bottom: none !important;
    }

    nav li a {
        margin-bottom: 10px !important;
        padding: 10px 20px !important; 
        background: black;
    }

    nav ul li:hover {
        background: none;
    }

    nav ul li a:hover {
        background: black;
        color: #11BEE0
    }
}
/* END OF MENU */

Answer 1

最简单的方法是从实际的html中删除单词"Menu",并将两个数据属性添加到要在其间切换的菜单中

所以你的标签看起来像这样

<label for="responsive-nav" class="responsive-nav-label" data-closed=" Menu" data-open=" Close Menu"><span>&#9776;</span></label>

接下来,您必须根据是否选中复选框切换内容,如下所示

/* toggle the menu text */
input#responsive-nav[type=checkbox]:checked ~ label.responsive-nav-label:after{
  content: attr(data-open);
}
input#responsive-nav[type=checkbox] ~ label.responsive-nav-label:after{
  content: attr(data-closed);
}

这是您可以测试的完整代码

/* hide the checkbox and the label */

input#responsive-nav,
label.responsive-nav-label {
content: "Menu Hide";
display: none;
font-size: 15pt;
}

/* declarations for the not-responsove-menu */

nav {
  width: 220px;  /* Darüber laesst sich die breite des Aufklappmenue steuern */
  margin-left: -10px;  
background: black;
}

nav ul {
  padding: 0px;
  margin-left: -10px;
  margin-top: 43px;
}

nav a {
  display: block;
  background: #FFF;
  text-decoration: none;
 color: white;
 font-size: 15pt;
}

nav ul li {
  position: relative;
  float: left;
  list-style: none;
  color: #FFF;
  transition: 0.5s;
} 

/* Declarations for the responsive menu 1680px */
@media screen and (max-width: 15360px) {

* {
font-size: 15pt;
}


label.responsive-nav-label {
  position: relative;
  display: block;
  padding: 0px;
  background: black;
  cursor: pointer;
  color: #fff;
  
}

nav {
  position: absolute;
  top: -9999px;
  padding: 0px;
}

input#responsive-nav[type=checkbox]:checked ~ nav {
  position: relative;
  top: 0;
}

/* toggle the menu text */
input#responsive-nav[type=checkbox]:checked ~ label.responsive-nav-label:after{
  content: attr(data-open);
}
input#responsive-nav[type=checkbox] ~ label.responsive-nav-label:after{
  content: attr(data-closed);
}

nav a:after {
  display: none;
}

nav li {
  float: none !important;
  width: 100% !important;
  border-bottom: none !important;
}

nav li a {
  margin-bottom: 10px !important;
  padding: 10px 20px !important; 
background: black;
}

nav ul li:hover {
  background: none;
}

nav ul li a:hover {
  background: black;
  color: #11BEE0
}

}
/* END OF MENU */

<input type="checkbox" id="responsive-nav">

<label for="responsive-nav" class="responsive-nav-label" data-closed=" Menu" data-open=" Close Menu"><span>&#9776;</span></label>

<nav>
  <ul>
    <li><a href="download.php">Download Apps</a></li>
    <li><a href="manual.php">Download Manuals</a></li>
  </ul>
</nav>