Menu with following underline
How do I make an menu with following underline?
What is a menu with following underline? How do you make a menu with following underline? This script and codes were developed by António Capelo on 15 December 2022, Thursday.
Menu with following underline - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Menu with following underline</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav role='navigation'> <ul class="menu"> <li> <a href="#"> <span data-title="Home" href="#">Home</span> </a> </li> <li><a href="#"><span data-title="About" href="#">About</span></a></li> <li><a href="#"><span data-title="Stuff" href="#">Stuff</span></a></li> <li><a href="#"><span data-title="Contact" href="#">Contact</span></a></li> <span class="underline"></span> </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>
Menu with following underline - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
* { box-sizing: border-box; font-family: 'Open Sans', sans-serif;
}
body { font-family: Arial; background: url('https://subtlepatterns.com/patterns/zwartevilt.png'); margin: auto 0;
}
nav { font-size: 20px; margin: 0 auto;
}
.menu { overflow: hidden; clear:both; text-align: center; color: ghostwhite; list-style-type:none; width: 100%; padding: 0; margin: 20px auto;
}
ul li { float: left; width: 25%; border-bottom: 1px solid white; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; padding-bottom: 5px;
}
ul li:hover {
}
a { width: 100%; color: ghostwhite; text-decoration: none; display: inline-block; overflow-y: hidden; overflow-x: auto; vertical-align: top; -webkit-perspective: 600px; -ms-perspective: 600px; perspective: 600px; -webkit-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%;
}
a:hover {text-decoration:none;}
a span { text-transform: uppercase ; margin-bottom: 10px; background: url('https://subtlepatterns.com/patterns/zwartevilt.png'); width: 100%; display: block; position: relative; -webkit-transition: all 250ms ease; transition: all 250ms ease; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
a:hover span { opacity:1.0; -webkit-transform: rotateX( 90deg ); transform: rotateX( 90deg );
}
a span:after { content: attr(data-title); display: block; position: absolute; left: 50%; top: 0; font-weight: bold; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: translate3d( -50%, 100%, 0px ) rotateX( -90deg ); transform: translate3d( -50%, 100%, 0px ) rotateX( -90deg );
}
nav { position: relative; width: 600px;
}
.underline { width: 25%; background: white; height: 3px; display: block; position: absolute; bottom: -1px; opacity: 1.0; -webkit-transition: all 0.25s ease-in; transition: all 0.25s ease-in;
}
.underline.hidden { opacity: 0.0;
}
Menu with following underline - Script Codes JS Codes
$(document).ready(function() { console.log('ok antes'); $('li').hover( function(e) { var el = $(e.currentTarget), idx = ($('ul li').index(el)); $('.underline').removeClass('hidden'); $('.underline').animate({ left: idx * 25 + '%' }, 0, 'linear'); }, function(e) { resetPosition($(e.currentTarget)); }); function resetPosition(e) { $('.underline').animate({ left: '0' }, 100, 'linear'); }
})
Developer | António Capelo |
Username | capelo |
Uploaded | December 15, 2022 |
Rating | 3 |
Size | 2,648 Kb |
Views | 6,072 |
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 |
Full-width slider. | 3,886 Kb |
Analog Clock | 2,896 Kb |
8-Bit Avatar | 2,527 Kb |
Room | 5,196 Kb |
Custom checkbox example | 3,495 Kb |
Gif as page background | 3,521 Kb |
Menu with following underline | 2,648 Kb |
Max-height transition | 2,643 Kb |
React Boilerplate | 1,457 Kb |
Brainerd scroller | 3,165 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 |
Tab Menus | Zephyr | 3,180 Kb |
CSS Letter animations | Sladix | 2,116 Kb |
Fun animations with CSS3 | Minimalmonkey | 2,360 Kb |
Pattern lab logo | TimPietrusky | 3,666 Kb |
Pure CSS Dial | Lukewatts | 3,018 Kb |
Project Euler Problem 17 | Bfillmer | 2,739 Kb |
CodeCamp Tribute Page | JonathanDeJesus | 6,860 Kb |
CSS only simple parallax scroll | Stanssongs | 3,708 Kb |
Whyutils | LeYvan | 3,752 Kb |
Animated Vertical CSS3 Menu Black | MaCeLMp4 | 2,750 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!