menu cabecalho

Nenhum Comentário
<nav class="rj-menu" aria-label="Menu principal RedeJobs">

  <div class="rj-menu-conteudo">

    <button
      class="rj-menu-mobile"
      type="button"
      aria-expanded="false"
      aria-label="Abrir menu"
    >
      <span class="rj-hamburguer" aria-hidden="true">
        <span></span>
        <span></span>
        <span></span>
      </span>

      <strong>MENU</strong>
    </button>

    <div class="rj-menu-links">

      <!-- Início -->
      <a href="/" class="rj-link" data-rj-link>
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M3 11.5 12 4l9 7.5"></path>
          <path d="M5.5 10.5V20h5v-6h3v6h5v-9.5"></path>
        </svg>

        <span>INÍCIO</span>
      </a>

      <!-- Buscar vagas -->
      <a
        href="/buscar-vagas/"
        class="rj-link"
        data-rj-link
      >
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <circle cx="10.5" cy="10.5" r="6.5"></circle>
          <path d="m15.5 15.5 5 5"></path>
        </svg>

        <span>BUSCAR VAGAS</span>
      </a>

      <!-- Áreas profissionais -->
      <div class="rj-item-dropdown">

        <button
          class="rj-dropdown-botao"
          type="button"
          aria-expanded="false"
          aria-haspopup="true"
        >
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M4 7h16"></path>
            <path d="M4 12h16"></path>
            <path d="M4 17h16"></path>
          </svg>

          <span>ÁREAS PROFISSIONAIS</span>

          <svg
            class="rj-seta"
            viewBox="0 0 24 24"
            aria-hidden="true"
          >
            <path d="m7 9 5 5 5-5"></path>
          </svg>
        </button>

        <div class="rj-dropdown-menu">

          <a href="/area/administrativa/">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <rect
                x="4"
                y="7"
                width="16"
                height="13"
                rx="1"
              ></rect>
              <path d="M9 7V5h6v2"></path>
            </svg>

            <span>ADMINISTRATIVA</span>
          </a>

          <a href="/area/atendimento/">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <rect
                x="4"
                y="7"
                width="16"
                height="13"
                rx="1"
              ></rect>
              <path d="M9 7V5h6v2"></path>
            </svg>

            <span>ATENDIMENTO</span>
          </a>

          <a href="/area/comercial/">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <rect
                x="4"
                y="7"
                width="16"
                height="13"
                rx="1"
              ></rect>
              <path d="M9 7V5h6v2"></path>
            </svg>

            <span>COMERCIAL</span>
          </a>

          <a href="/area/logistica/">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <rect
                x="4"
                y="7"
                width="16"
                height="13"
                rx="1"
              ></rect>
              <path d="M9 7V5h6v2"></path>
            </svg>

            <span>LOGÍSTICA</span>
          </a>

          <a href="/area/industrial/">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <rect
                x="4"
                y="7"
                width="16"
                height="13"
                rx="1"
              ></rect>
              <path d="M9 7V5h6v2"></path>
            </svg>

            <span>INDUSTRIAL</span>
          </a>

          <a
            href="/areas-profissionais/"
            class="rj-ver-todas"
          >
            <span>VER TODAS ÁREAS →</span>
          </a>

        </div>
      </div>

      <!-- Top cargos -->
      <a
        href="/top-cargos/"
        class="rj-link"
        data-rj-link
      >
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M13 3s1 4-2 6c-2 1.5-4 3.5-4 6.5A5.5 5.5 0 0 0 12.5 21 5.5 5.5 0 0 0 18 15.5C18 10 13 8 13 3Z"></path>
          <path d="M12 13c1.5 1.5 2 2.7 2 4a2 2 0 1 1-4 0c0-1.5.8-2.7 2-4Z"></path>
        </svg>

        <span>TOP CARGOS</span>
      </a>

      <!-- Quem contrata -->
      <a
        href="/quem-contrata/"
        class="rj-link"
        data-rj-link
      >
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 21V5h10v16"></path>
          <path d="M14 9h6v12"></path>
          <path d="M7 8h3"></path>
          <path d="M7 12h3"></path>
          <path d="M7 16h3"></path>
          <path d="M17 12h1"></path>
          <path d="M17 16h1"></path>
        </svg>

        <span>QUEM CONTRATA?</span>
      </a>

      <!-- Blog -->
      <a href="/blog/" class="rj-link" data-rj-link>
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M5 4h14v16H5z"></path>
          <path d="M8 8h8"></path>
          <path d="M8 12h8"></path>
          <path d="M8 16h5"></path>
        </svg>

        <span>BLOG</span>
      </a>

      <!-- Anuncie vagas -->
      <a
        href="/anuncie-vagas/"
        class="rj-link"
        data-rj-link
      >
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M4 13v-3l12-5v13L4 13Z"></path>
          <path d="M7 14v5h4v-4"></path>
          <path d="M19 9v5"></path>
        </svg>

        <span>ANUNCIE VAGAS</span>
      </a>

    </div>
  </div>
