Hit enter after type your search item
Home / CSS / A CSS menu with tabs slider: live demo

A CSS menu with tabs slider: live demo

The CSS tabs menu

In this tutorial, a CSS menu is created which is tabbed style and slides as you click a menu item.

The content of different tabs is contained in the same web page, so it can be used for the single page web site.

The navigation can be done by using mouse click or tab key as well while the menu is responsive (mobile friendly) which is an important factor since more visitors access from mobiles/smart phones these days.

The demonstration of menu by using CSS

In this demo, the CSS based navigation is created with six items. As you click any item in the top menu, the tabbed style item will open up with the content inside it. First, have a look at the live demo which is followed by a little detail:

CSS menu

See online demo and code

The CSS used:


 

The markup:


 

A little jQuery code is also used that you may see and get from the demo page code panel (above the </body> tag).

In the markup section, a <nav> tag is used which is assigned the main css-tab and css-tab—active classes. This is followed by using an unordered list tag with “css-tab__list” class that contains list item (<li>s) with css-tab__item class. The titles for the menu items like CSS, jQuery, Bootstrap etc. are given in the <p> tags.

So, the <nav> tag contains all menu items. After closing the main <nav>, the div for the content area starts with the tab-content class.

For the small screen like smart phones, the word for menu items will be shrunk to the single letter which is specified in the data attribute, data-letter.

 

Credit: ettrics

This div height required for enabling the sticky sidebar