invitation india
Create Navigation Tabs using HTML, CSS, JS
Vertical Tabs HTML Code
Vertical Tab Example :
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_tabulators_sidenav
Our Code: https://jsfiddle.net/abonzer/etsbu4pm/
<!DOCTYPE html> <html> <head> <style> body { font-family: Verdana,sans-serif; font-size: 15px; line-height: 1.5; margin: 0; } h2 { font-style: oblique; font-weight: 400; margin: 10px 0; font-size: 20px; font-family: "Segoe UI",Arial,sans-serif; } div { display: block; } .red { color:#fff!important; background-color:#f44336!important; } .sidenav a { text-decoration:none!important; padding: 4px 2px 4px 16px; display:block; } .sidenav{ height:100%; width:200px; color: #000!important; background-color: #f1f1f1!important; position:fixed!important; z-index:1; overflow:auto; padding:4px 2px 4px 16px; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important; } .sidenav a:hover { background-color:#ccc; color:#000; } </style> </head> <body> <nav class="sidenav" style="width:160px"> <div style="padding:0.01em 16px;"> <h2>Email Tracker</h2> </div> <a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'How to use')" style=" color: #333333;">How to use</a> <a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'Track Mail')" style=" color: #333333;">Track Mail</a> <a href="javascript:void(0)" class="tablink" onclick="openCity(event, 'Tracking ID')" style=" color: #333333;">Tracking ID</a> </nav> <div style="margin-left:160px"> <div id="How to use" class="city" style="padding: 8px 72px!important; display:none;"> <h2>How to use Email Tracking Feature</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div id="Track Mail" class="city" style="padding: 8px 72px!important; display:none;"> <h2>Track Email Read Receipts</h2> <p>Paris is the capital of France.</p> <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p> </div> <div id="Tracking ID" class="city" style="padding: 8px 72px!important; display:none;"> <h2>Add your Analytics ID</h2> <p>Tokyo is the capital of Japan.</p> <p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> </div> <script> function openCity(evt, cityName) { var i, x, tablinks; x = document.getElementsByClassName("city"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < x.length; i++) { tablinks[i].className = tablinks[i].className.replace(" red", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " red "; } </script> </body> </html>
No comments: