{"id":1555,"date":"2023-06-14T11:03:00","date_gmt":"2023-06-14T08:03:00","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1555"},"modified":"2023-06-12T00:24:19","modified_gmt":"2023-06-11T21:24:19","slug":"navigation-menu","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/headermenu\/1555\/","title":{"rendered":"Navigation menu"},"content":{"rendered":"
\"Navigation<\/figure>
\n

<\/p>\n<\/div><\/div>\n\n\n\n

<\/p>\n\n\n\n

<link href="https:\/\/fonts.googleapis.com\/css?family=Heebo:100,300,400,500,700,800,900" rel="stylesheet">\n \n  <main id="app">\n \n    <nav>\n      <!-- gooey menu background -->\n      <aside class="goo">\n        <ul>\n          <li><\/li>\n          <li><\/li>\n          <li><\/li>\n          <li><\/li>\n        <\/ul>\n      <\/aside>\n      <!-- actual menu, cannot be inside gooey due to svg filter -->\n      <ul class="menu">\n        <li><a href="#">\n          <svg viewbox="0 0 24 24"><use href="#home" \/><\/svg><\/a><\/li>\n        <li><a href="#">\n          <svg viewbox="0 0 24 24"><use href="#heart" \/><\/svg><\/a><\/li>\n        <li><a href="#">\n          <svg viewbox="0 0 24 24"><use href="#bag" \/><\/svg><\/a><\/li>\n        <li><a href="#">\n          <svg viewbox="0 0 24 24"><use href="#settings" \/><\/svg><\/a><\/li>\n      <\/ul>\n    <\/nav>\n    \n  <\/main>\n  \n  <svg viewbox="0 0 24 24">\n    \n    <!-- filter to make gooey effect -->\n    <filter id="schlurp">\n      <fegaussianblur id="SourceGraphic" stddeviation="10" \/>\n      <fecolormatrix values="         1 0 0 0 0         0 1 0 0 0         0 0 1 0 0          0 0 0 20 -10      " \/>\n    <\/filter>\n    \n    <defs>\n      <g id="home">\n        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" \/>\n        <polyline points="9 22 9 12 15 12 15 22" \/>\n      <\/g>\n      <g id="heart">\n        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" \/>\n      <\/g>\n      <g id="bag">\n        <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" \/>\n        <line x1="3" y1="6" x2="21" y2="6" \/>\n        <path d="M16 10a4 4 0 0 1-8 0" \/>\n      <\/g>\n      <g id="settings">\n        <line x1="4" y1="21" x2="4" y2="14" \/>\n        <line x1="4" y1="10" x2="4" y2="3" \/>\n        <line x1="12" y1="21" x2="12" y2="12" \/>\n        <line x1="12" y1="8" x2="12" y2="3" \/>\n        <line x1="20" y1="21" x2="20" y2="16" \/>\n        <line x1="20" y1="12" x2="20" y2="3" \/>\n        <line x1="1" y1="14" x2="7" y2="14" \/>\n        <line x1="9" y1="8" x2="15" y2="8" \/>\n        <line x1="17" y1="16" x2="23" y2="16" \/>\n      <\/g>\n    <\/defs>\n    \n  <\/svg>\n\n  <script src="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js"><\/script> <\/pre><\/div>\n\n\n\n
:root {\n  --default: #00ffc3;\n  --hover: #efceff;\n  --size: 80px;\n  --distance: calc(var(--size)*-1.1);\n}\n\n.goo,\n.goo ul {\n  background: inherit;\n  filter: url("#schlurp");\n}\n\nul {\n  display: flex;\n  justify-content: center;\n  background: inherit;\n  padding: 0 calc(var(--size) \/ 2);\n}\nul li {\n  width: var(--size);\n  height: var(--size);\n  background: var(--default);\n  margin: 0 3px;\n  color: black;\n  position: relative;\n}\n\n.goo ul li:before {\n  content: "";\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n  border-radius: 100%;\n  background: inherit;\n  transition: all 0.85s ease;\n  transform: translate3d(0, 0, 0);\n  will-change: transform;\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n}\n.goo ul li.hover:before {\n  transition: all 0.5s cubic-bezier(0.09, 1.98, 0.41, 0.71);\n  transform: translate3d(0, var(--distance), 0);\n  background: var(--hover);\n}\n\n.menu {\n  position: absolute;\n  z-index: 1;\n  background: transparent;\n  text-align: center;\n}\n\n.menu li {\n  background: transparent;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  transition: all 0.85s ease;\n  height: calc(var(--size) * 2);\n}\n.menu li:hover {\n  transition: all 0.5s cubic-bezier(0.09, 1.98, 0.41, 0.71);\n  transform: translateY(-53%);\n  color: white;\n}\n.menu li a {\n  display: grid;\n  grid-template-rows: 1fr 1fr;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  color: rgba(0, 0, 0, 0.6);\n  transition: color 0.5s ease;\n  width: 100%;\n  height: 100%;\n}\n.menu li:hover a {\n  color: rgba(0, 0, 0, 0.9);\n}\n\nnav {\n  display: flex;\n  justify-content: center;\n  margin: 50px;\n  background: var(--default);\n  border-radius: 120px;\n  position: fixed;\n  bottom: 20px;\n  left: 20px;\n  right: 20px;\n}\n\n\/* unimportant styles *\/\nbody {\n  color: white;\n  background: #333844;\n  padding: 20px;\n  font-family: "Heebo", sans-serif;\n  display: flex;\n  justify-content: center;\n  text-align: center;\n}\n\np {\n  max-width: 70ch;\n  font-weight: 200;\n}\n\nul {\n  list-style: none;\n  margin: 0;\n}\n\nsvg {\n  width: calc(var(--size)\/3);\n  height: calc(var(--size)\/3);\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 2;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}<\/pre><\/div>\n\n\n\n
$(".menu li").on("mouseover touchstart", function() {\n  let idx = $(this).index();\n  $(".goo li").removeClass("hover");\n  $("nav li").eq(idx).addClass("hover");\n}).on("mouseout touchend", function() {\n  $("nav li").removeClass("hover");\n});<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1556,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[17],"class_list":["post-1555","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-headermenu","tag-jquery"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1555","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1555"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1555\/revisions"}],"predecessor-version":[{"id":1557,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1555\/revisions\/1557"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1556"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}