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から単語「メニュー」を削除して、二つのデータを追加することですあなたが

間を切り替えたいメニューに属性をので、あなたのラベルは、この

ようになります。

<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); 
} 

などの2つのスタイルで確認されているかどうかに基づいてコンテンツを切り替える必要があります次はcompleですあなたは

/* 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>

Answer 2

あなたはすでにあなたのメニューのためcheckbox hackを使用しているので、我々は、表示するためにそれを使用することができますし、ラベル内のテキストも隠す。

ラベルの内部では、我々は応じてテキストを持つ2つの<span>年代を追加します。

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

我々が最初に隠される 『閉じるメニュー』をしたいと、私たちは私たちのCSSに

.open { 
    display: none 
} 

を追加。チェックボックスがチェックされている

は

（メニューを意味すると表示されている）、単に「メニュー」を隠して、「閉じるメニュー」を表示：

input#responsive-nav[type=checkbox]:checked ~ .responsive-nav-label > .closed { 
    display: none; 
} 

input#responsive-nav[type=checkbox]:checked ~ .responsive-nav-label > .open { 
    display: inline; 
} 

はここ jsfiddle with the working codeです。

Answer 3

をテストすることができ、TEコードあなたに似た質問があります。

テキストコンテンツをCSSに置き換えることを堅持している場合は、下のリンクをクリックしてください。

How to change content on hover

それ以外の場合は非常に置き換えるか、またはコンテンツを切り替えるには、代わりにCSSのJavaScriptを使用することをお勧めします。

$(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>&#9776;</span> <span id="menu-label">Menu</span></label> 
 

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