</nav>

<style>
/* =========================
   CONFIGURAÇÕES GERAIS
========================= */

.rj-menu,
.rj-menu * {
  box-sizing: border-box;
}

.rj-menu {
  width: 100vw !important;
  max-width: none !important;
  min-height: 62px;

  position: relative;
  left: 50%;
  z-index: 99999;

  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding: 0 !important;

  background: #4F62CF !important;

  border: 0;
  box-shadow: none;

  font-family: Arial, Helvetica, sans-serif;
}

.rj-menu-conteudo {
  width: 100%;
  max-width: 1100px;
  min-height: 62px;

  margin: 0 auto;
  padding: 0 16px;
}

.rj-menu-links {
  min-height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;

  gap: 12px;

  background: transparent !important;
}

/* =========================
   LINKS PRINCIPAIS
========================= */

.rj-link,
.rj-dropdown-botao {
  height: 62px;
  min-height: 62px;

  position: relative;

  margin: 0;
  padding: 0 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  gap: 6px;

  border: 0;
  border-radius: 5px;
  background: transparent;

  color: #ffffff !important;
  text-decoration: none !important;
  white-space: nowrap;

  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;

  cursor: pointer;

  transform: none !important;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}

/* Impede que os menus se movimentem */
.rj-link:hover,
.rj-link:focus,
.rj-link:active,
.rj-dropdown-botao:hover,
.rj-dropdown-botao:focus,
.rj-dropdown-botao:active {
  color: #ffffff !important;
  transform: none !important;
}

/* Linha inferior */
.rj-link::after,
.rj-dropdown-botao::after {
  content: "";

  height: 2px;

  position: absolute;
  right: 10px;
  bottom: 11px;
  left: 10px;

  background: #ff35ad;
  border-radius: 10px;

  transform: scaleX(0);
  transform-origin: center;

  transition: transform 0.2s ease;
}

.rj-link:hover::after,
.rj-link:focus::after,
.rj-link.ativo::after,
.rj-item-dropdown:hover .rj-dropdown-botao::after,
.rj-item-dropdown.aberto .rj-dropdown-botao::after {
  transform: scaleX(1);
}

/* =========================
   ÍCONES
========================= */

