Kursus Membuat Web

iklan

Membuat Menu CSS 5

Menu ini dibuat menggunakan HTML 5 dan CSS 3

Gambar Menu
membuat menu css
Lihat Demo ..

Source Code HTML

Buat kode HTML 5 sebagai berikut

Source Code HTML
<!DOCTYPE html>
<html lang="id">
	<head>
		<title>Membuat Menu CSS - Kursus Membuat Web</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="menu.css" media="all">
	</head>
	<body>
		<header class="main-header">
			<a class="logo" href="#"></a>
				<nav>
					<ul class="main-nav">
						<li><a href="#">Home</a></li>
						<li><a href="#">About</a></li>
						<li class="dropdown"><a href="#">Work</a>
							<ul class="drop-nav">
								<li><a href="#">Design</a></li>
								<li><a href="#">Development</a></li>
								<li class="flyout"><a href="#">Photography</a>
									<ul class="flyout-nav">
										<li><a href="#">Nature</a></li>
										<li><a href="#">People</a></li>
										<li><a href="#">Pets</a></li> 
									</ul>
								</li>
								<li><a href="#">Writing</a></li> 
							</ul>
						</li>
						<li><a href="#">Contact</a></li>
					</ul>
				</nav>
		</header>
	</body>
</html>

Source Code CSS

Selanjutnya buat kode CSS 3 sebagai berikut

Source Code CSS
@font-face {
  font-family: 'icomoon';
  src:url('icomoon.eot');
  src:url('icomoon.eot?#iefix') format('embedded-opentype'),
  url('icomoon.woff') format('woff'),
  url('icomoon.ttf') format('truetype'),
  url('icomoon.svg#icomoon') format('svg');
}

body {
  margin: 0;
  background: #ecf0f1;
  color: #fff;
  font-family: sans-serif;
  line-height: 1.5;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0; 
}

.main-header {
  margin: auto;
  width: 75%;
  min-height: 90px;
  padding: 1em 2em;
  border: 2px solid #2675a9;
  border-top: none;
  border-radius: 0 0 5px 5px;
  background: #2980b9;
}

.main-header:after {
  content: " ";
  display: table;
  clear: both;
}

.logo {
  display: block;
  text-decoration: none;
  float: left;
  margin-top: 5px;
}

.logo::before {
  color: #fff;
  content: "\e001";
  font-weight: normal;
  font-style: normal;
  font-size: 2.5em;
  font-family: "icomoon";
  -webkit-font-smoothing: antialiased;
 }

 /* Nav Demo Styles -------------------- */

 .main-nav,
  .drop-nav {
  background: #2c3e50;
}

.main-nav {
  float: right;
  border-radius: 4px;
  margin-top: 8px;
  border: solid 1px #1e2a36;
}

.main-nav > li {
  float: left;
  border-left: solid 1px #1e2a36;
}

.main-nav li:first-child {
  border-left: none;
}

.main-nav a {
  color: #fff;
  display: block;
  padding: 10px 30px;
  text-decoration: none;
 }

 .main-nav a:hover{
  background: #395066;
}

.dropdown,
  .flyout {
  position: relative;
}

.dropdown:after {
  content: "\25BC";
  font-size: .5em;
  display: block;
  position: absolute;
  top: 38%;
  right: 12%;
}

.drop-nav,
  .flyout-nav {
  position: absolute;
  display: none;
}

.drop-nav li {
  border-bottom: 1px solid rgba(255,255,255,.2);
}

.dropdown:hover > .drop-nav,
  .flyout:hover > .flyout-nav {
  display: block;
}

.flyout-nav {
  left: 100%;
  top: 0;
}

.flyout:hover a,
  .flyout-nav {
  background: #395066;
}
Lihat Demo ..

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015