ساخت tab های تمام صفحه در وب سایت

ساخت tab های تمام صفحه در وب سایت

آموزش طراحی سایت

ساخت tab های تمام صفحه در وب سایت

در این مقاله می آموزیم که چطور با استفاده از CSS و جاوا اسکریپت، tab هایی ایجاد کنیم که تمام کل صفحه مرورگر را در بر گیرند.

ساخت One Page Tab در وب سایت

قدم اول : کد HTML را اضافه کنید.
مثال :

<button class="tablink" ="openPage('Home', this, 'red')">Home</button>

<button class="tablink" ="openPage('News', this, 'green')" id="defaultOpen">News</button>

<button class="tablink" ="openPage('Contact', this, 'blue')">Contact</button>

<button class="tablink" ="openPage('About', this, 'orange')">About</button>

<div id="Home" class="tabcontent">

<h3>Home</h3>

<p>Home is where the heart is..</p>

</div>

<div id="News" class="tabcontent">

<h3>News</h3>

<p>Some news this fine day!</p>

</div>

<div id="Contact" class="tabcontent">

<h3>Contact</h3>

<p>Get in touch, or swing by for a cup of coffee.</p>

</div>

<div id="About" class="tabcontent">

<h3>About</h3>

<p>Who we are and what we do.</p>

</div>

دکمه هایی ایجاد کنید تا با استفاده از آنها بتوانید محتویات tab خاصی را باز کنید. تمام مولفه های با class="tabcontent" بصورت پیش فرض محو هستند ( با استفاده از CSS و Javascript). زمانیکه کاربر روی دکمه کلیک می کند محتویات tab ای باز می شود که مربوط به همان دکمه می باشد.

قدم دوم : کد CSS را اضافه کنید. به لینک ها و محتویات tab فرم دهید (تمام صفحه).
مثال :

/* Set height of body and the document to 100% to enable "full page tabs" */

body, html {

height: 100%;

margin: 0;

font-family: Arial;

}

/* Style tab links */

.tablink {

background-color: #555;

color: white;

float: left;

border: none;

outline: none;

cursor: pointer;

padding: 14px 16px;

font-size: 17px;

width: 25%;

}

.tablink:hover {

background-color: #777;

}

/* Style the tab content (and add height:100% for full page content) */

.tabcontent {

color: white;

display: none;

padding: 100px 20px;

height: 100%;

}

#Home {background-color: red;}

#News {background-color: green;}

#Contact {background-color: blue;}

#About {background-color: orange;}

قدم سوم : برای ساخت نهایی تب های تمام صفحه، کد جاوا اسکریپت زیر را وارد کنید.

مثال ساخت منو تمام صفحه :

جهت مشاهده کدها برروی دوره آموزش طراحی سایت کلیک نمایید.