.rj-menu svg {
  width: 14px;
  height: 14px;
  min-width: 14px;

  display: block;
  flex-shrink: 0;

  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================
   ÁREAS PROFISSIONAIS
========================= */

.rj-item-dropdown {
  height: 62px;
  min-height: 62px;

  position: relative;

  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.rj-dropdown-botao {
  padding: 0 14px;
}

/* Muda apenas o fundo, sem alterar posição */
.rj-item-dropdown:hover .rj-dropdown-botao,
.rj-item-dropdown.aberto .rj-dropdown-botao {
  height: 62px;
  min-height: 62px;
  padding: 0 14px;

  background: linear-gradient(
    135deg,
    #e321b3,
    #6c28b9
  );

  transform: none !important;
}

/* Seta */
.rj-seta {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;

  transition: transform 0.25s ease;
}

.rj-item-dropdown.aberto .rj-seta {
  transform: rotate(180deg);
}

/* =========================
   SUBMENU
========================= */

.rj-dropdown-menu {
  width: 260px;

  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  z-index: 999999;

  padding: 10px;

  display: flex;
  flex-direction: column;
  gap: 8px;

  background: linear-gradient(
    180deg,
    #e91ead 0%,
    #9d16a8 100%
  );

  border-radius: 0 0 8px 8px;

  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateX(-50%);

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.rj-item-dropdown:hover .rj-dropdown-menu,
.rj-item-dropdown.aberto .rj-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: translateX(-50%);
}

/* Links internos */
.rj-dropdown-menu a {
  width: 100%;
  min-height: 49px;

  padding: 0 16px;

  display: flex;
  align-items: center;
  gap: 8px;

  background: linear-gradient(
    100deg,
    #2b2bd5,
    #4e59d2
  );

  border-radius: 4px;

  color: #ffffff !important;
  text-decoration: none !important;

  font-size: 13px;
  font-weight: 800;

  transform: none !important;

  transition:
    background 0.2s ease,
    opacity 0.2s ease;
}

/* Não movimenta os itens internos */
.rj-dropdown-menu a:hover,
.rj-dropdown-menu a:focus,
.rj-dropdown-menu a:active {
  background: linear-gradient(
    100deg,
    #1515c7,
    #303acb
  );

  color: #ffffff !important;
  transform: none !important;
}

.rj-dropdown-menu svg {
  width: 16px;
  height: 16px;
  min-width: 16px;
}

.rj-dropdown-menu .rj-ver-todas {
  background: linear-gradient(
    100deg,
    #312bd1,
    #5260d4
  );
}

/* =========================
   BOTÃO DO CELULAR
========================= */

.rj-menu-mobile {
  width: 100%;
  min-height: 60px;

  padding: 0 20px;

  display: none;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;

  border: 0;
  background: transparent;
  color: #ffffff;

  cursor: pointer;
}

.rj-menu-mobile strong {
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
}

.rj-hamburguer {
  width: 24px;
  height: 18px;

  position: relative;
  display: block;
}

.rj-hamburguer span {
  width: 24px;
  height: 2px;

  position: absolute;
  left: 0;

  display: block;

  background: #ffffff;
  border-radius: 5px;

  transition:
    top 0.25s ease,
    transform 0.25s ease,
    opacity 0.25s ease;
}

.rj-hamburguer span:nth-child(1) {
  top: 1px;
}

.rj-hamburguer span:nth-child(2) {
  top: 8px;
}

.rj-hamburguer span:nth-child(3) {
  top: 15px;
}

/* =========================
   TELAS INTERMEDIÁRIAS
========================= */

@media (max-width: 1200px) {
  .rj-menu-links {
    gap: 5px;
  }

  .rj-link,
  .rj-dropdown-botao {
    padding-right: 7px;
    padding-left: 7px;

    font-size: 11px;
  }

  .rj-dropdown-botao,
  .rj-item-dropdown:hover .rj-dropdown-botao,
  .rj-item-dropdown.aberto .rj-dropdown-botao {
    padding-right: 9px;
    padding-left: 9px;
  }

  .rj-link::after,
  .rj-dropdown-botao::after {
    right: 7px;
    left: 7px;
  }
}

/* =========================
   TABLET E CELULAR
========================= */

@media (max-width: 1050px) {
  .rj-menu-conteudo {
    padding: 0;
  }

  .rj-menu-mobile {
    display: flex;
  }

  .rj-menu-links {
    width: 100%;
    max-height: 0;

    position: absolute;
    top: 100%;
    right: 0;
    left: 0;

    overflow: hidden;

    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;

    background: #4F62CF !important;

    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);

    transition: max-height 0.35s ease;
  }

  .rj-menu.menu-aberto .rj-menu-links {
    max-height: 950px;
    overflow: visible;
  }

  .rj-link,
  .rj-dropdown-botao {
    width: 100%;
    height: 52px;
    min-height: 52px;

    padding: 0 20px;

    justify-content: flex-start;

    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);

    font-size: 13px;

    transform: none !important;
  }

  .rj-link::after,
  .rj-dropdown-botao::after {
    width: 58px;

    right: auto;
    bottom: 5px;
    left: 20px;
  }

  .rj-item-dropdown {
    width: 100%;
    height: auto;
    min-height: 0;

    display: block;
  }

  .rj-dropdown-botao,
  .rj-item-dropdown:hover .rj-dropdown-botao,
  .rj-item-dropdown.aberto .rj-dropdown-botao {
    width: 100%;
    height: 52px;
    min-height: 52px;

    padding: 0 20px;

    background: transparent;
    border-radius: 0;

    transform: none !important;
  }

  .rj-item-dropdown.aberto .rj-dropdown-botao {
    background: linear-gradient(
      135deg,
      #e321b3,
      #6c28b9
    );
  }

  .rj-dropdown-menu {
    width: 100%;
    max-height: 0;

    position: static;

    padding: 0 10px;

    gap: 6px;

    border-radius: 0;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    overflow: hidden;

    transform: none !important;
    box-shadow: none;

    transition:
      max-height 0.35s ease,
      padding 0.35s ease;
  }

  /* No celular, só abre com clique */
  .rj-item-dropdown:hover .rj-dropdown-menu {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .rj-item-dropdown.aberto .rj-dropdown-menu {
    max-height: 500px;

    padding-top: 10px;
    padding-bottom: 10px;

    transform: none !important;
  }

  .rj-dropdown-menu a,
  .rj-dropdown-menu a:hover {
    min-height: 46px;
    transform: none !important;
  }

  /* Animação do botão hambúrguer */
  .rj-menu.menu-aberto
  .rj-hamburguer span:nth-child(1) {
    top: 8px;
    transform: rotate(45deg);
  }

  .rj-menu.menu-aberto
  .rj-hamburguer span:nth-child(2) {
    opacity: 0;
  }

  .rj-menu.menu-aberto
  .rj-hamburguer span:nth-child(3) {
    top: 8px;
    transform: rotate(-45deg);
  }
}
</style>

<script>
(function () {
  function iniciarMenusRedeJobs() {
    const menus = document.querySelectorAll(".rj-menu");

    menus.forEach(function (menu) {
      if (menu.dataset.rjConfigurado === "true") {
        return;
      }

      menu.dataset.rjConfigurado = "true";

      const botaoMobile =
        menu.querySelector(".rj-menu-mobile");

      const itemDropdown =
        menu.querySelector(".rj-item-dropdown");

      const botaoDropdown =
        menu.querySelector(".rj-dropdown-botao");

      const links =
        menu.querySelectorAll("[data-rj-link]");

      /* Abre o menu no celular */
      if (botaoMobile) {
        botaoMobile.addEventListener(
          "click",
          function (evento) {
            evento.stopPropagation();

            const aberto =
              menu.classList.toggle("menu-aberto");

            botaoMobile.setAttribute(
              "aria-expanded",
              aberto ? "true" : "false"
            );
          }
        );
      }

      /* Abre o submenu */
      if (botaoDropdown && itemDropdown) {
        botaoDropdown.addEventListener(
          "click",
          function (evento) {
            evento.stopPropagation();

            const aberto =
              itemDropdown.classList.toggle("aberto");

            botaoDropdown.setAttribute(
              "aria-expanded",
              aberto ? "true" : "false"
            );
          }
        );
      }

      /* Marca automaticamente a página atual */
      const caminhoAtual =
        window.location.pathname.replace(/\/+$/, "") || "/";

      links.forEach(function (link) {
        try {
          const caminhoLink =
            new URL(link.href, window.location.origin)
              .pathname
              .replace(/\/+$/, "") || "/";

          if (caminhoAtual === caminhoLink) {
            link.classList.add("ativo");
          }
        } catch (erro) {
          return;
        }
      });

      /* Fecha ao clicar fora */
      document.addEventListener(
        "click",
        function (evento) {
          if (
            itemDropdown &&
            !itemDropdown.contains(evento.target)
          ) {
            itemDropdown.classList.remove("aberto");

            if (botaoDropdown) {
              botaoDropdown.setAttribute(
                "aria-expanded",
                "false"
              );
            }
          }

          if (
            window.innerWidth <= 1050 &&
            !menu.contains(evento.target)
          ) {
            menu.classList.remove("menu-aberto");

            if (botaoMobile) {
              botaoMobile.setAttribute(
                "aria-expanded",
                "false"
              );
            }
          }
        }
      );

      /* Fecha usando a tecla ESC */
      document.addEventListener(
        "keydown",
        function (evento) {
          if (evento.key !== "Escape") return;

          menu.classList.remove("menu-aberto");

          if (itemDropdown) {
            itemDropdown.classList.remove("aberto");
          }

          if (botaoMobile) {
            botaoMobile.setAttribute(
              "aria-expanded",
              "false"
            );
          }

          if (botaoDropdown) {
            botaoDropdown.setAttribute(
              "aria-expanded",
              "false"
            );
          }
        }
      );
    });
  }

  if (document.readyState === "loading") {
    document.addEventListener(
      "DOMContentLoaded",
      iniciarMenusRedeJobs
    );
  } else {
    iniciarMenusRedeJobs();
  }
})();
</script>

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *