Website inspiration FC Bayern Monachium
Website inspiration #1 Football Club
August 9, 2024
Ecommerce popups and their role in bussiness with examples
August 23, 2024

August 12, 2024

Creating a Hero Section with Overlay Menu

In this tutorial, we will guide you step by step through creating a hero section with an overlay menu. We’ll discuss the basic HTML and CSS structure, then dive into elements like the header (hero top), image carousel, hero text, and building the overlay menu. Finally, we’ll add JavaScript to enable interactive features.

Creating a Hero Section with Overlay Menu
View example

Step 1: Basic HTML Structure for Hero and Overlay Menu

HTML Structure for the Hero Section

We’ll start by creating the basic structure of the hero section. This section will include:

  • Hero Top: Contains the logo, phone number, booking button, and icons to open and close the overlay menu.
  • Image Carousel: A series of images that will automatically scroll in the background.
  • Hero Text: The main slogan and “Read More” button.
<section class="sf-hotel-hero">
    <div class="hero-top">
        <!-- Logo, phone number, booking button, menu icons -->
    </div>
    <div class="hero-content">
        <!-- Image carousel -->
    </div>
    <div class="hero-banner">
        <!-- Hero text -->
    </div>
</section>
.sf-hotel-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  font-size: 1rem;
  line-height: 1.2;
  color: #fff;
}
.sf-hotel-hero .hero-content {
  height: 100vh;
  width: 100%;
}
.sf-hotel-hero a {
  color: #f5de9c;
}
.sf-hotel-hero a:hover {
  color: #fae3a5;
}

HTML Structure for the Overlay Menu

The overlay menu consists of two main parts:

  • Left Side: Contains the navigation links to different sections of the website.
  • Right Side: Contains additional links and information, such as the hotel address, email, phone number, and social media links.
<div class="sf-menu-overlay">
    <div class="overlay-content">
        <div class="overlay-navigation">
            <!-- Navigation -->
        </div>
        <div class="overlay-addons">
            <!-- Additional links and information -->
        </div>
    </div>
</div>
.sf-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  background-color: #313131;
  background-image: url(images/pattern.png);
  font-size: 1rem;
  line-height: 1.5;
  z-index: 999;
  overflow-y: auto;
}
.sf-menu-overlay a { 
  color: #f5de9c;
  text-decoration: none;
}
.sf-menu-overlay a:hover {
  text-decoration: underline;
}
.sf-menu-overlay .overlay-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  color: #fff;
  padding: 50px;
}

Step 2: Building Elements of the Hero Section

Hero Top

Now we will go through the detailed process of building the header (hero top) of the hero section.

  • Logo,
  • Phone Number,
  • Booking Button,
  • Menu Links
<div class="hero-top">
    <a href="#" class="hero-logo">
        <img src="images/snippflow.svg" alt="Logo" />
    </a>
    <div class="hero-actions">
        <p class="phone-number">+00 123 456 789</p>
        <a href="#" class="booking-button">
            <i class="fa-solid fa-bell-concierge"></i>
            <span>Book now</span>
        </a>
        <div class="menu-icons">
            <a href="#" class="menu-icon open-menu">
                <i class="fa-solid fa-bars"></i>
            </a>
            <a href="#" class="menu-icon close-menu">
                <i class="fa-solid fa-xmark"></i>
            </a>
        </div>
    </div>
</div>
.sf-hotel-hero .hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
  padding: 20px 30px;
}
.sf-hotel-hero .hero-top a.hero-logo {
  display: block;
  line-height: 0;
}
.sf-hotel-hero .hero-top a.hero-logo img {
  width: 140px;
  height: auto;
}

.sf-hotel-hero .hero-top .hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  border-radius: 30px;
}

.sf-hotel-hero .hero-top a.booking-button {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 10px 20px;
  color: #fff;
  font-weight: 700;
  border: 1px solid #fff;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
.sf-hotel-hero .hero-top a.booking-button:hover {
  background-color: #fff;
  border: 1px solid #fff;
  color: #000;
}

.sf-hotel-hero .hero-top .menu-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}
.sf-hotel-hero .hero-top .menu-icons a {
  font-size: 24px;
  display: none;
}              
.sf-hotel-hero .hero-top .menu-icons a.open-menu {
    display: block;
}

Image Carousel

Next, we’ll add an image carousel that will display in the background.

<div class="hero-content">
    <div class="slick-slider">
        <div class="item">
            <img src="images/pexels-pixabay-258154.jpg" alt="">
        </div>
        <div class="item">
            <img src="images/pexels-elina-sazonova-1838554.jpg" alt="" />
        </div>
        <div class="item">
            <img src="images/pexels-ludvighedenborg-3578007.jpg" alt="" />
        </div>
    </div>
