According to your design you can change the following css code. This simple example will really helpful somewhere in your site. Checkout the live demo by clicking the demo button.
Code for simple tab menu using css:
Code for simple tab menu using css:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Vertical Tab using css </title>
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
.tab {
float: left;
border: 1px solid #ffc107;
background-color: #ffc107;
width: 20%;
height: 100vh;
}
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}
.tab button:hover {
background-color: #ff9800;
}
.tab button.active {
background-color: #ff9800;
}
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ffc107;
width: 80%;
border-left: none;
height: 100vh;
}
</style>
</head>
<body>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Home')" id="defaultOpen">Home</button>
<button class="tablinks" onclick="openTab(event, 'About')">About</button>
<button class="tablinks" onclick="openTab(event, 'Services')">Services</button>
<button class="tablinks" onclick="openTab(event, 'Contact')">Contact</button>
</div>
<div id="Home" class="tabcontent">
<h3>Home</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus justo mauris, sagittis ut lacus sit amet, blandit blandit dui. Nam ut eros risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
<div id="About" class="tabcontent">
<h3>About</h3>
<p>Morbi tristique neque finibus justo consectetur aliquam. Donec in leo vel justo suscipit blandit. Suspendisse lobortis eros orci, et luctus leo volutpat vel. Vestibulum non mauris viverra, pretium sapien ut, tristique justo. Aliquam erat volutpat. Phasellus efficitur quam nec leo finibus sodales. Phasellus sed enim orci. Phasellus viverra, est</p>
</div>
<div id="Services" class="tabcontent">
<h3>Services</h3>
<p>gestas ex. Aliquam rutrum nulla quis sapien consequat lacinia. Phasellus malesuada luctus lobortis. Mauris ac odio luctus, varius velit et, sollicitudin nisi. Phasellus et massa nibh. Sed eleifend enim mauris, vitae accumsan massa tempor ut. Praesent sit amet dolor imperdiet, malesuada urna eu, sodales dui. Donec ut sapien ipsum. In lob</p>
</div>
<div id="Contact" class="tabcontent">
<h3>Contact</h3>
<p>nteger finibus consequat erat, ac auctor magna porttitor et. Phasellus a eros lobortis, tristique magna vel, blandit lectus. Quisque maximus et felis eu aliquam. Aenean blandit sapien vitae ultrices semper. Praesent at nisl eu erat fermentum tristique vel nec lorem. Proin porta orci at risus fermentum dictum. Aenean convallis </p>
</div>
<script>
function openTab(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
</script>
</body>
</html>
0 Comments