Navigation

Developer
Miro Karilahti
Size
2,298 Kb
Views
62,744
  1. Navigation Previews
  2. Navigation HTML Codes
  3. Navigation CSS Codes
  4. Navigation JS Codes

How do I make an navigation?

It's a navigation bar. Not much to say.. What is a navigation? How do you make a navigation? This script and codes were developed by Miro Karilahti on 07 July 2022, Thursday.

Navigation Previews
IQ Test

Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Navigation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--In case you're wondering the texts are in beautiful language of Finnish-->
<nav> <ul> <li><a href="#">Ensimmäinen</a></li> <li class="active"><a href="#">Toinen</a></li> <li><a href="#">Kolmas</a></li> <li><a href="#">Neljäs</a></li> <li><a href="#">Viides</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>

Navigation - Script Codes CSS Codes

@import url('http://fonts.googleapis.com/css?family=Dosis:400,700');
*{ margin: 0; padding: 0;
}
body{ background: #f0f0f0;
}
nav{ width: 90%; margin: 2% 5%; text-align: center;
}
nav ul{ background: #d43; border-radius: 3px; padding: 12px; list-style: none;
}
nav li{ /* Height is needed because ".active:after" would otherwise expand the height and make the navigation look extremely stupid */ height: 32px; display: inline-block; border-right: 1px solid rgba(0,0,0,.1); padding: 4px 18px;
}
nav li:first-of-type{ border-left: 1px solid rgba(0,0,0,.1);
}
nav a{ display: block; border-bottom: 1px solid transparent; padding: 4px; font-family: 'Dosis', sans-serif; font-size: 120%; text-decoration: none; color: rgba(255,255,255,.7);
}
[type="text"]{ width: 100px; background: rgba(255,255,255,.9); display: block; margin-bottom: 1px; border: 0; padding: 4px 4px; font-size: 75%; color: #444;
}
nav li:not(.active):hover a{ border-bottom: 1px solid rgba(255,255,255,.5); color: rgba(255,255,255,.9);
}
nav .active a{ color: #fff;
}
nav .active:after{ content: ''; width: 0; height: 0; display: block; position: relative; margin: 14px auto; border: 10px solid transparent; border-top: 8px solid #d43;
}

Navigation - Script Codes JS Codes

$(document).ready(function(){ $('nav li').click(function(){ $('nav li.active').removeClass('active'); $(this).addClass('active'); });
});
Navigation - Script Codes
Navigation - Script Codes
Home Page Home
Developer Miro Karilahti
Username miroot
Uploaded July 07, 2022
Rating 3.5
Size 2,298 Kb
Views 62,744
Do you need developer help for Navigation?

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!

Miro Karilahti (miroot) Script Codes
Name
Color changing text
Corner Ribbons
Button with sliding information
Expanding Photo Stack
Pure CSS Card Deck
Background change in pure CSS
Calendar
Long Shadow Calendar Icon
Login Form
Single element Nexus 5
Create amazing SEO content with AI!

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!