Pure CSS3 Drop-down Navigation with Effects

Developer
Satnam Singh
Size
2,262 Kb
Views
22,264
  1. Pure CSS3 Drop-down Navigation with Effects Previews
  2. Pure CSS3 Drop-down Navigation with Effects HTML Codes
  3. Pure CSS3 Drop-down Navigation with Effects CSS Codes

How do I make an pure css3 drop-down navigation with effects?

I created this Navigation to see some CSS3 Powers with hover effects, which was done with JavaScript or jQuery before. But now we can achieve same results with Pure CSS3 . . What is a pure css3 drop-down navigation with effects? How do you make a pure css3 drop-down navigation with effects? This script and codes were developed by Satnam Singh on 07 October 2022, Friday.

Pure CSS3 Drop-down Navigation with Effects Previews
IQ Test

Pure CSS3 Drop-down Navigation with Effects - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS3 Drop-down Navigation with Effects</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Pure CSS3 Navigation with Effects</h1>
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a><span class="dropBottom"></span> <ul> <li><a href="#">Design</a><span class="dropRight"></span> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Web Design</a><span class="dropRight"></span> <ul> <li><a href="#">XTHML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </li> </ul> </li> <li><a href="#">Articles</a></li> <li><a href="#">Interviews</a></li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>
</nav>
</body>
</html>

Pure CSS3 Drop-down Navigation with Effects - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body { background:url(http://coolblackppt.com/wp-content/uploads/2013/12/Black-denim-seamless-fabric-texture-tile-able-website-backgrounds.jpg);
}
span.dropBottom,span.dropRight {	display: block;	box-shadow:inset 2px 0px 0px #FF9;	position: absolute;	left: 0px;	width:100%;	height: 100%;	top: 0px;
}
span.dropBottom {	box-shadow:inset 0px 2px 0px #FF9;	position: absolute;	width: 100%;	bottom: 0px;
}
h1 {	color:#EDEDED; text-align:center; font-family: 'Open Sans', sans-serif;
}
nav {	display:table;	margin:50px auto; box-shadow:0px 2px 0px #023333;
}
ul {	margin:0;	padding:0;	list-style:none;
}
ul ul {	opacity:0;	position:absolute;	top:160%;	visibility:hidden;	transition:all .4s ease;	-webkit-transition:all .4s ease;
}
ul ul ul {	top:0%;	left:160%;
}
ul ul li:hover > ul {	top:0%;	left:100%;	opacity:1;	visibility:visible;
}
ul li:hover > ul {	opacity:1;	top:100%;	visibility:visible;
}
ul li {	float:left;	position:relative;
}
ul ul li {	float:none;
}
ul li {	background-color:#009C75;	cursor: pointer;
}
ul a {	text-decoration:none;	display:block;	color:#FF9;	padding:10px 15px;	width:6em;	text-align:center; font-family: 'Open Sans', sans-serif; text-shadow: 0px -1px 0px rgba(0,0,0,.2);
}
ul li:hover {	background-color:#007373;
}
ul li a:hover {	background-color:#007373;
}
Pure CSS3 Drop-down Navigation with Effects - Script Codes
Pure CSS3 Drop-down Navigation with Effects - Script Codes
Home Page Home
Developer Satnam Singh
Username rssatnam
Uploaded October 07, 2022
Rating 4.5
Size 2,262 Kb
Views 22,264
Do you need developer help for Pure CSS3 Drop-down Navigation with Effects?

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!

Satnam Singh (rssatnam) Script Codes
Name
Name Hover Bubble Animation
Countdown Timer with Video
CSS Image Parallax Effect
JavaScript Reference Type
A Pen by Satnam Singh
SVG Cone Scribble
Image Viewer
CSS3 Form Page Design
CSS Ribbon
Navigation Slider
Create amazing sales emails 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!