File tree Expand file tree Collapse file tree 4 files changed +549
-0
lines changed
Navbars/Fullscreen_Overlay_Navigation Expand file tree Collapse file tree 4 files changed +549
-0
lines changed Original file line number Diff line number Diff line change
1
+ ## Fullscreen Overlay Navigation
2
+
3
+ <h3 > Tech Stack Used <img src = " https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif " width = 32px > </h3 >
4
+ <p align =" left " > <a href =" https://www.w3.org/html/ " target =" _blank " > <img src =" https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg " alt =" html5 " width =" 40 " height =" 40 " /> </a > <a href =" https://www.w3schools.com/css/ " target =" _blank " > <img src =" https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg " alt =" css3 " width =" 40 " height =" 40 " /> </a > <a href =" https://developer.mozilla.org/en-US/docs/Web/JavaScript " target =" _blank " > <img src =" https://raw.githubusercontent.com/devicons/devicon/master/icons/javascript/javascript-original.svg " alt =" javascript " width =" 40 " height =" 40 " /> </a > </p >
5
+
6
+ ### Preview
7
+
8
+ ![ fullscreen_navbar] ( https://user-images.githubusercontent.com/64985447/148121636-a23c3de2-777b-4979-85e4-dd23e7458a6e.gif )
Original file line number Diff line number Diff line change
1
+ const container = document . querySelector ( '.container' ) ;
2
+ const hamburger = document . querySelector ( '.hamburger' ) ;
3
+ hamburger . addEventListener ( 'click' , ( e ) => {
4
+ if ( container . classList . contains ( 'active' ) ) {
5
+ container . classList . remove ( 'active' ) ;
6
+ container . classList . add ( 'not-active' ) ;
7
+ } else {
8
+ container . classList . add ( 'active' ) ;
9
+ container . classList . remove ( 'not-active' ) ;
10
+ }
11
+ } ) ;
You can’t perform that action at this time.
0 commit comments