Ris Ris - 5 months ago 12
jQuery Question

checkbox not displaying as an image

I am trying to have an icon as a checkbox that is going to show up in my mobile view where you can click show and hide the menu, right everything works with clicking and hiding the menu

my problem is trying to figure out how to display the current checkbox as an image

not sure what I am doing wrong, could someone point me to the right direction please ? Thanks in advance

id like to display something like this for my checkbox

#menu-icon {

display:inline-block;
width: 40px;
height: 40px;
background: url(menu-icon.png) center;

}


jsfiddle
http://jsfiddle.net/g825b/

my code

<input id="menu-icon" type="checkbox">
<nav class="navMenu">
<label class="iconMenuLbl" for="menu-icon"></label>
<ul>

<li>
<a href=""><img class="navImg" src="media/Home-tall.png" alt=""></a>
</li>
<li>
<a href="summary"><img class="navImg" src="media/My-Details-tall.png" alt=""></a>
</li>
<li>
<a href="loans"><img class="navImg" src="media/My-Loans-tall.png" alt=""></a>
</li>
<li id="loggedin-box" class="">
<form method="POST" action="login">
<div>
<strong>some name</strong>
</div>
<button style="padding:0px;" name="logout" type="submit">
<img class="navImg" src="media/Sign-Out.png">
</button>
</form>
</li>
</ul>
</nav>


js

$(function() {
var menuVisible = false;
$('#menu-icon').click(function() {
if (menuVisible) {
$('.navMenu').css({'display':'none'});
menuVisible = false;
return;
}
$('.navMenu').css({'display':'block'});
menuVisible = true;
});
$('.navMenu').click(function() {
$(this).css({'display':'none'});
menuVisible = false;
});
});

Answer

Make the input's label display as an image instead of the input itself.

This solution also doesn't need any script, CSS only.

#wrapper { height: 60px; background: #222; position: relative; }
#myMenu { display: none; }
#myMenu ul { width: 100%; padding: 0; margin: 0; position: absolute; top: 60px; left: 0; }
#myMenu li { text-align: center; height: 40px; line-height: 40px; background: #ddd; width: 100%; margin: 0; padding: 0; list-style: none; }
#menu-icon {
  display:none;
}
#menu-icon:checked ~ label[for="menu-icon"] {
  border: 5px solid red;
}
#menu-icon:checked ~ #myMenu {
  display: block;
}
.iconMenuLbl {
  position: absolute; right: 5px; height: 50px; width: 50px;
  border: 5px solid black;
  display:inline-block;
  background: url(http://lorempixel.com/60/60/animals) center;
}
<div id="wrapper">
  <input id="menu-icon" type="checkbox">
  <label class="iconMenuLbl" for="menu-icon"></label>
  <nav id="myMenu">
    <ul>
      <li>entry 1</li>
      <li>entry 2</li>
      <li>entry 3</li>
      <li>entry 4</li>
    </ul>
  </nav>
</div>