SITERAW

(CSS) Making a Menu Float Vertically

Author Message
Kleader # Posted one week ago
Kleader

Hi

In CSS, how do you make a menu "float" vertically, that is stay with the screen when you scroll up and down?

I'm trying to create a vertically "floating" menu kind of like what you see on this page: https://www.voicemetal.com/news

I'm wondering if it is possible to do in CSS, or if you have to use Javascript?
Any and all help is appreciated.

Ads
Bougnoulz # Posted yesterday
Bougnoulz

Its possible in CSS have a look at the position: fixed; and grid boxes
Kim Jong Un # Posted yesterday
Kim Jong Un

You can use the position: fixed; property. This ensures that the menu remains anchored to a specific position on the screen, but it forces you to hard code absolute values in the CSS which isn't recommended.
Demand3d # Posted yesterday
Demand3d

I don't see a floating menu on the site. Or do you mean the horizontal axis thing? Because that is JS not CSS
Kegon # Posted two hours ago
Kegon

One common approach is using CSS Grid or Flexbox combined with :

position: sticky;

position: sticky; makes the menu "stick" to the viewport once it reaches a defined offset (top: 0; in this case).
Unlike fixed, sticky works within its containing element. If the parent element scrolls out of view, the menu will no longer stick.

It avoids the need for hardcoded values like left or right.
Celeri # Posted two hours ago
Celeri

What Kegon has said, turned into code:

<!DOCTYPE html>

<html>

<head>

  <style>

    body {

      display: grid;

      grid-template-columns: 200px auto; /* Sidebar and content */

    }

    .floating-menu {

      position: sticky; /* Sticks the menu within its parent container */

      top: 0; /* Offset when it becomes sticky */

      background-color: #f1f1f1;

      height: 100vh; /* Occupies full viewport height */

      padding: 10px;

      overflow-y: auto; /* Allows scrolling if content exceeds the height */

    }

    .content {

      padding: 20px;

    }

  </style>

</head>

<body>

  <div class="floating-menu">

    <ul>

      <li><a href="#home">Home</a></li>

      <li><a href="#about">About</a></li>

      <li><a href="#services">Services</a></li>

      <li><a href="#contact">Contact</a></li>

    </ul>

  </div>

  <div class="content">

    <h2>Scroll Down</h2>

    <p>Here's some long content to scroll through...</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

  </div>

</body>

</html>

Do note that this isn't 100% identical to what you are describing. You will need additional CSS for transition timing, etc. Maybe even slight JavaScript, although most of the effects can be achieved in simple CSS.
Kleader # Posted one hour ago
Kleader

Thanks! I will try using sticky with flexboxes. Any good resource on how to use them?
Rel0ad # Posted one hour ago
Rel0ad

Literally the Flexbox tutorial ;) From the very first page of this site.
Kleader # Posted 7 minutes ago
Kleader

LOL! Thanks again, I'll use the search function more often maybe :D
Back to the HTML / CSS forum

Post a reply

Please be kind and courteous in your replies. Don't roast others for no reason.