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 |
AngularJS Modal Factory | 3,839 Kb |
React Boilerplate | 1,457 Kb |
Room | 5,196 Kb |
8-Bit Avatar | 2,527 Kb |
Gif as page background | 3,521 Kb |
Full-width slider. | 3,886 Kb |
Clock loading | 2,351 Kb |
Custom checkbox example | 3,495 Kb |
Donut Chart example - MorrisJS | 2,385 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 |
Pure CSS albums gallery | Renaudtertrais | 2,978 Kb |
Login with flip 3d animation | Mariusbalaj | 3,014 Kb |
Slick Slider | Wearebold | 5,913 Kb |
Tab Menus | Zephyr | 3,180 Kb |
Siema - add pagination to prototype | Pawelgrzybek | 2,575 Kb |
A Pen by Alex Edwards | Exards | 8,218 Kb |
Responsive slide | Thorien | 2,400 Kb |
Flexbox Test | Icutpeople | 2,486 Kb |
Replace url via jquery | Serluk | 1,429 Kb |
Super Discount | Orrinward | 3,225 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!