1+ Menu Components - Vanilla CSS

Menus are user interface elements used on websites to organize and navigate through different sections or categories of content. These menus typically appear as lists of clickable links or buttons, allowing users to access various pages or features of the website. In this collection, you'll find various designs for menu components that you can easily incorporate into your website's design. Whether you prefer basic menu navigation or more visually appealing styles, these components are designed to enhance user navigation and provide a seamless browsing experience for your website visitors.

Modern Menu with Swiper

Enhance website navigation with a modern menu featuring Swiper functionality. Learn how to implement a menu that offers smooth and intuitive navigation through content using HTML, CSS, and Swiper.js.

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />


<div class="background"></div>
<button class="burger" onclick="toggleMenu()"></button>
<div class="menu">
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div>
          <h2>About</h2>
          <nav>
            <a href="#" style="animation-delay: 0.8s">Profile</a>
            <a href="#" style="animation-delay: 0.9s">Skills</a>
            <a href="#" style="animation-delay: 1s">Education</a>
          </nav>
        </div>
      </div>
      <div class="swiper-slide">
        <div>
          <h2>Portfolio</h2>
          <nav>
            <a href="#" style="animation-delay: 0.8s">Work</a>
            <a href="#" style="animation-delay: 0.9s">Projects</a>
            <a href="#" style="animation-delay: 1s">GitHub</a>
          </nav>
        </div>
      </div>
      <div class="swiper-slide">
        <div>
          <h2>Contact</h2>
          <nav>
            <a href="#" style="animation-delay: 0.8s">Email</a>
            <a href="#" style="animation-delay: 0.9s">Instagram</a>
            <a href="#" style="animation-delay: 1s">LinkedIn</a>
          </nav>
        </div>
      </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>

* {
  box-sizing: border-box;
}

body {
  font-family: "Euclid Circular A", Poppins;
  color: #f9f9f9;
}

button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.swiper {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.swiper-slide {
  display: grid;
  place-items: center;
  opacity: 0;
  transition: 0.25s;
}

.swiper-slide-active {
  opacity: 1;
}

.swiper-slide > div {
  margin-top: -73px;
}

.swiper-slide h2 {
  opacity: 0.35;
  font-weight: 400;
  width: 100%;
}

.swiper-button-next,
.swiper-button-prev {
  opacity: 0.5;
  color: rgb(255 255 255 / 96%);
  transition: 0.3s;
}

:is(.swiper-button-next, .swiper-button-prev):hover {
  opacity: 1;
}

.swiper-button-next {
  right: 50px;
}

.swiper-button-prev {
  left: 50px;
}

.burger,
.menu,
.background {
  position: fixed;
}

.background {
  z-index: 1;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/es6-menus/main/menu-1/assets/bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0%;
  transition: 0.5s;
}

body.open .background {
  filter: blur(10px);
}

.burger {
  z-index: 3;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/es6-menus/29eecda167619fb5ec2f4bb1b62afbc507392f4f/menu-1/assets/menu.svg");
  background-repeat: no-repeat;
  background-position: center;
}

body.open .burger {
  background-image: url("https://raw.githubusercontent.com/frontend-joe/es6-menus/29eecda167619fb5ec2f4bb1b62afbc507392f4f/menu-1/assets/close.svg");
}

.menu {
  z-index: 2;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  border-bottom: 20px solid white;
  transition: 0.5s;
}

body.open .menu {
  opacity: 1;
  visibility: visible;
}

.menu nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.menu nav:hover a {
  opacity: 0.25;
}

.menu nav a:hover {
  opacity: 1;
}

.menu a {
  position: relative;
  color: #f9f9f9;
  font-size: 32px;
  font-family: "Euclid Circular A", Poppins;
  padding: 20px 0;
  width: 260px;
  text-decoration: none;
  transition: 0.4s;
}

.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #f7f7f7;
  transform: scaleX(0);
  transform-origin: 0% 50%;
  transition: 0.4s;
}

.menu a:hover::after {
  transform: scaleX(1);
}

const toggleMenu = () => {
  document.body.classList.toggle("open");
};

const swiper = new Swiper(".swiper", {
  loop: true,
  speed: 750,

  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

Hamburger Menu

Enhance user experience on your website with a hamburger menu. Learn how to integrate this versatile and space-saving navigation icon to provide users with easy access to your site's menu options.

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />


<button class="burger" onclick="toggleMenu()"></button>
<div class="background"></div>
<div class="shade"></div>
<div class="menu">
  <nav>
    <a style="animation-delay: 0.2s">About</a>
    <a style="animation-delay: 0.3s">Portfolio</a>
    <a style="animation-delay: 0.4s">Services</a>
    <a style="animation-delay: 0.5s">Contact</a>
  </nav>
</div>

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font-family: Poppins;
  color: #f9f9f9;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-components/main/menus/menu-1/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: -250px 0%;
}

.shade {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgb(0 0 0 / 90%), rgb(0 0 0 / 0%));
}

button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.burger,
.menu {
  position: fixed;
}

.burger {
  z-index: 4;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-components/684c7ef341884b0aacd8b236792d36e3bb3ff3f1/menus/menu-1/menu.svg");
  background-repeat: no-repeat;
  background-position: center;
}

body.open .burger {
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-components/684c7ef341884b0aacd8b236792d36e3bb3ff3f1/menus/menu-1/close.svg");
}

.background {
  position: fixed;
  z-index: 2;
  top: 44px;
  left: 44px;
  aspect-ratio: 1 / 1;
  translate: -50% -50%;
  height: 88px;
  background: rgb(0 0 0 / 0%);
  border-radius: 50%;
  transition: 0.6s;
}

body.open .background {
  height: 300vmax;
  background: rgb(0 0 0 / 80%);
}

.menu {
  z-index: 3;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: 0.05s;
}

.menu nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 100px;
}

body.open .menu {
  opacity: 1;
  visibility: visible;
}

body .menu nav:hover > a {
  opacity: 0.25;
}

body .menu nav > a:hover {
  opacity: 1;
  translate: 8px 0;
}

.menu a {
  position: relative;
  color: #f9f9f9;
  font-size: 32px;
  font-family: "Euclid Circular A";
  padding: 20px 0 20px 20px;
  text-decoration: none;
  opacity: 0;
  cursor: pointer;
  transition: 0.4s;
}

.menu a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -26px;
  translate: 0 -50%;
  margin-top: 2px;
  width: 10px;
  height: 10px;
  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  opacity: 0;
  rotate: 45deg;
  transition: 0.3s;
}

.menu a:hover::after {
  opacity: 1;
}

@keyframes appear {
  0% {
    opacity: 0;
    translate: -30px 0;
  }
  100% {
    opacity: 1;
  }
}

body.open .menu a {
  opacity: 1;
  animation: appear 0.25s backwards;
}

const toggleMenu = () => document.body.classList.toggle("open");