Slide-Down Top Nav Using Only CSS

Topics Covered in This HTML & CSS Tutorial:

Master the art of creating sophisticated slide-down navigation menus and learn professional techniques for making logos and menu buttons seamlessly integrate with animated page content.

Exercise Preview

Exercise Overview

Building on your foundation from previous exercises, you'll now transform a standard off-screen side navigation into an elegant top-sliding menu system. While the previous exercise demonstrated navigation that overlays content, this advanced technique pushes page content down naturally—a pattern favored by modern web applications like Slack and Notion for its intuitive user experience. This approach provides better content accessibility and creates a more polished interaction that feels integrated rather than intrusive.

You'll master the nuanced use of CSS transitions with max-height properties, learn why height animations require specific techniques, and discover professional positioning strategies that maintain design integrity across responsive breakpoints.

Getting Started

1. This exercise builds directly on the foundational concepts from exercise 5D (Off-Screen Side Nav Using Only CSS). Complete that exercise first to ensure you understand the underlying checkbox-driven navigation mechanics and CSS positioning fundamentals.
2. Navigate to the Slide-Down Top Nav folder located in Desktop > Class Files > Advanced HTML CSS Class. If you're using a modern code editor like Visual Studio Code, Cursor, or WebStorm, open the entire folder to enable intelligent autocomplete and file navigation features.
3. Open index.html from the Slide-Down Top Nav folder in your editor.
4. Launch index.html in your preferred browser (Chrome or Firefox recommended for consistent development experience).
5. Resize your browser window to simulate mobile viewport dimensions—aim for approximately 400-500px width to trigger the mobile styling with the MENU button in the top right corner.
6. Click the MENU button to observe the current behavior: the navigation slides in from the left side, overlaying content. This functionality works perfectly, but we'll transform it into something more sophisticated.
7. Keep your browser open at this mobile width throughout the exercise for efficient testing and immediate feedback on your changes.
8. In your code editor, open main.css from the css folder. This is where we'll implement the core animation and positioning logic.

Transforming the Navigation's Appearance

Now we'll restructure the navigation from a side-sliding overlay to a top-sliding push-down system. This involves changing positioning contexts and animation properties to create a more integrated user experience.

1. Locate the max-width: 700px media query in your CSS file and find the nav rule within it. This media query targets mobile and tablet viewports where the slide-down behavior will be active.
2. Remove the width and left properties completely—these were controlling the side-sliding behavior we're replacing.

3. Change the position property to relative to establish a new positioning context:

   nav {
      position: relative;
      height: 100%;
      overflow-y: auto;
      z-index: 100;
      transition: all.2s ease;
   }

   NOTE: The relative positioning is crucial here—it ensures the z-index property functions correctly, keeping our navigation above the invisible overlay element that allows users to close the menu by clicking outside of it. This creates the intuitive "click anywhere to close" functionality users expect.

4. Save your file and refresh the browser to see the immediate change.
5. You'll notice the navigation now appears at the top of the page instead of sliding from the side. This is progress, but we need to hide it initially to create the slide-down reveal effect.

6. Return to main.css in your editor. Here's where we'll implement a crucial CSS animation technique:

   To hide the navigation initially, we'll manipulate its height. However, there's a technical limitation: CSS transitions cannot animate smoothly from height: 0 to height: auto because browsers can't calculate the intermediate animation frames for an auto value. The professional solution is using max-height instead, which allows us to specify a concrete target value for smooth transitions.

7. In the nav rule, replace height with max-height and set it to 0:

   nav {
      position: relative;
      max-height: 0;
      overflow-y: auto;
      z-index: 100;
      transition: all.2s ease;
   }

8. Since we've collapsed the max-height to zero, we need to hide any content that would overflow beyond these boundaries. Update the overflow property:

   nav {
      position: relative;
      max-height: 0;
      overflow-y: hidden;
      z-index: 100;
      transition: all.2s ease;
   }

9. Save and refresh your browser. Perfect—the navigation is now hidden, creating a clean initial state.
10. Click the MENU button and observe that nothing happens. This is expected because we haven't updated the checked state behavior to work with our new max-height approach.
11. Switch back to main.css to implement the reveal animation.

12. Find the #nav-checkbox:checked ~ nav rule (this targets the navigation when the checkbox is checked) and replace the left property with our new max-height reveal:

    #nav-checkbox:checked ~ nav {
       max-height: 30em;
    }

    NOTE: The 30em value is intentionally larger than our navigation's actual content height. This ensures the animation completes smoothly regardless of content size. Through testing across different screen sizes and content volumes, 30em provides reliable results while maintaining performance.

