Semantic HTML for animated menus

Developer
Andy Hullinger
Size
2,623 Kb
Views
42,504
  1. Semantic HTML for animated menus Previews
  2. Semantic HTML for animated menus HTML Codes
  3. Semantic HTML for animated menus CSS Codes

How do I make an semantic html for animated menus?

This clever design comes from this source. http://thecodeplayer.com/walkthrough/make-a-simple-navigation-with-hover-transitions. What is a semantic html for animated menus? How do you make a semantic html for animated menus? This script and codes were developed by Andy Hullinger on 15 September 2022, Thursday.

Semantic HTML for animated menus Previews
IQ Test

Semantic HTML for animated menus - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Semantic HTML for animated menus</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * {margin: 0; padding: 0;}
body {	font-size: 12px;	background: #fee;
}
nav {	margin: 100px auto;	background: #fff;	overflow: hidden;	width: 760px;	box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
}
nav li {	width: 120px; border-left: 5px solid #666;	float: left;	cursor: pointer;	list-style-type: none;	padding: 10px 50px 10px 15px;
}
a { display:block; color:#000; text-decoration: none;	font-family: georgia;	font-weight: normal;	font-style: italic;	font-size: 14px;	margin-bottom: 5px;	line-height: 16px;
}
em{ display:block; font-family: 'Lucida Grande';	font-size: 11px; font-style: normal;	color: #999; transition: all 0.1s ease-in;
}
li:hover {	background: #333;	border-left: 5px solid #000;
}
li:hover a{	font-weight: bold;	color: #fff;
}
li:hover em {	color: #ccc;	padding-left: 5px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <nav> <ul>	<li><a href="#">Home<em>Welcome to the site</em></a></li>	<li><a href="#">Shop<em>Visit the store</em></a></li> <li><a href="#">About<em>Who we are</em></a></li>	<li><a href="#">Feedback<em>Help us improve</em></a></li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Semantic HTML for animated menus - Script Codes CSS Codes

* {margin: 0; padding: 0;}
body {	font-size: 12px;	background: #fee;
}
nav {	margin: 100px auto;	background: #fff;	overflow: hidden;	width: 760px;	box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
}
nav li {	width: 120px; border-left: 5px solid #666;	float: left;	cursor: pointer;	list-style-type: none;	padding: 10px 50px 10px 15px;
}
a { display:block; color:#000; text-decoration: none;	font-family: georgia;	font-weight: normal;	font-style: italic;	font-size: 14px;	margin-bottom: 5px;	line-height: 16px;
}
em{ display:block; font-family: 'Lucida Grande';	font-size: 11px; font-style: normal;	color: #999; transition: all 0.1s ease-in;
}
li:hover {	background: #333;	border-left: 5px solid #000;
}
li:hover a{	font-weight: bold;	color: #fff;
}
li:hover em {	color: #ccc;	padding-left: 5px;
}
Semantic HTML for animated menus - Script Codes
Semantic HTML for animated menus - Script Codes
Home Page Home
Developer Andy Hullinger
Username andyhullinger
Uploaded September 15, 2022
Rating 3.5
Size 2,623 Kb
Views 42,504
Do you need developer help for Semantic HTML for animated menus?

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!

Andy Hullinger (andyhullinger) Script Codes
Name
Landing Page Demo
Clean SVG Map of USA
Simple photo captions
Hello Kitty Puppet Example TweenMax
Simple animated infographic
Example Responsive Resume
CSS type and layout - discrete elements
My Quote Assignment
Solved By Flexbox - an excerpt
Banner Example
Create amazing love letters 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!