</div>
.sf-hotel-hero .hero-content .slick-slider,
.sf-hotel-hero .hero-content .slick-slider .item {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.sf-hotel-hero .hero-content .slick-slider img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

Hero Text

We will add hero text that will be displayed over the image carousel, including the main slogan.

<div class="hero-banner">
    <div class="banner-wrapper">
        <p>Your Comfort, Our Passion</p>
        <h1>Where Luxury<br /> Meets Comfort</h1>
        <a class="read-more" href="#"><i class="fa-solid fa-arrow-down"></i></a>
    </div>
</div>
.sf-hotel-hero .hero-content .hero-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
}
.sf-hotel-hero .hero-content .banner-wrapper {
  text-align: center;
}
.sf-hotel-hero .hero-content .banner-wrapper > *:not(:last-child) {
  margin-bottom: 30px;
}
.sf-hotel-hero .hero-content .banner-wrapper h1 {
  font-size: clamp(2.5rem,5vw, 6rem);
  line-height: 1;
  font-weight: 900;
}
.sf-hotel-hero .hero-content .banner-wrapper p { 
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4vw;
}
.sf-hotel-hero .hero-content .banner-wrapper a.read-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  font-size: 20px;
  background-color: #ffd763;
  color: #000;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
.sf-hotel-hero .hero-content .banner-wrapper a.read-more:hover {
  transform: scale(1.1);
}

Responsive

To ensure that the hero section is accessible and visually appealing on all devices, we employed CSS media queries to adjust the layout and styling based on screen size

@media only screen and (max-width: 767px) {
  .sf-hotel-hero .hero-top { padding: 10px 10px 10px 20px; }
  .sf-hotel-hero .hero-top a.hero-logo img { width: 120px; }
  .sf-hotel-hero .hero-top .hero-actions { padding: 7px 15px; gap: 10px; }
  .sf-hotel-hero .hero-top a.booking-button { padding: 10px 12px; }
  .sf-hotel-hero .hero-top a.booking-button span { display: none; }
  .sf-hotel-hero .hero-top .phone-number { display: none; }
}

Sticky header

A sticky header enhances navigation by keeping essential elements, such as the header itself, visible at the top of the screen as the user scrolls through the page. This feature ensures that important navigation controls are always within easy reach, providing a consistent user experience.

.sticky-header:not(.menu-is-open) .sf-hotel-hero .hero-top {
  justify-content: flex-end;
}
.sticky-header:not(.menu-is-open) .sf-hotel-hero .hero-logo {
  display: none;
}
.sticky-header:not(.menu-is-open) .sf-hotel-hero .hero-actions {
  background-color: rgba(0,0,0,.85);
}
.sticky-header:not(.menu-is-open) .sf-hotel-hero .hero-actions .booking-button {
  border: 1px solid rgba(255,255,255,.3);
}

Step 3: Building the Overlay Menu

Left Side Navigation

First, we’ll build the left side of the overlay menu, which contains navigation links to different sections of the website.

<div class="overlay-navigation">
    <nav class="menu-links">
        <ul>
            <li><a href="#">Homepage</a></li>
            <li><a href="#">Hotel</a></li>
            <li><a href="#">Offers</a></li>
            <li><a href="#">SPA & Wellness</a></li>
            <li><a href="#">Restaurants</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</div>
.sf-menu-overlay .overlay-navigation {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: 1200px;
}
.sf-menu-overlay .menu-links ul { 
  display: inline-flex;
  flex-wrap: wrap;
  list-style: none;
}
.sf-menu-overlay .menu-links li {
  width: 50%;
  margin: 0;
}
.sf-menu-overlay .menu-links a {
  display: inline-block;
  position: relative;
  color: #fff;
  font-size: max(1.2rem, 3vw);
  text-decoration: none;
}
.sf-menu-overlay .menu-links a:after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 0%;
  height: 1px;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
}
.sf-menu-overlay .menu-links a:hover:after {
  width: 100%;
}

Right Side with Useful Links

Now, we’ll add the right side of the overlay menu, which contains the hotel address, email, phone number, and social media links.

<div class="overlay-addons">
    <div class="address-box">
        <address>The Grand Oasis Hotel<br /> 
            123 Paradise Road,<br /> 
            Palm Beach, FL 33480,<br /> 
            United States
        </address>
        <a href="#">Show on map</a>
    </div>
    <p><a href="#">noreply@gmail.com</a><br /> 
       +48 123 456 789
    </p>
    <nav class="social-links">
        <ul>
            <li><a href="#facebook"><i class="fa-brands fa-facebook-f"></i> Facebook</a></li>
            <li><a href="#instagram"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
            <li><a href="#twitter"><i class="fa-brands fa-youtube"></i> YouTube</a></li>
        </ul>
    </nav>
