Обмен ярлыком фона с чистым CSS

Я хотел бы переключить фоновое изображение метки, когда я нажимаю на нее, и флажок, принадлежащий ему, отмечен или не установлен; все это с чистым CSS.Обмен ярлыком фона с чистым CSS

Пояснение: Метка, о которой мы говорим, это кнопка мобильного меню, и когда открывается меню, она должна быть заменена на X вместо трех горизонтальных баров. Когда меню закрыто, оно должно вернуться к норме.

Как я могу достичь этого в этом существующем контексте (см. Jsfiddle)?

jsfiddle with the existing functionality of the menu

Вот мой HTML:

<nav id="mobile-navigation" class="hidden-xl"> 
<label for="nav-trigger" id="label-trigger"></label> 
<input type="checkbox" id="nav-trigger" class="nav-trigger" /> 
<ul id="menu"> 
    <li><a href="">Lorem ipsum</a></li> 
    <li><a href="">Lorem ipsum</a></li> 
    <li><a href="">Lorem ipsum</a></li> 
    <li><a href="">Lorem ipsum</a></li> 
    <li><a href="">Lorem ipsum</a></li> 
</ul>

И здесь идет CSS с ним:

#mobile-navigation { 
    display: block; 
    width: 100%; 
    background-color: #000; 
} 

#menu { 
    display: none; 
} 

#menu li { 
    width: 100%; 
    text-align: center; 
} 

#menu li a { 
    display: block; 
    padding: 1em; 
    background-color: none; 
    color: #FFF; 
    font-size: 1.2em; 
    text-decoration: none; 
    font-family: "RotisRoman", Arial, Helvetica, san-serif; 
    font-size: 24px; 
    font-weight: 700; 
} 

#menu li a:hover { 
    color: #999; 
} 

label[for="nav-trigger"] { 
    position: fixed; 
    left: 30px; 
    top: 30px; 
    z-index: 2; 
    height: 50px; 
    width: 50px; 
    cursor: pointer; 
    background-image: url("http://www.circlecafebar.co.uk/photographs/nav-button.jpg"); 
} 

/*this should be the image replacing the labels image*/ 
.nav-open { 
    background-image: url("/_images/close_btn.png"); 
} 

#nav-trigger { 
    display: none; 
} 

.nav-trigger { 
    position: absolute; 
    clip: rect(0, 0, 0, 0); 
} 

.nav-trigger:checked + #menu { 
    display: block; 
    list-style: none; 
    position: fixed; 
    padding: 40px 0px; 
    width: 100%; 
    height: 100%; 
    top: 85px; 
    z-index: 2; 
    background-color: #d8d8d8; 
    margin: 0 auto;

}

источник

2015-09-03 snail

Это возможно только, если вы поместите метку ниже * * флажка в разметке. – connexo

@connexo, а затем текущая функциональность больше не будет работать, верно? : s – snail

Вам нужно немного поменять его. См. Мой ответ. –

МАГ Селектор Микросхемы ~

#mobile-navigation { 
 
\t display: block; 
 
\t width: 100%; 
 
    background-color: #000; 
 
} 
 

 
#menu { 
 
\t display: none; 
 
} 
 

 
#menu li { 
 
\t width: 100%; 
 
\t text-align: center; 
 
} 
 

 
#menu li a { 
 
\t display: block; 
 
\t padding: 1em; 
 
\t background-color: none; 
 
\t color: #FFF; 
 
\t font-size: 1.2em; 
 
\t text-decoration: none; 
 
\t font-family: "RotisRoman", Arial, Helvetica, san-serif; 
 
\t font-size: 24px; 
 
\t font-weight: 700; 
 
} 
 

 
#menu li a:hover { 
 
\t color: #999; 
 
} 
 

 
#bodarto { 
 
\t margin-top: 45px; 
 
} 
 

 
label[for="nav-trigger"] { 
 
\t position: fixed; 
 
\t left: 30px; 
 
\t top: 30px; 
 
\t z-index: 2; 
 
\t height: 50px; 
 
\t width: 50px; 
 
\t cursor: pointer; 
 
\t background-image: url("http://www.circlecafebar.co.uk/photographs/nav-button.jpg"); 
 
} 
 

 
input:checked + label { 
 
\t background-image: url("http://findicons.com/files/icons/1714/dropline_neu/48/dialog_close.png"); 
 
} 
 

 
#nav-trigger { 
 
\t display: none; 
 
} 
 

 
.nav-trigger { 
 
\t position: absolute; 
 
\t clip: rect(0, 0, 0, 0); 
 
} 
 

 
.nav-trigger:checked ~ #menu { 
 
\t display: block; 
 
\t list-style: none; 
 
\t position: fixed; 
 
\t padding: 40px 0px; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t top: 85px; 
 
\t z-index: 2; 
 
\t background-color: #d8d8d8; 
 
\t margin: 0 auto; 
 
}

<nav id="mobile-navigation" class="hidden-xl"> 
 
    <input type="checkbox" id="nav-trigger" class="nav-trigger" /> 
 
    <label for="nav-trigger" id="label-trigger"></label> 
 
    <ul id="menu"> 
 
     <li><a href="lorem.php" title="">Lorem ipsum</a></li> 
 
     <li><a href="" title="">Lorem ipsum</a></li> 
 
     <li><a href="" title="">Lorem ipsum</a></li> 
 
     <li><a href="/kontakt.php" title="">Kontakt</a></li> 
 
     <li id="bodarto"><a href="http://www.bodarto.ch/" target="_blank"><img src="_images/bodarto.png" alt="" border="0" /></a></li> 
 
    </ul> 
 
</nav>

источник

2015-09-03 10:08:13

Большое спасибо Сэр: 3 – snail

В этом случае смежный селектор '+' будет лучшим решением для общего селектора. '~'. – connexo

Обмен ярлыком фона с чистым CSS

ответ

Смежные вопросы