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.

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",
  },
});

Elevate your website's navigation with a sleek and interactive menu created using Swiper.js. This guide will walk you through the process of integrating and customizing a modern menu, ensuring it seamlessly integrates into your website's design and functionality.

Step 1: Copy the Code Snippet

Start by copying the provided HTML, CSS, and JavaScript code snippet for the modern menu with Swiper.js. This snippet includes the structure and necessary scripts to enable Swiper functionality.

Step 2: Link the Swiper CSS and JavaScript Files

Ensure the Swiper CSS (swiper-bundle.min.css) and JavaScript (swiper-bundle.min.js) files are correctly linked in your HTML document. Add the following <link> and <script> tags within the <head> and <body> sections, respectively:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script src="script.js"></script>

Step 3: Customize and Make it Yours

Personalize the modern menu with Swiper.js to match your website's design and functionality. Modify the HTML structure and CSS styles (styles.css) to change the menu's appearance, transitions, and pagination styles. Explore Swiper.js documentation for additional customization options such as navigation buttons, autoplay, and more.

By following these steps, you can implement and customize a modern menu using Swiper.js, enhancing navigation and user experience on your website.

Code Explanation

HTML Code

Background Div (`<div class="background"></div>`):

This <div> likely serves as a background element for the menu and other content. Its purpose is to provide a styled backdrop for the menu.

Burger Menu Button (`<button class="burger" onclick="toggleMenu()"></button>`):

This <button> is styled as a burger menu icon (typically three horizontal lines) and has an onclick attribute that triggers a JavaScript function toggleMenu(). This function would toggle the visibility of the menu when the button is clicked.

Menu Container (`<div class="menu">` ... `</div>`):

This <div> contains the entire menu structure.

Swiper Component (`<div class="swiper">` ... `</div>`):

This <div> uses the Swiper library or similar to enable swiping gestures for navigation. It contains:
Swiper Wrapper (<div class="swiper-wrapper"> ... </div>):
Contains individual slides (<div class="swiper-slide"> ... </div>) that represent different sections of the menu.
Each .swiper-slide represents a section in the menu with a heading (<h2>) and a list of navigation links (<nav>).

Individual Slides (`<div class="swiper-slide">` ... `</div>`):

Each slide represents a section of the menu:
About Section:
- Contains links such as Profile, Skills, and Education.
- Each link has an inline style (style="animation-delay: Xs") to stagger their appearance using CSS animations.
Portfolio Section:
- Contains links such as Work, Projects, and GitHub.
- Similar to the About section, links have animation delays.
Contact Section:
- Contains links such as Email, Instagram, and LinkedIn.
- Again, links have animation delays for staggered appearance.

Swiper Navigation Buttons (`<div class="swiper-button-prev"></div>` and `<div class="swiper-button-next"></div>`):

These <div> elements are likely part of the Swiper library setup, providing previous and next navigation buttons to scroll through the menu sections.

CSS Code

General Styling

Universal Box Sizing: * { box-sizing: border-box; }

Ensures all elements include padding and border in their total width and height calculations.

Body Styling:

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

Sets the font family for the entire document and text color to a light gray (#f9f9f9).

Button Styling:

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

Resets button styles to remove borders and padding, sets background to transparent, and uses a pointer cursor.

Swiper Component Styling

Swiper Container (div.swiper):

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

Makes the swiper container take up the full width and height of its parent and changes the cursor to a pointer.

Swiper Slide Styling (div.swiper-slide):

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

Centers content within each swiper slide, initially hides slides (opacity: 0), and adds a fade-in effect (opacity: 1) on active slides.

Swiper Slide Content Styling:

.swiper-slide > div {
  margin-top: -73px;
}
.swiper-slide h2 {
  opacity: 0.35;
  font-weight: 400;
  width: 100%;
}

Adjusts vertical positioning (margin-top: -73px) of content within swiper slides.
Sets lower opacity (opacity: 0.35) for heading tags (h2) within swiper slides.

Swiper Navigation Buttons Styling (div.swiper-button-next and div.swiper-button-prev):

.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;
}

Sets initial opacity and color for swiper navigation buttons.
Enhances opacity on hover (:hover) for better user interaction.

Burger Menu and Background Effects

Background (div.background):

.background {
  z-index: 1;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background-image: url("..."); /* URL of background image */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0%;
  transition: 0.5s;
}
body.open .background {
  filter: blur(10px); /* Applies blur effect when menu is open */
}

Positions a fullscreen background with a specified image, adjusting size and positioning.
Applies a blur filter (filter: blur(10px)) when the menu is open (body.open).

Burger Menu Button (button.burger):

.burger {
  /* Styles for the burger menu button */
}
body.open .burger {
  /* Styles for the burger menu button when menu is open */
}

Sets styles for a burger menu button with a background image.
Changes the background image when the menu is open (body.open), likely toggling between a menu and close icon.

Menu (div.menu):

.menu {
  /* Styles for the menu container */
}
body.open .menu {
  /* Styles for the menu container when menu is open */
}

Positions a fullscreen menu overlay with a semi-transparent black background (rgba(0, 0, 0, 0.6)).
Initially hidden (opacity: 0; visibility: hidden;) and becomes visible when body has the class open.

Menu Navigation Links (nav a):

.menu a {
  /* Styles for menu navigation links */
}
.menu a::after {
  /* Styles for pseudo-element after menu navigation links */
}
.menu a:hover::after {
  /* Styles for pseudo-element after menu navigation links on hover */
}

Styles links within the menu with a specific font family, size, padding, and transition effects.
Adds an underline effect (::after) that expands horizontally on hover (transform: scaleX(1)).

JavaScript Code

toggleMenu Function

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

document.body.classList.toggle("open"): This line toggles the presence of the open class on the body element. If the class is not present, it adds it; if it is present, it removes it.
The open class is typically used to control the visibility or behavior of elements in the CSS, often in conjunction with styles like hiding or revealing a menu or overlay.

Swiper Initialization

const swiper = new Swiper(".swiper", {
  loop: true,
  speed: 750,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

new Swiper(".swiper", { ... }): Creates a new Swiper instance on an element with the class swiper.
Options:
- loop: true: Enables looping through slides.
- speed: 750: Sets the transition speed between slides to 750 milliseconds.
Navigation Configuration:
- navigation: Specifies navigation controls for the Swiper instance.
- nextEl: ".swiper-button-next": Specifies the element that acts as the next slide navigation button. It targets an element with the class swiper-button-next.
- prevEl: ".swiper-button-prev": Specifies the element that acts as the previous slide navigation button. It targets an element with the class swiper-button-prev.