3

Currently i have menu like this:

enter image description here

But I need to add a fill for the selected menu item and the same for home menu item, like next:

enter image description here

My code is:

<head> <meta charset="UTF-8"> <title>Tab</title> <style> .tabs { list-style-type: none; position: relative; } .tabs:after { content: ""; clear: both; display: block; } .tabs li { float: left; } .tabs li>input { display: none; } .tabs li>label { display: inline-block; padding: 8px 30px; } .tabs .tab-content { display: none; position: absolute; width: 100vw; left: 0; } .tabs li>input:checked~.tab-content { display: block; } ul { background: rgb(65, 63, 63); color: white; } .home { background-color: blue; } .order { background-color: green; } .tab-content { padding: 5px; border-top: 2px solid white; } </style> </head> <body> <ul class="tabs"> <li> <input type="radio" name="tabs" id="tab-1" checked> <label for="tab-1" class="home">Home</label> <div class="tab-content home"></div> </li> <li> <input type="radio" name="tabs" id="tab-2"> <label for="tab-2" class="order">Order</label> <div class="tab-content order"></div> </li> </ul> </body>

How i can add fill for selected menu item? Or maybe I need to somehow break the border and increase the height of the selected menu item?

Improve this question

2 Answers 2

Reset to default
1

A solution could be to use a pseudo-element after in your label tag:

.tabs label:after { content: ""; display: none; background-color: inherit; position: absolute; z-index: 10; left: 0; bottom: -2px; height: 2px; width: 100%; } .tabs li>input:checked+label:after { display: block; } 

.tabs {	list-style-type: none;	position: relative; } .tabs:after {	content: "";	clear: both;	display: block; } .tabs li {	float: left; } .tabs li>input {	display: none; } .tabs li>label {	display: inline-block;	padding: 8px 30px;	position: relative; } .tabs .tab-content {	display: none;	position: absolute;	width: 100vw;	left: 0; } .tabs li>input:checked~.tab-content {	display: block; } ul {	background: rgb(65, 63, 63);	color: white; } .home {	background-color: blue; } .order {	background-color: green; } .tab-content {	padding: 5px;	border-top: 2px solid white; } .tabs li>input:checked+label:after {	display: block; } .tabs label:after {	content: "";	display: none;	background-color: inherit;	position: absolute;	z-index: 10;	left: 0;	bottom: -2px;	height: 2px;	width: 100%; }
<ul class="tabs"> <li> <input type="radio" name="tabs" id="tab-1" checked> <label for="tab-1" class="home">Home</label> <div class="tab-content home"></div> </li> <li> <input type="radio" name="tabs" id="tab-2"> <label for="tab-2" class="order">Order</label> <div class="tab-content order"></div> </li> </ul>

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

Comments

1

Here's full working code:

document.querySelectorAll('.tabbar .tabs>li').forEach(function (c){ c.addEventListener('click', function(){ for (var elem of c.parentElement.children) { elem.classList.remove('active'); document.querySelector(elem.getAttribute('page')) .classList.remove('active'); } document.querySelector(c.getAttribute('page')).classList.add('active'); c.classList.add('active'); }); });
body { font-family: sans-serif; } .tabbar .tabs { list-style: none; display: flex; flex-direction: row; background: #aaa; margin: 0 0 2px 0; padding: 0; } .tabbar .pages { list-style: none; display: block; padding: 0; margin: 0; color: #fff; } .tabbar .pages>li { padding: 15px; display: none; } .tabbar .pages>li.active { display: block; } .tabbar .tabs>li { padding: 10px 15px; color: #fff; position: relative; cursor: pointer; } .tabbar .tabs>li.active:after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: inherit; } .tabbar .tabs>li:nth-child(1), .tabbar .pages>li:nth-child(1){ background: blue; } .tabbar .tabs>li:nth-child(2), .tabbar .pages>li:nth-child(2){ background: green; } .tabbar .tabs>li:nth-child(3), .tabbar .pages>li:nth-child(3){ background: red; }
<div class="tabbar"> <ul class="tabs"> <li page="#page-1">First</li> <li page="#page-2" class="active">Second</li> <li page="#page-3">Third</li> </ul> <ul class="pages"> <li id="page-1">Page 1</li> <li id="page-2" class="active">Page 2</li> <li id="page-3">Page 3</li> </ul> </div>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.