API tools faq
paste
Guest User

Untitled

a guest
Mar 29th, 2023
60
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.86 KB | None | 0 0
raw download clone embed print report
  1. HTML
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en-US">
  5. <head>
  6. <meta charset="utf-8" />
  7. <meta name="viewport" content="width=device-width" />
  8. <link rel="stylesheet" href="./glnavigation-styles.css">
  9. <link rel="stylesheet" href="https://use.typekit.net/fmn5vrf.css">
  10. <title>Garden Living Navigation</title>
  11. </head>
  12. <body>
  13.  
  14. <nav>
  15. <div class="logo">
  16. <a href="#"><img src="./images/Gardenliving-full-logo.png" alt="Logo"></a>
  17. </div>
  18. <ul id="navMenu">
  19. <!-- OUTDOOR KITCHENS MENU -->
  20. <li class="nav-item">
  21. <a href="#" class="nav-link">Outdoor Kitchens</a>
  22. <ul class="kitchen-sub-items second-layer">
  23. <li>
  24. <a href="#">Appliances</a>
  25. <ul class="third-layer">
  26. <li><a href="#" class="nav-link">LYNX</a></li>
  27. <li><a href="#" class="nav-link">COYOTE</a></li>
  28. <li><a href="#" class="nav-link">CROWN VERITY</a></li>
  29. <li><a href="#" class="nav-link">HESTAN</a></li>
  30. <li><a href="#" class="nav-link">BIG GREEN EGG</a></li>
  31. <li><a href="#" class="nav-link">ALFRESCO</a></li>
  32. <li><a href="#" class="nav-link">FIRE MAGIC</a></li>
  33. <li><a href="#" class="nav-link">PERLICK</a></li>
  34. <li><a href="#" class="nav-link">EVO</a></li>
  35. <li><a href="#" class="nav-link">FONTANA</a></li>
  36. <li><a href="#" class="nav-link">WOLF</a></li>
  37. <li><a href="#" class="nav-link">BLAZE</a></li>
  38. </ul>
  39. </li>
  40. <li><a href="#">CABINETRY</a></li>
  41. <li><a href="#">COUNTERTOPS</a></li>
  42. </ul>
  43. </li>
  44. <!-- CABANA X MENU ITEM -->
  45. <li><a href="#" class="nav-item">CabanaX</a></li>
  46. <!-- PERGOLA X MENU -->
  47. <li>
  48. <a href="#" class="nav-item">PergolaX</a>
  49. <ul class="second-layer">
  50. <li><a href="#">SMART PERGOLA ACCESSORIES</a></li>
  51. <li><a href="#">SMART PERGOLAS</a></li>
  52. <li><a href="#">WHY STRUXURE PERGOLAS</a></li>
  53. </ul>
  54. </li>
  55. <!-- FIRE FEATURES MENU ITEM -->
  56. <li><a href="#" class="nav-item">Fire Features</a></li>
  57. <!-- GALLERY MENU ITEMS -->
  58. <li><a href="#" class="nav-item">Gallery</a>
  59. <ul class="second-layer">
  60. <li><a href="#">OUTDOOR KITCHENS GALLERY</a></li>
  61. <li><a href="#">CABANA X GALLERY</a></li>
  62. <li><a href="#">PERGOLA X GALLERY</a></li>
  63. <li><a href="#">OUTDOOR LIVING GALLERY</a></li>
  64. </ul>
  65. </li>
  66. <!-- CONTACT MENU ITEM -->
  67. <li><a href="#" class="nav-item">Contact</a></li>
  68. </ul>
  69. <div class="hamburger">
  70. <span class="bar"></span>
  71. <span class="bar"></span>
  72. <span class="bar"></span>
  73. </div>
  74. </nav>
  75.  
  76. </body>
  77.  
  78. <script src="glnavigation.js"></script>
  79.  
  80. </html>
  81.  
  82.  
  83. CSS
  84.  
  85. /* Desktop View */
  86.  
  87. body{
  88. margin:0px
  89. }
  90.  
  91. #header {
  92. display: none;
  93. }
  94.  
  95. img {
  96. height: auto;
  97. width: auto;
  98. max-height: 5vh;;
  99. max-width: 30vw;
  100. }
  101.  
  102. nav {
  103. display: flex;
  104. justify-content: space-between;
  105. align-items: center;
  106. height: 10VH;
  107. width: auto;
  108. font-family: "futura-pt", sans- serif;
  109. font-weight: 400;
  110. font-style: normal;
  111. text-transform: uppercase;
  112. font-size: 18px;
  113. color: black;
  114. z-index: 100;
  115. position:relative;
  116.  
  117. }
  118.  
  119. .logo {
  120. flex: 1;
  121. padding: 0;
  122. margin: 0;
  123. width: auto;
  124. height: auto;
  125.  
  126. }
  127.  
  128. .logo img
  129. {
  130. margin: 0 10%;
  131. }
  132.  
  133. #navMenu {
  134. display: flex;
  135. flex: 1;
  136. justify-content: flex-end;
  137.  
  138. }
  139.  
  140. #navMenu li {
  141. margin: 0 1%;
  142.  
  143. }
  144.  
  145. ul#navMenu {
  146. padding:0px;
  147. margin:0px;
  148. width: auto;
  149. list-style:none;
  150. position:relative;
  151. /* background-color: bisque; */
  152. }
  153.  
  154. ul#navMenu ul {
  155. position:absolute;
  156. left:0;
  157. top:100%;
  158. display:none;
  159. padding:0px;
  160. margin:0px;
  161.  
  162. }
  163.  
  164. ul#navMenu li {
  165. display:inline;
  166. float:left;
  167. position:relative;
  168. }
  169.  
  170. ul#navMenu a {
  171. text-decoration:none;
  172. padding: 5px 5px;
  173. width: auto;
  174. color: black;
  175. float:left;
  176. text-align:left;
  177. /* background-color: grey; */
  178. min-width:max-content;
  179. transition-duration: 0.5s;
  180. }
  181.  
  182. ul#navMenu a:hover {
  183. color:#00A7E1;
  184. transition-duration: 0.5s;
  185.  
  186. }
  187.  
  188.  
  189. ul#navMenu ul ul {
  190. top:0;
  191. left:100%;
  192. }
  193.  
  194. ul#navMenu li:hover ul ul {
  195. display:none;
  196. transition-duration: 0.5s;
  197. }
  198.  
  199. ul#navMenu ul li:hover ul {
  200. display:block;
  201. /* background: #f5f5f5; */
  202. transition-duration: 0.5s;
  203. }
  204.  
  205. ul#navMenu li:hover ul {
  206. display:block;
  207. }
  208.  
  209. ul#navMenu ul a {
  210. width:150px;
  211. }
  212.  
  213. ul#navMenu ul li {
  214. display:block;
  215. margin:0px;
  216. }
  217.  
  218.  
  219. /* CSS for hamburger menu icon */
  220. .hamburger {
  221. display: none;
  222. }
  223.  
  224. .bar {
  225. display: block;
  226. width: 22px;
  227. height: 1.5px;
  228. margin: 5px auto;
  229. -webkit-transition: all 0.3s ease-in-out;
  230. transition: all 0.3s ease-in-out;
  231. background-color: #101010;
  232. }
  233.  
  234.  
  235. /* MEDIA QUERY FOR MOBILE */
  236.  
  237. @media only screen and (max-width: 1080px) {
  238.  
  239. body {
  240. overflow-x: hidden; }
  241.  
  242. #navMenu {
  243. position: fixed;
  244. top: 25rem;
  245. right: -90%;
  246. flex-direction: column;
  247. /* background-color: #fff; */
  248. width: 30vw;
  249. border-radius: 10px;
  250. text-align: center;
  251. transition: 1s;
  252. box-shadow:
  253. 0 10px 27px rgba(0, 0, 0, 0.05);
  254. height: 100vh;
  255. display: flex;
  256. align-items: flex-start;
  257. justify-content: flex-start;
  258. font-size: 1.8vh;
  259. }
  260.  
  261. #navMenu.active {
  262. right: 0;
  263. display: flex;
  264. align-items: flex-start;
  265. justify-content: flex-start;
  266. /* background-color: aquamarine; */
  267. }
  268.  
  269.  
  270. /* hamburger animations */
  271. .hamburger {
  272. display: block;
  273. cursor: pointer;
  274. margin-right: 3%;
  275. }
  276.  
  277. .hamburger.active .bar:nth-child(2) {
  278. opacity: 0;
  279. }
  280.  
  281. .hamburger.active .bar:nth-child(1) {
  282. transform: translateY(8px) rotate(45deg);
  283. }
  284.  
  285. .hamburger.active .bar:nth-child(3) {
  286. transform: translateY(-8px) rotate(-45deg);
  287. }
  288.  
  289. ul#navMenu ul {
  290. position:static;
  291. padding:0px;
  292. margin:0px;
  293. margin-left: 25%;
  294. background-color: blue;
  295. }
  296.  
  297.  
  298. ul#navMenu {
  299. padding:7%;
  300. margin-top: 40%;
  301. width: auto;
  302. list-style:none;
  303. overflow: hidden;
  304. }
  305.  
  306. .second-layer {
  307. width: 25vw;
  308. background-color: blue;
  309. }
  310.  
  311. #navMenu ul li:nth-child(1) ul {
  312. position: absolute;
  313. top: calc(100% + 10px);
  314. left: 0;
  315. min-width: 230px;
  316. display: none;
  317. padding-top: 10px;
  318. z-index: 1;
  319. background-color: #fff;
  320. border: 1px solid #ccc;
  321. box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
  322. }
  323.  
  324. #navMenu ul li:nth-child(2) ul {
  325. position: absolute;
  326. top: calc(100% + 10px);
  327. left: 0;
  328. min-width: 230px;
  329. display: none;
  330. padding-top: 10px;
  331. z-index: 1;
  332. background-color: #fff;
  333. border: 1px solid #ccc;
  334. box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
  335. }
  336.  
  337. .kitchen-sub-items {
  338. pointer-events: auto;
  339. }
  340.  
  341. #navMenu .kitchen-sub-items ul {
  342. display: none;
  343. position: absolute;
  344. top: 0;
  345. left: 100%;
  346. z-index: 999;
  347. }
  348.  
  349. #navMenu .kitchen-sub-items:hover > ul,
  350. #navMenu .kitchen-sub-items ul:hover {
  351. display: block;
  352. }
  353.  
  354. #navMenu ul li:nth-child(1):hover ul,
  355. #navMenu ul li:nth-child(2):hover ul {
  356. display: block;
  357. }
  358.  
  359.  
  360. }
  361.  
  362.  
  363. const hamburger = document.querySelector(".hamburger");
  364. const navMenu = document.querySelector("#navMenu");
  365.  
  366. hamburger.addEventListener("click", mobileMenu);
  367.  
  368. function mobileMenu(event) {
  369. hamburger.classList.toggle("active");
  370. navMenu.classList.toggle("active");
  371. event.stopPropagation(); // add this line to prevent event propagation
  372. }
  373.  
  374. const navLink = document.querySelectorAll(".nav-link");
  375.  
  376. navLink.forEach(n => n.addEventListener("click", closeMenu));
  377.  
  378. function closeMenu() {
  379. hamburger.classList.remove("active");
  380. navMenu.classList.remove("active");
  381. }
  382.  
  383. const subMenu = document.querySelectorAll('.kitchen-sub-items');
  384.  
  385. subMenu.forEach(function (item) {
  386. const subList = item.querySelector('ul');
  387. item.addEventListener('mouseenter', function () {
  388. subList.classList.add('active');
  389. });
  390. });
  391.  
  392. navMenu.addEventListener('mousemove', function(e) {
  393. // check if viewport matches mobile media query
  394. if (window.matchMedia("(max-width: 1080px)").matches) {
  395. const subMenuItems = document.querySelectorAll('.sub-menu');
  396. subMenuItems.forEach(function (item) {
  397. const rect = item.getBoundingClientRect();
  398. const isInSubMenu =
  399. rect.left <= e.clientX &&
  400. rect.right >= e.clientX &&
  401. rect.top <= e.clientY &&
  402. rect.bottom >= e.clientY;
  403. if (isInSubMenu) {
  404. item.classList.add('active');
  405. } else {
  406. item.classList.remove('active');
  407. }
  408. });
  409. }
  410. });
  411.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!