Animated NavBar For Website Using HTML and CSS | Web Development | HTML | CSS | Coding With Roannie
SOURCE CODE YOU TUBE VIDEO
HTML code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Nav Bar</title>
<link rel="stylesheet" href="AnimatedNavBar.css">
</head>
<body >
<nav>
<a href="">
<span> </span>
<span> </span>
<span> </span>
<span> </span>
Home
</a>
<a href="">
<span> </span>
<span> </span>
<span> </span>
<span> </span>
About
</a>
<a href="">
<span> </span>
<span> </span>
<span> </span>
<span> </span>
Contact Us
</a>
<a href="">
<span> </span>
<span> </span>
<span> </span>
<span> </span>
Pages
</a>
</nav>
<h1>Animated Nav Bar </h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, eaque necessitatibus reiciendis esse totam itaque assumenda est, nisi quos dolor corporis, odit facilis et qui placeat. Odit eum totam numquam corporis id sint veritatis iusto exercitationem excepturi hic expedita nulla perspiciatis modi tempora dicta ipsum temporibus eligendi dolorem quidem, nesciunt aspernatur. Magnam aperiam, exercitationem ratione a alias repellat tempore! Aliquam ea quis ut, quod repudiandae impedit, placeat sit doloremque nisi nihil illo blanditiis natus rem accusantium architecto assumenda dolor hic non. Sit vitae iste accusantium recusandae hic facere laborum cupiditate unde eligendi vel animi nisi ducimus, at nostrum nesciunt reiciendis, laudantium suscipit deleniti neque aperiam, minus ipsa doloremque quidem quis! Iure aut deleniti, rerum beatae ex laborum molestias accusamus! Velit pariatur enim exercitationem nihil obcaecati fugit, a amet architecto laudantium ullam cupiditate similique voluptatum quaerat eius necessitatibus dolor, deserunt non doloremque consectetur debitis. Animi explicabo veniam ab fugiat voluptas officiis atque facere repudiandae ullam maiores ipsa sequi architecto debitis possimus, soluta ratione vel doloribus sed omnis, assumenda, nihil exercitationem perspiciatis iure. Facilis in nobis error tempore, maxime ut, dolor enim eaque eum laboriosam quasi minima velit ea esse consequatur quia reiciendis corrupti accusantium! Autem, mollitia voluptates iure, impedit <br> quis eos ratione sequi incidunt alias, maiores quo saepe qui velit nulla commodi optio illum repellat quisquam dignissimos nisi tenetur deserunt? Ea, atque voluptates aliquid delectus hic molestias velit ab? Vel quis, ipsa aperiam praesentium dolorem ducimus, optio necessitatibus rem ea debitis sit eaque doloremque placeat mollitia nobis repellendus, quae quia est autem. Sint perferendis odio facilis minima molestias, incidunt nam perspiciatis eaque? Quam consequatur illum libero cum eos nemo quaerat quo modi veniam, eveniet esse incidunt iure maiores quisquam voluptates reprehenderit qui rerum sed at vel. Deleniti, itaque? Sit veritatis possimus amet id natus temporibus molestiae officia optio praesentium quae? Magnam excepturi officiis iusto nihil sint doloribus sapiente cupiditate quaerat ex nobis assumenda sed architecto dicta, numquam perferendis nostrum neque vel cumque quo non earum mollitia cum? Sapiente aspernatur perspiciatis maiores quia! Rem error expedita eveniet assumenda soluta dolorum. Beatae impedit aliquid, dolore libero quibusdam quia ut inventore doloremque asperiores, ex, id corporis veniam incidunt! Consequatur ut odit nam minima maiores a illo, iste molestiae. Et numquam molestiae commodi ratione a, nostrum ducimus ea repudiandae dignissimos tenetur temporibus amet. Odit nulla omnis quis vitae in doloremque <br> commodi quod inventore nihil molestias velit eligendi enim, rerum tenetur nemo reprehenderit! Expedita voluptates tenetur, aliquam animi consequatur eius dolore culpa recusandae porro sapiente at harum soluta provident vero officiis earum, voluptatum similique quae laboriosam reprehenderit esse veritatis ab nostrum? Ipsum, tempore illum dignissimos minima expedita nulla labore totam dolorum! Ipsum, voluptatibus veritatis soluta nihil earum, repellendus illo animi fugit beatae tempora illum recusandae ab non expedita iusto laboriosam. Iusto ipsam ut dolores consectetur recusandae, illo soluta voluptas harum sequi nemo, labore eius quaerat voluptates. Ea laboriosam impedit voluptatibus expedita sunt cupiditate ullam hic maxime mollitia quaerat omnis laudantium quia, similique esse repellendus eum doloremque harum voluptate. Esse, quisquam nobis dolorem quos natus error odit tempora sunt quas asperiores. Impedit doloribus culpa itaque ratione, blanditiis voluptatibus enim consequatur? Qui natus reiciendis possimus neque, officia earum voluptatibus voluptas officiis laborum enim eius in aliquid, vel ab sed. Quo doloribus doloremque mollitia iste enim quisquam eos neque dolores fugiat culpa sunt consequuntur voluptates deleniti blanditiis inventore nemo quibusdam itaque quidem libero, accusamus magni debitis explicabo iusto reiciendis. Sed molestias atque quam harum velit porro dolor quaerat, eligendi officia quo facere a architecto totam tenetur nobis exercitationem deserunt corporis natus! Cupiditate possimus eligendi similique <br> iste nam veritatis. Provident, illum tempora dolorem culpa sunt perspiciatis repellendus labore ex quibusdam rem vero architecto aperiam sint consectetur ipsa laboriosam voluptates, quas velit cum cupiditate est tenetur magnam amet iusto. Rerum rem a, blanditiis vel eum nisi quis debitis mollitia quisquam repellat officia consectetur nulla quidem aliquam soluta necessitatibus eaque quasi nam numquam voluptatibus esse pariatur id voluptatum molestiae. Illo quod placeat possimus sunt eaque blanditiis rem iure quasi facilis dicta necessitatibus, illum vero, iste magni, unde aspernatur eos molestias doloremque ratione incidunt fugit mollitia? Voluptas placeat dolor molestias ducimus consequatur suscipit animi repudiandae explicabo, asperiores sapiente mollitia tenetur dolorem rem. Esse laborum asperiores laudantium iste est fugiat ad voluptatibus amet tempore iure consequatur, libero ipsa voluptas blanditiis accusamus dolorum eum et! Adipisci impedit eaque quo atque deserunt, perferendis harum assumenda, alias blanditiis accusantium quasi totam debitis velit ducimus libero quae voluptates sed nesciunt rem delectus. Inventore numquam blanditiis nesciunt molestias nemo accusamus rem porro quia modi eligendi expedita tempore maxime reprehenderit quaerat possimus natus minima voluptatibus quas exercitationem rerum, unde distinctio! Dolor voluptatibus cum, saepe placeat, repellat vero consectetur quaerat eligendi magnam nobis fuga illo quae dolorum cupiditate veritatis delectus libero voluptates aut rerum quod? Obcaecati nulla quisquam voluptatibus quod ullam rem delectus, maiores nisi eaque libero, alias accusamus omnis sit rerum illo eveniet, sapiente provident <br> aperiam sequi veritatis excepturi saepe. Est accusamus vitae nostrum beatae. Numquam minus omnis placeat necessitatibus architecto veritatis dolorum ipsum quis fugit provident incidunt facere sequi, accusantium tempore ad, sint dolore, exercitationem saepe expedita totam! Molestias quasi facere necessitatibus alias illo? Tempore, quod tenetur! Tenetur dolor velit, vitae totam earum at porro quisquam nihil non laudantium perferendis voluptates aspernatur amet obcaecati nemo laborum vero assumenda quaerat. Ipsum similique harum commodi, molestiae quae illo labore! Soluta magni dolores in tenetur sapiente, consequuntur libero quae totam, earum ipsam aperiam at molestiae aspernatur laborum nesciunt quidem hic commodi possimus. Itaque tempora doloribus explicabo, repellat laudantium ipsam! Autem culpa laudantium veritatis dicta blanditiis officia odit, corporis libero, quibusdam necessitatibus illum, deleniti neque praesentium? Fuga voluptate excepturi dignissimos corporis non esse modi maiores libero ea! Iure ullam itaque iusto eum dolorem veritatis laborum consectetur quia a cumque accusantium sint eius quae, exercitationem aliquid neque! Consectetur ex voluptatibus numquam quidem distinctio suscipit aspernatur culpa perspiciatis a consequatur, nulla provident rem beatae recusandae maxime, debitis vitae libero necessitatibus id sequi. Neque soluta harum deleniti iste nulla, sapiente excepturi sequi quas natus, voluptatum placeat eos rerum doloribus pariatur, et minus ipsa reprehenderit eius. Deleniti.</p>
</body>
</html>
//CSS CODE START
body{
margin: 0;
padding: 0;
background-color: rgb(14, 19, 41);
}
a{
text-decoration: none;
color:white;
padding: 13px 26px;
position: relative;
display: inline-block;
text-transform: uppercase;
overflow: hidden;
transition: 0.2s;
font-size: 24px;
}
nav{
background-color: black;
padding: 6px 10px ;
position: sticky;
top: 0%;
}
a:hover{
color: rgb(0, 162, 255);
background-color: rgb(58, 53, 53);
box-shadow: 0 0 10px ;
transition-delay:1s ;
}
body h1 , p{
color: whitesmoke;
font-family: Verdana, Geneva, Tahoma, sans-serif;
padding: 15px 30px ;
margin: 25px 30px;
}
a span{
position: absolute;
display: block;
}
a span:nth-child(1){
top: 0;
width: 100%;
left: -100%;
height: 2px;
background: linear-gradient(90deg , transparent , rgb(0, 162, 255) );
}
a:hover span:nth-child(1){
left: 100%;
transition: 1s;
}
a span:nth-child(3){
bottom: 0;
width: 100%;
right: -100%;
height: 2px;
background: linear-gradient(20deg , transparent , rgb(0, 162, 255) );
}
a:hover span:nth-child(3){
right: 100%;
transition: 1s;
transition-delay: 0.5s;
}
a span:nth-child(2){
top: -100%;
width: 2px;
right: 0;
height: 100%;
background: linear-gradient(180deg , transparent , rgb(0, 162, 255) );
}
a:hover span:nth-child(2){
top: 100%;
transition: 1s;
transition-delay: 0.25s;
}
a span:nth-child(4){
bottom: -100%;
width: 2px;
left: 0;
height: 100%;
background: linear-gradient(360deg , transparent , rgb(0, 162, 255));
}
a:hover span:nth-child(4){
bottom: 100%;
transition: 1s;
transition-delay: 0.75s;
}
@media screen and (max-width:700px) {
nav{
display: flex;
flex-direction: column;
}
}