Change Name of Text with CSS - php

Question

I am trying to change the text from "Menu" to "Close Menu" when Menu is open. I have no idea how to do it.
This is my HTML:
<input type="checkbox" id="responsive-nav">
<label for="responsive-nav" class="responsive-nav-label">
<span>☰</span> Menu
</label>
<nav>
<ul>
<li>Download Apps</li>
<li>Download Manuals</li>
</ul>
</nav>
This is my 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

the easiest way to do this is to actually remove the word "Menu" from the actually html and add two data attributes to the menu that you want to toggle between
so your label would look like this
<label for="responsive-nav" class="responsive-nav-label" data-closed=" Menu" data-open=" Close Menu"><span>☰</span></label>
next you will have to toggle the content based on whether your checkbox is checked or not with 2 styles like this
/* 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);
}
here is the complete code that you can test
/* 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>☰</span></label>
<nav>
<ul>
<li>Download Apps</li>
<li>Download Manuals</li>
</ul>
</nav>

Answer 2

There is a similar question to yours.
if you are insistent to replace text content with css, you can visit the link below.
How to change content on hover
otherwise it's highly recommended to use javascript instead of css to replace or toggle content.
$(document).on("click","#menu-label",function(){
var $this = $(this);
if ($this.text() === "Menu"){
$this.text("Close")
}else {
$this.text("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 */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="responsive-nav">
<label for="responsive-nav" class="responsive-nav-label" ><span>☰</span> <span id="menu-label">Menu</span></label>
<nav>
<ul>
<li>Download Apps</li>
<li>Download Manuals</li>
</ul>
</nav>

Answer 3

Since you are already using the checkbox hack for your menu, we can use that to show and hide text inside the label, too.
Inside the label, we add two <span>'s with the according text:
<label for="responsive-nav" class="responsive-nav-label">
<span>☰</span>
<span class="open">Close Menu</span>
<span class="closed">Menu</span>
</label>
As we want "Close Menu" to initially be hidden, we add
.open {
display: none
}
to our CSS.
When the checkbox is checked (meaning the menu is visible), just hide "menu" and display "Close Menu":
input#responsive-nav[type=checkbox]:checked ~ .responsive-nav-label > .closed {
display: none;
}
input#responsive-nav[type=checkbox]:checked ~ .responsive-nav-label > .open {
display: inline;
}
Here's a jsfiddle with the working code.