Адаптивное меню навигации с вкладками - PullRequest
Новая
       5

Адаптивное меню навигации с вкладками

0 голосов
/ 13 сентября 2018

Я работаю через вкладку W3Schools и разделы меню навигации. Я создал навигационное меню с вкладками, которое я хотел бы сделать адаптивным, но не смог понять, как это сделать. Я верю, что это будет связано с использованием запроса @media, но я точно не знаю, как это сделать. Ниже мой код. Некоторая помощь будет высоко ценится!

HTML: 

<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Red')">Red</button>
<button class="tablinks" onclick="openCity(event, 'Blue')">Blue</button>
<button class="tablinks" onclick="openCity(event, 'Green')">Green</button>
</div>
</div>

<div id="Red" class="tabcontent">
<p>Test</p>
<p><b><ins>2018</ins></b></p>
<ul>
<li><a href=#>Test1</a></li>
</div>

<div id="Blue" class="tabcontent">
<p>Test2</p> 
</div>

<div id="Green" class="tabcontent">
<p>Test3</p>
</div>

<script>
function openCity(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";
}
</script>

CSS: 

 /* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: black;
max-width: 75%;
text-align: center;
margin: auto;
}

/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 20px;
width: 33.1%;
color: white;
font-weight: bold;
font-family: arial;
}

/* Change background color of buttons on hover */
.tab button:hover {
background-color: slategray;
}

/* Create an active/current tablink class */
.tab button.active {
background-color: red;
}

/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
font-size: 18px;
}
...