Pulldown CSS3 menu

rasmusjohansson

Rasmus Johansson

3 years ago · 743 views
0 comments 
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Pulldown Navigation</title>
		<style>
			/* Reset 
			========================== */
			* { 
				margin:0; 
				padding:0;
			}
			html {
				font-size:125%;
			}
			body {
				font-size:50%;
			}
			
			
			/* Nav 
			========================== */
			#nav {
				width:500px;
				display:block;
				margin:auto;
				position:relative;
				top:-30px;
				background-color: #444;
				text-align:center;
				-webkit-border-bottom-right-radius: 10px;
				-webkit-border-bottom-left-radius: 10px;
				-moz-border-radius-bottomright: 10px;
				-moz-border-radius-bottomleft: 10px;
				border-bottom-right-radius: 10px;
				border-bottom-left-radius: 10px;
				padding: 4px 0px 8px 0px;
				-webkit-transition:top .5s linear;
			}
			#nav:hover {
				top:0px;
			}
			#nav ul li {
				display:inline;
				margin-right:20px;
			}
			#nav ul li a {
				text-decoration:none;
				font-size: 1.8em;
				color: #fff;
			}
			#nav p {
				color: #999;
				margin-top: 10px;
				font-size: 1.4em;
			}
		</style>	
	</head>
	<body>
		<div id="nav">
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
			<li><a href="#">Link 4</a></li>
			<li><a href="#">Link 5</a></li>
		</ul>
		<p>Hover over here to pull down the menu!</p>
		</div>
	</body>
</html>
Raw

A menu I made from scratch that pulls down on hover. Made with only CSS3 and works best with -webkit- based browsers. Please comment what you think of it! If you decide to use it you might want to fix fonts and colors :)

Tagged: CSS css 3 css3 html html 5 html5 menu pulldown
Comments are only visible to Forrst members. Log in or Request an invite.
3 new notifications