ساخت تب های شناور در طراحی وب سایت

ساخت تب های شناور در طراحی سایت در این مقاله می آموزیم که چطور با استفاده از 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;}قدم سوم : حال کد جاوا اسکریپت را اضافه کنید.مثال ساخت تب شناور :"> <!DOCTYPEhtml> <html> <head> "> <metaname="viewport"content="width=device-width,initial-scale=1"> <style> *{box-sizing:border-box} body{font-family:"Lato",sans-serif;} /*Stylethetab*/ .tab{ float:left; border:1pxsolid#ccc; background-color:#f1f1f1; width:30%; height:300px; } /*Stylethebuttonsinsidethetab*/ .tabbutton{ display:block; background-color:inherit; color:black; padding:22px16px; width:100%; border:none; outline:none; text-align:left; cursor:pointer; font-size:17px; } /*Changebackgroundcolorofbuttonsonhover*/ .tabbutton:hover{ background-color:#ddd; } /*Createanactive/current"tabbutton"class*/ .tabbutton.active{ background-color:#ccc; } /*Stylethetabcontent*/ .tabcontent{ float:left; padding:0px12px; border:1pxsolid#ccc; width:70%; border-left:none; height:300px; display:none; } /*Clearfloatsafterthetab*/ .clearfix::after{ content:""; clear:both; display:table; } </style> </head> <body> HoverTabs"> HoverTabs Movethemouseoverabuttoninsidethetabbedmenu:"> Movethemouseoverabuttoninsidethetabbedmenu: "> <divclass="tab"> London</button>"> <buttonclass="tablinks"="openCity(event,'London')">London</button> Paris</button>"> <buttonclass="tablinks"="openCity(event,'Paris')">Paris</button> Tokyo</button>"> <buttonclass="tablinks"="openCity(event,'Tokyo')">Tokyo</button> "> "> <divid="London"class="tabcontent"> London"> London LondonisthecapitalcityofEngland."> LondonisthecapitalcityofEngland. "> "> <divid="Paris"class="tabcontent"> Paris"> Paris ParisisthecapitalofFrance."> ParisisthecapitalofFrance. "> "> <divid="Tokyo"class="tabcontent"> Tokyo"> Tokyo TokyoisthecapitalofJapan."> TokyoisthecapitalofJapan. "> "> <divclass="clearfix"> functionopenCity(evt,cityName){ vari,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"; } </body> </html> توجه:بخشساختتبدروبسایترامطالعهکنید.