1

I use a nice CSS based sidebar menu with is toggled via a checkbox. What is the best way to make the menu also for IE8 available?

.sidebar-checkbox {
    display: none;
}
.sidebar {
    background-color: red;
    left: -30rem;
    top: 100px;
    position: fixed;
    width: 15rem;
}
.sidebar-toggle {
    position: fixed;
    display: block;
    top: 80px;
    left: 80px;
 z-index: 1;
 transition: transform 0.3s ease-in-out 0s;
    cursor: pointer;
}
#sidebar-checkbox:checked + .sidebar {
 visibility: visible;
}

#sidebar-checkbox:checked ~ .sidebar {
 -ms-transform: translateX(30rem); /* IE 9 */
 -webkit-transform: translateX(30rem); /* Chrome, Safari, Opera */
 transform: translateX(30rem);
}
<div class="site">
 
  <!-- Target for toggling the sidebar `.sidebar-checkbox` is for regular
  styles, `#sidebar-checkbox` for behavior. -->
  <input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox">
         
        <div class="sidebar">
            <ul>
                <li>Link
                <li>Link
                <li>Link
                <li>Link
            </ul>   
        </div>    
         
        <label class="sidebar-toggle" for="sidebar-checkbox">Sidebar</label>
                    
</div>

Or check it out with the jsfiddle draft mode for IE8 http://jsfiddle.net/wittich/googeaLx/

wittich
  • 2,079
  • 2
  • 27
  • 50
  • You would need to use javascript to make this ie8 compatible because ie8 doesn't understand the `:checked` sudo-selector – JRulle Jan 23 '15 at 13:17
  • To add to JRulle's comment, you can accomplish this easily in jQuery using something like this `$(this).hide("slide", { direction: "left" }, 1000); $(this).show("slide", { direction: "left" }, 1000);` http://stackoverflow.com/a/2411325/4476093 – Brock Amhurst Jan 23 '15 at 13:39

0 Answers0