html - CSS checkbox event not working -



html - CSS checkbox event not working -

i'm trying overlay page div (which used menu), when checkbox button checked, doesn't seem work. event not firing?

jsfiddle here.

html

<nav> <div id="topbar"></div> <div id="menutab"><input type="checkbox" id="menutoggle">&equiv;</div> </nav> <section> <div id="slide1" class="slide"> </div> </section>

css

#menutoggle { height: 24px; width: 24px; position: absolute; top: 0; left: 0; margin: 0; padding: 0; cursor: pointer; opacity: 0; } input#menutoggle:checked + #menuoverlay { position:fixed; top:0; left:0; width:100%; opacity:0.95; z-index: 3; } @media screen , (min-width: 0px) , (max-width: 768px) { input#menutoggle:checked + #menuoverlay { background:#000; height:100%; } } @media screen , (min-width: 769px) { input#menutoggle:checked + #menuoverlay { background:#1f1f1f; height:2.4em; } }

you not using right + selector.

b + e: e element next sibling of b element (that is: next kid of same parent)

you don't have element id #menuoverlay @ in dom.

the way work current css following:

class="snippet-code-css lang-css prettyprint-override">#menutoggle { height: 24px; width: 24px; position: absolute; top: 0; left: 0; margin: 0; padding: 0; cursor: pointer; opacity: 0; } #menutoggle:checked + #menuoverlay { position:fixed; top:0; left:0; width:100%; opacity:0.95; z-index: 3; } @media screen , (min-width: 0px) , (max-width: 768px) { input#menutoggle:checked + #menuoverlay { background:#000; height:100%; } } @media screen , (min-width: 769px) { input#menutoggle:checked + #menuoverlay { background:#1f1f1f; width:100%; height:100%; } } class="snippet-code-html lang-html prettyprint-override"><nav> <div id="topbar"></div> <div id="menutab"> <input type="checkbox" id="menutoggle" />&equiv; <div id="menuoverlay"></div> <!-- add together div element here id menuoverlay --> </div> </nav> <section> <div id="slide1" class="slide"></div> </section>

html css checkbox

Comments

Post a Comment

Popular posts from this blog

Delphi change the assembly code of a running process -

Delphi change the assembly code of a running process - i'm trying alter address 00741fa5 has push test.009e721c . alter push test.009e71c8 . procedure callback; asm force $9e71c8 end; procedure tform2.btn1click(sender: tobject); var ppid :dword; pprocess : cardinal; begin getwindowthreadprocessid(findwindow(nil,pchar('test')), @ppid); pprocess := openprocess(process_all_access, false, ppid); injectasm(pprocess, $741fa5, 10, integer(@callback), 0); end; here injectasm function (with error checking) function injectasm(process: longword; injectaddress, injectsize, codeaddress, codesize : integer): pointer; var csize, rsize : integer; replaced : array of byte; jmp : array [0..4] of byte; jmpaddress : integer; nopv : byte; : integer; nbr: ulong_ptr; begin //injectsize must equal or greater 5, because need space our //(far) jmp wwxxyyzz instruction //if there's no space, inject in place of few instructions if injectsize &
Read more

java - Parsing XML, skip certain tags -

java - Parsing XML, skip certain tags - i next mkyong's great tutorial on how parse xml in java, have situation need read tags within area. e.g. <?xml version="1.0"?> <company> <staff id="1001"> <firstname>yong</firstname> <lastname>mook kim</lastname> <nickname>mkyong</nickname> <salary>100000</salary> </staff> <staff id="2001"> <firstname>low</firstname> <lastname>yin fong</lastname> <nickname>fong fong</nickname> <salary>200000</salary> </staff> <changes> <staff id="2001"> <firstname>low</firstname> <lastname>yin fong</lastname> <nickname>fong fong</nickname> <old_salary>175000</salary> <ne
Read more

c# - ASP.NET MVC Sequence contains no matching element -

c# - ASP.NET MVC Sequence contains no matching element - i new asp.net mvc. have finished project unusual issue appeared in project. as seek run project error message. an exception of type 'system.invalidoperationexception' occurred in entityframework.dll not handled in user code additional information: sequence contains no matching element in 1 of controller using statement below groups display in dropdownlist. http://localhost....../clients (trying run page) , getting error on line containing code below. viewbag.groupdropdownvalues = new selectlist(db.groups.orderby(m => m.groupid), "groupid", "groupname"); or other controller: viewbag.categorydropdownvalues = new selectlist(db.category.orderby(m => m.categoryid), "categoryid", "categoryname"); this happening in controllers using syntax. i need display dropdownlists values database. working correctly till morning. don't have thought changed ,
Read more