</div>
.sf-menu-overlay .overlay-addons {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
}

.sf-menu-overlay .address-box address {
  font-style: normal;
  margin-bottom: 10px;
}
.sf-menu-overlay .social-links ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}
.sf-menu-overlay .social-links a {
  display: flex;
  align-items: center;
  gap: 10px;
}

Responsive

@media only screen and (max-width: 767px) {
  .sf-menu-overlay { padding-top: 100px; }
  .sf-menu-overlay .overlay-content { flex-direction: column; justify-content: flex-start; gap: 30px; padding: 25px; height: auto; }
  .sf-menu-overlay .overlay-navigation { max-width: unset; width: 100%; }
  .sf-menu-overlay .overlay-addons { width: 100%; }
  .sf-menu-overlay .menu-links ul { gap: 10px; }
  .sf-menu-overlay .menu-links li { width: 100%; }
}

Adding Interactivity with JavaScript

Finally, we’ll add JavaScript to enable the opening and closing of the overlay menu and the functioning of the image carousel.

Include Required Libraries

Add the following lines to your HTML file, preferably just before the closing </body> tag, to include jQuery and Slick Slider:

<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Include Slick Slider CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Include Slick Slider JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Add JavaScript for Interactivity

Now, include the JavaScript code to initialize the Slick Slider and manage the overlay menu:

Declare the Use of jQuery

The first step is to ensure that the $(document).ready() function is set up correctly. This function ensures that the DOM is fully loaded before running any jQuery code.

$(document).ready(function() {
    // All jQuery code will be placed inside this function
});

Initialize the Slick Slider

Within the $(document).ready() function, you can now initialize the Slick Slider. This part of the code sets up the carousel, specifying options like the number of slides to show, autoplay settings, and responsiveness.

$(document).ready(function() {
    // Initialize the Slick Slider
    $(".slick-slider").slick({
        slidesToShow: 2,
        slidesToScroll: 1,
        infinite: true,
        autoplay: true,
        autoplaySpeed: 2000,
        arrows: false,
        responsive: [
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    });
    
    // Menu functions will be added here
});

Define Functions to Open and Close the Overlay Menu

Finally, still within the $(document).ready() function, add the code to handle the opening and closing of the overlay menu. This code toggles the visibility of the menu and switches between the open and close icons.

$(document).ready(function() {
    // Initialize the Slick Slider
    $(".slick-slider").slick({
        slidesToShow: 2,
        slidesToScroll: 1,
        infinite: true,
        autoplay: true,
        autoplaySpeed: 2000,
        arrows: false,
        responsive: [
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    });

    // Function to toggle the menu
    function toggleMenu(event, action) {
        event.preventDefault();
        if (action === 'open') {
            $('.sf-menu-overlay').fadeIn();
            $('body').addClass('menu-is-open');
            $('.open-menu').hide();
            $('.close-menu').show();
        } else if (action === 'close') {
            $('.sf-menu-overlay').fadeOut();
            $('body').removeClass('menu-is-open');
            $('.close-menu').hide();
            $('.open-menu').show();
        }
    }

    // Event listeners for opening and closing the menu
    $('.open-menu').on('click', function(event) {
        toggleMenu(event, 'open');
    });

    $('.close-menu').on('click', function(event) {
        toggleMenu(event, 'close');
    });
});

The functions for opening and closing the overlay menu are defined and linked to the appropriate button clicks.

Summary

In this tutorial, we explored how to create a sophisticated hero section with an overlay menu, ideal for luxury websites like hotels. We began by defining the basic HTML structure, splitting it into the hero top (with a logo, phone number, booking button, and menu icons), an image carousel, and the hero text. We then detailed the construction of the overlay menu, breaking it down into the left side navigation and the right side with additional links and information.

After setting up the structure, we applied CSS to style each component, giving the page a polished and modern appearance. Finally, we incorporated jQuery and the Slick Slider plugin to bring interactivity to the section—initializing the image carousel and implementing functions to open and close the overlay menu. This approach provided a comprehensive, step-by-step guide to building a functional and visually appealing hero section with an overlay menu.

Leave a Reply

Your email address will not be published. Required fields are marked *

Level Up Your Coding Skills

Get the best CSS, HTML, and JS snippets delivered to your inbox monthly. 🚀
No spam—just coding gold! 💻✨"

We don’t spam! Read our privacy policy for more info.

cookie
This website uses cookies to improve your experience. By using this website you agree to our Data Protection Policy.
Read more