Tabbed Navigation
How do I make an tabbed navigation?
What is a tabbed navigation? How do you make a tabbed navigation? This script and codes were developed by Peter Appleyard on 06 October 2022, Thursday.
Tabbed Navigation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tabbed Navigation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="topBar"></div>
<nav class="mainNav"> <ul> <li><a class="first" href="#">Legal Services</a></li> <li><a class="second" href="#">Testimonials</a></li> <li><a class="third selected" href="#">About Us</a></li> <li><a class="fourth" href="#">Blog</a></li> <li><a class="fifth" href="#">Contact Us</a></li> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Tabbed Navigation - Script Codes CSS Codes
body { margin: 0; padding: 0; position: relative;
}
.topBar { background-color: #3b7cca; width: 100%; height: 50px; position: relative; z-index: 100;
}
.mainNav { position: relative;
}
.mainNav ul { margin: -2px 0 0 50px; padding: 0;
}
.mainNav ul li { list-style-type: none; display: block; float: left;
}
.mainNav ul li a { padding: 80px 25px 15px 25px; background-color: #3b7cca; display: block; position: relative; -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); box-shadow: 0 0 12px rgba(0, 0, 0, 0.5); text-decoration: none; margin-left: -2px; z-index: 20; color: #FFF;
}
.mainNav ul li a:hover { background-color: #2d64a5;
}
.mainNav ul li a.second { background-color: #6a92d3;
}
.mainNav ul li a.second:hover { background-color: #4375c7;
}
.mainNav ul li a.fourth { background-color: #8ea9dd;
}
.mainNav ul li a.fourth:hover { background-color: #678bd1;
}
.mainNav ul li a.fifth { background-color: #6a92d3;
}
.mainNav ul li a.fifth:hover { background-color: #4375c7;
}
.mainNav ul li a.selected { padding-top: 90px; z-index: 30;
}Tabbed Navigation - Script Codes JS Codes
//selected on click
$( "a" ).click(function() { $("a").removeClass( "selected" ); $( this ).toggleClass( "selected" );
});
| Developer | Peter Appleyard |
| Username | whodaman |
| Uploaded | October 06, 2022 |
| Rating | 3 |
| Size | 2,606 Kb |
| Views | 12,144 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
| Name | Size |
| A Pen by Peter Appleyard | 15,429 Kb |
| Slicknav testing | 7,329 Kb |
| Isotope asc desc sorting | 3,298 Kb |
| Fox Grid | 4,120 Kb |
| Responsive Drop Down Menu | 4,779 Kb |
| Builtform Flexbox Grid | 3,693 Kb |
| Datepicker input for businesscatalyst, with age limitation | 26,706 Kb |
| Jquery.slimmenu.js testing | 5,054 Kb |
| LiScroll 1.0 fluid | 3,374 Kb |
| Waypoints Menu Colour Change | 12,183 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
| Name | Username | Size |
| Multi-step GSAP animation | Acacheung | 2,668 Kb |
| CardMove | Thompsonemerson | 3,699 Kb |
| Long Shadow Button | Uixcrazy | 3,550 Kb |
| FontAwesome icons with animation | Nicotinell | 2,083 Kb |
| Import shader in three.js | Khangeldy | 2,636 Kb |
| Atom | Bhlaird | 1,932 Kb |
| Update CSS Variables with JS | Wesbos | 2,335 Kb |
| Console fun | Dviate | 1,500 Kb |
| Falling Down the Rabbit Hole | Rachelnabors | 4,578 Kb |
| Word Wrap Algorithm for Multiline Canvas Text | Peterhry | 2,349 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!