Make CSS Tab Menu Without JavaScript

 To improve user experience on the web, sometimes it is useful to add some functionalities such as menu, and one type of menu is the "tab menu". 

Tab menu is used in a way that it sorts content, and when the topic tab is click, content under that topic is shown.

An example is below:


tab 1 tab 2 tab 3

Content to tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit arcu, tincidunt at elit sed, efficitur sagittis mauris. Pellentesque vulputate neque non quam posuere fermentum.

Content to tab 2

Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed maximus ex ex, eu porttitor arcu pretium eget. Nulla sed elementum nunc. 

Content to tab 3

Sed vulputate odio a bibendum pellentesque. Nullam purus sem, accumsan vitae efficitur nec, fermentum non metus.

Problem

The problem is whenever we click a tab, the window will jump down if there is more content than the window can hold, and when this happens, we will have to scroll back up to click the other tabs to continue using this tab menu.

Solution

One solution is to move the tab section to the bottom of the content area, set certain height and "overflow: scroll" for the content area .

Like this:

Content to tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit arcu, tincidunt at elit sed, efficitur sagittis mauris. Pellentesque vulputate neque non quam posuere fermentum.Cras hendrerit fringilla felis, feugiat semper orci eleifend a. Vivamus pharetra ante vel nulla cursus, quis tristique leo tristique. Nunc pharetra lorem erat. Mauris gravida, odio in laoreet convallis, nibh sapien convallis ligula, sit amet convallis orci urna ut mauris. Aenean efficitur vitae ligula finibus luctus.

Content to tab 2

Suspendisse augue turpis, vestibulum vel ipsum eu, feugiat cursus metus. Donec tempus risus lorem, id blandit ipsum rhoncus in. Cras ac elit ligula. et malesuada fames ac ante ipsum primis in faucibus. Sed maximus ex ex, eu porttitor arcu pretium eget. Nulla sed elementum nunc. 

Content to tab 3

Sed vulputate odio a bibendum pellentesque. Nullam purus sem, accumsan vitae efficitur nec, fermentum non metus.Ut sit amet risus viverra diam venenatis pretium. Suspendisse dignissim ex id sodales malesuada. In gravida fermentum nunc a consectetur.

tab 1 tab 2 tab 3

Sample code

<style>
.wrap{
  height:200px;
  overflow:scroll;
  }
.tab div {
  display: none;
}

.tab div:target {
  border:1px red solid;
  display: block;
}
</style>
<div class="tab">

<div id="l4" class = "wrap">
  <h3>Content to tab 1</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit arcu, 
  tincidunt at elit sed, efficitur sagittis mauris. Pellentesque vulputate neque non 
  quam posuere fermentum.Cras hendrerit fringilla felis, feugiat semper orci eleifend a. 
  Vivamus pharetra ante vel nulla cursus, quis tristique leo tristique. Nunc pharetra lorem 
  erat. Mauris gravida, odio in laoreet convallis, nibh sapien convallis ligula, sit amet
  convallis orci urna ut mauris. Aenean efficitur vitae ligula finibus luctus. </p>
</div>

<div id="l5" class = "wrap">
  <h3>Content to tab 2</h3>
  <p>Suspendisse augue turpis, vestibulum vel ipsum eu, feugiat cursus metus. Donec 
  tempus risus lorem, id blandit ipsum rhoncus in. Cras ac elit ligula. et malesuada fames 
  ac ante ipsum primis in faucibus. Sed maximus ex ex, eu porttitor arcu pretium eget. 
  Nulla sed elementum nunc.&nbsp;</p>
</div>

<div id="l6" class = "wrap">
  <h3>Content to tab 3</h3>
  <p>Sed vulputate odio a bibendum pellentesque. Nullam purus sem, accumsan vitae
  efficitur nec, fermentum non metus.Ut sit amet risus viverra diam venenatis pretium. 
  Suspendisse dignissim ex id sodales malesuada. In gravida fermentum nunc a consectetur.</p>
</div>
<a href="#l4">tab 1</a>   
<a href="#l5">tab 2</a>
<a href="#l6">tab 3</a>
</div>

How to Use This Tab Menu Component with WordPress

  1. In the WP post editor, add a custom HTML block on the top of the post.
  2. Copy the <style>...</style> code and paste it in the block from the 1st step.
  3. Add the tab menu html code <div class="tab" ... </div> to where you want to show the tab menu .
  4. Done

Comments

Post a Comment

Popular posts from this blog

How to Make A Reusable Image Slideshow HTML Component With Vanilla JavaScript

Image
The image slide show I am making has no animation. The mechanism for displaying different slide is by using the display CSS property. The image with display none will not show, while the one with display block will. I will start build one that relys on HTML code then I will build one that relys on JavaScipt that renders the slide show onto the webpage. HTML Slideshow Setup A HTML image slide show can follow the following logic: An image is shown and the others are hidden, by defining the CSS display property to "block" to show and "none" to hide. An index is used to control the CSS display property of each slide with the initial index of 1. On initiation, all image tags for the slide show will be given the CSS property correspoding to whether it's shown or not. A left arrow and a right arrow are used to control the index with onclick event handlers. In order to position the left and right control...
Read more

HTML Tags and Inline CSS that Work In Plotly.js Title

When we create a plot object with Plotly.js, we throw in 3 basic parameters in the Plotly object which are the plot container id, data and layout, like this one: Plotly.newPlot('myDiv', data, layout); And in the layont object, there is a property, called title. The title property can be defined with an string, which will simply be just the title text that is going to display on the top of the plot.  I want to style my chart title when I use Plotly.js.; var layout = { title:`Plot Title` } Or in the text object within the title property. var layout = { title:{text:`Plot Title`} } Plot;y'js has some built-in title properties which we can use to style the title, sush as font color, family, size, padding, and position with x or y. var layout = { title: { text:'Plot Title', font: { family: 'Courier New, monospace', size: 24 }, xref: 'paper', x: 0.05, } }; Problems But I want to add a HTML tag...
Read more

How to Type Spaces In HTML Input And Display In the Browser

Image
When we type a space in an input and use it in JavaScript. The space will be recorded as text just like regular texts. Type In Multiple Spaces When we type some text with many spaces and displays the text in the browser, muiltple spaces will be parsed into one space, if they are connected. Type some text with spaces here: <input oninput="show_1.innerHTML = this.value" /><br /> <div id="show_1"></div> What does JavaScript Do to the Spaces? JavaScript does nothing to the spaces. It preservs all the spaces we type. The following code converts spaces into the letter "a". Space is represnted by \x20 in JavaScript. Type some text with spaces here: <input oninput="show_2.innerHTML = this.value.replace(/\x20/g,'a');" /><br /> <div id="show_2"></div> Why doesn't the Spaces Show in the Browser? Because the connected spaces are parsed into one space in HTML. ...
Read more