Menu test
How do I make an menu test?
What is a menu test? How do you make a menu test? This script and codes were developed by Joseph1401 on 16 September 2022, Friday.
Menu test - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>menu test</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="menu"> <div class="base-option" data-target="Works"> Works </div> <div class="base-option" data-target="Works1"> Tks </div> <div class="base-option" data-target="Works2"> Works </div> <div class="base-option" data-target="Works3"> Works </div> <div class="base-option" data-target="Works4"> Works </div> <div class="expandable" id="Works"> <p> TEST1</p> </div> <div class="expandable" id="Works1"> <p> TEST2</p> </div> <div class="expandable" id="Works2"> <p> TEST3</p> </div> <div class="expandable" id="Works3"> <p> TEST4</p> </div> <div class="expandable" id="Works4"> <p>TEST5</p> </div>
</nav> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Menu test - Script Codes CSS Codes
html, body { height: 100%; margin: 0; padding: 0;
}
.menu { width: 100%;
}
.menu .base-option:nth-child(n+2) { border-right: solid 2px #4d4d4d; border-top: solid 2px #4d4d4d; border-bottom: solid 2px #4d4d4d; border-left: none; width: 20%; width: -webkit-calc(100% / 5); width: -moz-calc(100% / 5); width: calc(100% / 5 );
}
.menu .base-option { position: relative; float: left; text-align: center; margin: 0px; padding: 0; width: 20%; width: -webkit-calc(100% / 5); width: -moz-calc(100% / 5); width: calc(100% / 5); line-height: 8ex; border: solid 2px #4d4d4d; color: rgba(0, 0, 0, 0.74); cursor: pointer; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+64,000000+97&0.65+0,0.58+0,0.39+21,0.39+35,0.37+84,0.58+100 */ background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.39) 21%, rgba(0, 0, 0, 0.39) 35%, rgba(0, 0, 0, 0.38) 64%, rgba(0, 0, 0, 0.54) 97%, rgba(0, 0, 0, 0.58) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.39) 21%, rgba(0, 0, 0, 0.39) 35%, rgba(0, 0, 0, 0.38) 64%, rgba(0, 0, 0, 0.37) 97%, rgba(0, 0, 0, 0.58) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.39) 21%, rgba(0, 0, 0, 0.39) 35%, rgba(0, 0, 0, 0.38) 64%, rgba(0, 0, 0, 0.37) 97%, rgba(0, 0, 0, 0.58) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94000000', endColorstr='#94000000',GradientType=0 ); /* IE6-9 */
}
.menu .base-option:hover { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+64,000000+97&0.65+0,0.39+0,0.39+0,0.23+23,0.22+83,0.37+100 */ background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.39) 0%, rgba(0, 0, 0, 0.23) 23%, rgba(0, 0, 0, 0.22) 64%, rgba(0, 0, 0, 0.22) 83%, rgba(0, 0, 0, 0.34) 97%, rgba(0, 0, 0, 0.37) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.39) 0%, rgba(0, 0, 0, 0.23) 23%, rgba(0, 0, 0, 0.22) 64%, rgba(0, 0, 0, 0.22) 83%, rgba(0, 0, 0, 0.34) 97%, rgba(0, 0, 0, 0.37) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.39) 0%, rgba(0, 0, 0, 0.23) 23%, rgba(0, 0, 0, 0.22) 64%, rgba(0, 0, 0, 0.22) 83%, rgba(0, 0, 0, 0.34) 97%, rgba(0, 0, 0, 0.37) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63000000', endColorstr='#5e000000',GradientType=0 ); /* IE6-9 */
}
.menu .base-option.selected { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+64,000000+97&0.65+0,0.39+0,0.39+0,0.17+23,0.13+83,0.37+100 */ background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.39) 0%, rgba(0, 0, 0, 0.17) 23%, rgba(0, 0, 0, 0.14) 64%, rgba(0, 0, 0, 0.13) 83%, rgba(0, 0, 0, 0.33) 97%, rgba(0, 0, 0, 0.37) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.39) 0%, rgba(0, 0, 0, 0.17) 23%, rgba(0, 0, 0, 0.14) 64%, rgba(0, 0, 0, 0.13) 83%, rgba(0, 0, 0, 0.33) 97%, rgba(0, 0, 0, 0.37) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.39) 0%, rgba(0, 0, 0, 0.17) 23%, rgba(0, 0, 0, 0.14) 64%, rgba(0, 0, 0, 0.13) 83%, rgba(0, 0, 0, 0.33) 97%, rgba(0, 0, 0, 0.37) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63000000', endColorstr='#5e000000',GradientType=0 ); /* IE6-9 */
}
.menu .base-option.selected:after { content: ""; border-left: 20px solid transparent; border-right: 20px solid transparent; margin-left: -40px; bottom: calc(-10px - .25ex); border-top: 10px solid #4d4d4d; position: absolute;
}
.menu .expandable { height: 0px; overflow: hidden; width: 100%; background: rgba(0, 0, 0, 0.37); transition: .25s;
}
.menu .expandable.open { width: 100%; height: 150px;
}
Menu test - Script Codes JS Codes
$(function() { $('.base-option').click(function(e) { e.preventDefault(); var $option = $(this); if($option.hasClass('selected')){ $option.toggleClass('selected'); } else{ $('.base-option.selected').toggleClass('selected'); $option.toggleClass('selected'); } if ($('#' + $option.data('target')).hasClass('open')) { $('.expandable.open').removeClass('open'); $('#' + $option.data('target')).removeClass('open'); } else { if($('.expandable.open').length == 1){ $('.expandable.open').removeClass('open'); $('.base-option').css('pointer-events','none'); setTimeout(function(){ $('#' + $option.data('target')).addClass('open'); $('.base-option').css('pointer-events','auto'); },250); } else{ $('#' + $option.data('target')).addClass('open'); } } });
});
Developer | Joseph1401 |
Username | jmills4122 |
Uploaded | September 16, 2022 |
Rating | 3 |
Size | 3,871 Kb |
Views | 28,336 |
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 |
Joe Test Pen | 2,065 Kb |
Quote Generator | 4,410 Kb |
Diagonal menu Test | 2,382 Kb |
Portfolio | 2,031 Kb |
Tree Processor | 16,330 Kb |
WikiSearch Box | 2,285 Kb |
Current Weather | 3,714 Kb |
Sorty | 2,511 Kb |
Flex Stuff | 2,107 Kb |
Pomodoro | 2,758 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 |
Medium Menu | Lucasmotta | 3,923 Kb |
SVG Animation | Thepheer | 4,793 Kb |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
Magnus 3 | ARocketfish | 7,944 Kb |
Material design - button rainbow circle | Kunukn | 3,652 Kb |
Twitch JSON API | Jvhti | 2,808 Kb |
Revolving Text Landing Page Trial | TimRuby | 2,976 Kb |
Perforated foil | 0x04 | 2,617 Kb |
Local Weather App - FreeCodeCamp | TrevorWelch | 4,134 Kb |
Pattern lab logo | TimPietrusky | 3,666 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!