Membuat Circle Menu Pada CSS - Ya Bagi anda yang ingin belajar bagaimana caranya membuat circle menu (menu melingkar) pada html&css berikut ini langsung kami bagikan source code nya,
1. Pertama Kali yang harus anda lakukan adalah menyimpan file berikut dengan nama myTemplate.html
<html>
<head>
<title>Membuat menu circle dengan bantuan css </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container" style="margin-top:120px;">
<div class="page-title">
<h1> <small>Young Infromatik</small></h1>
</div>
<p></p><br><br>
<div class="menu-container">
<p></p>
<div class="circle-menu-box">
<a href="#" class="menu-item">
<img src="1.jpg" width="100%" >
</a>
<a href="#" class="menu-item">
<img src="3.jpg" width="100%" >
</a>
<a href="#" class="menu-item">
<img src="2.jpg" width="100%" >
</a>
<a href="#" class="menu-item">
<img src="1.jpg" width="100%" >
</a>
<a href="#" class="menu-item">
<img src="2.jpg" width="100%" >
</a>
<a href="#" class="menu-item">
<img src="3.jpg" width="100%" >
</a>
</div>
</div>
</div>
2. dan setelah kerangka tsb dibuat kita akan membuat css nya simpan file senbagai berikut dengan nama style.css
margin:10px auto;
position: relative;
overflow: hidden;
width: 100%;
}
.page-title {
margin:17px auto;
text-align: center;
color:#fff;
font-size: 17px;
}
.page-title h1 {
font-size:40px;
line-height: 1;
}
.page-title a{
color:#ff7777;
text-decoration: none;
}
.page-title a:hover{
text-decoration: underline;
color: #ff3333;
}
.circle-menu-box {
width:900px;
height: 900px;
position: relative;
margin:30px auto;
}
.circle-menu-box a.menu-item {
display: block;
text-decoration: none;
border-radius: 100%;
margin:20px;
text-align: center;
width:145px;
height:145px;
background-color:#fff;
color:#777;
padding:0px;
position: absolute;
font-size: 27px;
padding:2px;
transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
}
.circle-menu-box a.menu-item:hover {
transform:scale(2.1);
-webkit-transform:scale(2.1);
-moz-transform:scale(2.1);
-o-transform:scale(2.1);
color:#fff;
background: #ff3333;
3. Buka File myTemplate.html dengan cara klik kanan dan open with browser.
0 komentar:
Posting Komentar