Home/ Questions/Q 7955745
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T03:47:08+00:00

I’m trying to implement a design for a menu on a web page, but

  • 0

I’m trying to implement a design for a menu on a web page, but I’m stuck.

The concept is this: there are two vertical columns, a menu and a content container. The menu’s background is a linear gradient from white to grey. The content’s background is a linear background from grey to white. The menu contains a navigation list of variable height. When a navigation item is selected, it takes a background that blends with the color of the content container besides it.

Here’s an image to show what I mean:

enter image description here

Here are the constraints:

  • some of the elements in the menu can expand or contract. I don’t know the size of the menu at all times

  • the number of elements can change

  • but the exact gradient colours will not change

  • I don’t know the height of the entire web page / content area

  • non-selected menu items need to not blend into the gradient of the nav container

Is it possible to do this with CSS alone? I looked into playing with the clip property, but it involved me absolutely positioning the elements and the text within them, which I can’t do because I don’t know how many there will be. I can’t think of anything that fits the constraints.

Edit: We could modify the design to keep the non-selected menu items in white, then start the white-to-grey gradient after the menu elements finish. But I can’t see a way to do this, as the columns can vary in height.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you set the background for the whole ul, then you cannot make it transparent again for single ones. So you need to apply it to every single li and set the background-attachment to fixed:

    ul li{
   background: -webkit-linear-gradient(top, red 0%, blue 100%);
   background: -moz-linear-gradient(top, red 0%, blue 100%);
   background-attachment: fixed;
}

    I made a JSFiddle which shows this implemented:

    http://jsfiddle.net/kLD98/1/

    Please look at li.space, which isn’t perfect yet. Maybe someone else has got an idea to fix this, because I guess the gradients look well already.

    Appendix: Please have a look at @Bergis comment and his attached JSFiddle (http://jsfiddle.net/kLD98/9/) which puts the need of using li.space aside.

    • 0