13. Save your changes and refresh the browser to test the new functionality.

14. Click the MENU button to see your navigation slide down smoothly from the top. The animation works beautifully, but let's make two refinements:

    • The NYC logo disappears when the menu opens—we want it to slide down naturally with the page content instead of vanishing
    • The animation timing feels too quick for the elegant effect we're creating—a slightly slower pace will feel more premium and polished
15. Let's adjust the animation timing first. Return to the nav rule in main.css.

16. Modify the transition duration for a more refined feel:

    nav {
       position: relative;
       max-height: 0;
       overflow-y: hidden;
       z-index: 100;
       transition: all .5s ease;
    }

17. Save and refresh your browser to test the improved timing.

18. Click the MENU button to experience the more deliberate, professional animation pace.

Repositioning the Logo for Integrated Animation

The final step involves fixing the NYC logo positioning so it moves gracefully with the page content rather than disappearing. This requires understanding document flow and how different positioning contexts interact during animations.

1. Switch to index.html in your editor and examine the current structure.
2. Notice the logo currently appears before the nav element in the HTML structure. For our slide-down effect to work properly, the logo needs to be positioned after the navigation in the document flow, so it moves with the rest of the page content.
3. Select the entire NYC logo image tag and cut it from its current position.

4. Paste it immediately after the closing nav tag, positioning it with the main page content:

   </nav>
   <img src="img/nyc-logo.svg" class="nyc-logo" ALT="NYC Logo">
   
   <h1>New York City</h1>

5. Save the HTML file and refresh your browser to test the change.
6. Click the MENU button. The logo is still hidden because the current CSS positioning doesn't account for the new document structure. We need to update the logo's styling.
7. Switch to main.css and locate the general .nyc-logo rule (outside any media queries).
8. The logo currently uses absolute positioning, fixing it 15px from the top of the screen. We'll change this to use float positioning, which will allow it to flow naturally with the document while maintaining its left-side placement relative to the MENU button.

9. Replace the positioning properties in the .nyc-logo rule:

   .nyc-logo {
      width: 75px;
      float: left;
      margin-top: 15px;
      margin-left: 20px;
   }

10. Save your changes and refresh the browser to test the mobile navigation.
11. Test the slide-down functionality—it should now work perfectly with the logo sliding down naturally with the content.
12. Now resize your browser window to desktop width (above 700px) to check the desktop navigation styling.
13. You'll notice the logo positioning is broken in desktop view. This happens because we modified the general rule that affects all screen sizes. We need to restore the absolute positioning specifically for desktop layouts.
14. Return to main.css and find the min-width: 701px media query (this targets desktop screens).

15. After the existing nav ul li rule within this media query, add a desktop-specific logo positioning rule:

    .nyc-logo {
       position: absolute;
       top: 15px;
       left: 20px;
       margin: 0;
    }

16. Save your file and refresh the browser to verify the desktop logo positioning is restored.
17. Test both responsive breakpoints: resize to mobile width for the slide-down navigation, then back to desktop width for the horizontal navigation bar. Both should display perfectly.

18. After clicking the MENU button in mobile view, you'll notice the button itself disappears. This is acceptable UX since users have multiple ways to close the navigation (the close button within the menu or clicking anywhere on the page). However, if you prefer the menu button to slide down with the content for maximum visibility, the bonus section will show you how to implement this enhancement.

Bonus: Making the MENU Button Slide with the Page

For the ultimate polished experience, you can make the MENU button slide down with the page content, maintaining constant access to navigation control. This technique mirrors the logo positioning strategy.

1. Open index.html in your editor and locate the menu button label around line 14.
2. Select the entire menu-button label line and cut it from its current position.

3. Paste it immediately after the nyc-logo image tag to group it with the page content:

   <img src="img/nyc-logo.svg" class="nyc-logo" ALT="NYC Logo">
   <label for="nav-checkbox" class="menu-button">MENU</label>

4. Save the HTML file and switch to main.css.

5. Locate the .menu-button rule within the max-width: 700px media query and update it to use float positioning:

   .menu-button {
      float: right;
      margin-top: 10px;
      margin-right: 10px;
      color: #fff;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
   }

6. Save your changes and refresh the browser to test the enhanced functionality.

7. Click the MENU button and observe that it now slides down with the page content, remaining visible and accessible throughout the navigation interaction. This creates the most user-friendly experience possible, giving users maximum control over the interface.