Specific CSS Menu layout

Question

I am dealing with some web development issues and want to know how I can achieve this specific menu layout in HTML, CSS, Javascript. When hovering over "Design" or "Hintergründe" the main area changes and shows the content. My problem is the border, the outline that changes when the active menu point is changed. So I would take 2 div containers for "Design" and "Hintergründe" with borders at left, top and right (no bottom). And the main area has to be a div with borders itself. How can I achieve the mising party of the border where menu-choice and main area blend one into another?

By the way: Are those costum (thin) scrollbars possible in HTML for div containers?

Thx in advance All the best Michael

you could set the top-margin of content div to -1 and then set the bottom border for the menu point to the background-color of the div — Sven Bieder
– Sven Bieder, Commented Oct 18, 2012 at 12:20
The custom scrollbars are possible with the use of javascript/jquery. Take a look here manos.malihu.gr/jquery-custom-content-scroller — Sven Bieder
– Sven Bieder, Commented Oct 18, 2012 at 12:26

Niet the Dark Absol · Accepted Answer · 2012-10-18 12:18:41Z

2

The tab that you click on has the same background colour as the content area, and it has margin-bottom:-1px and a z-index to place it over the content. This makes the background cover up the content area's border, producing the effect you're looking for.

answered Oct 18, 2012 at 12:18

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

amcdrmtt · Accepted Answer · 2012-10-18 12:25:58Z

0

MichiMichbeck gave a good answer regarding the tabs.

For the thin scrollbar try one of the many javascript/jquery plugins that are available. One example is: http://jscrollpane.kelvinluck.com/

You can also change the scrollbar for webkit browser in CSS: http://css-tricks.com/custom-scrollbars-in-webkit/. But the javasript solution would probably be preferred.

answered Oct 18, 2012 at 12:25

amcdrmtt

1,25312 silver badges13 bronze badges

1 Comment

Michbeckable Over a year ago

The thin scrollbars can be done with nanoscroller: jamesflorentino.github.com/nanoScrollerJS

Collectives™ on Stack Overflow

Specific CSS Menu layout

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related