ساخت تب های شناور در طراحی سایت
در این مقاله می آموزیم که چطور با استفاده از CSS و جاوا اسکریپت، tab ها را به شکل شناور (hover) تغییر دهید.
ساخت تب های شناور عمودی در طراحی وب سایت
قدم اول : کد HTML را اضافه کنید.
مثال :
<div class="tab">
<button class="tablinks" ="openCity(event, 'London')">London</button>
<button class="tablinks" ="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" ="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
از دکمه ها برای باز کردن محتوای خاصی از یک Tab استفاده کنید . تمام مولفه های با استفاده از class="tabcontent" بصورت پیشفرض پنهان میشوند ( با کد های CSS و JS ). زمانیکه کاربر روی یک دکمه کلیک میکند محتوای tab ای باز می شود که مربوط به این دکمه می باشد.
قدم دوم : کد CSS اضافه کنید. محتویات tab و دکمه ها را فرم دهید.
مثال :
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
.Paragraph {
text-align: center;
font-weight: bold;
font-size: 20px;
color: red;
}
.H {
text-align: center;
color: red;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
display: none;
}
/* Clear floats after the tab */
.clearfix::after {
content: "";
clear: both;
display: table;
}
قدم سوم : حال کد جاوا اسکریپت را اضافه کنید.
Movethemouseoverabuttoninsidethetabbedmenu:
LondonisthecapitalcityofEngland.
ParisisthecapitalofFrance.
TokyoisthecapitalofJapan.
