İlk Olarak Menüyü Style.css Den Web Siteye Çağırmamız Gerekir Bunun İçin Yapmamız Gereken Style.css Dosyasınız Bulup Tasarımımızın Ana Şabolununa Bu Kodları Eklemek olacaktır.
Style.css Dosyamızı Açıyoruz Ve Aşağıda Verdiğim Kodlarımızı Ekliyoruz.
Style.css:
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300');
body {
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/escheresque_ste.png');
}
.menu {
display: inline-block;
position: absolute;
width: 56px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 62px;
font-family:'Josefin Sans', sans-serif;
color: #fff;
cursor: pointer;
}
.menu::before,
.menu::after {
position: absolute;
transition: 0.4s ease;
opacity: 0;
pointer-events: none;
}
.menu:before {
content: "M \00a0 \00a0 \00a0 \00a0 \00a0U";
top: -60px;
left: -100%;
width: 215px;
}
.menu:after {
content: "N";
top: 50px;
left: 96%;
}
.menu:hover::before,
.menu:hover::after {
top: -4.3px;
opacity: 1;
transition: 0.2s ease, opacity 0.17s 0.03s ease-in;
}
.bar {
width: 80%;
height: 3px;
background: white;
margin: 0 auto 18px;
transition: transform 0.4s ease;
}
/*.menu:hover .bar {*/
/* transform: rotate(-10deg);*/
/*}*/
Daha Sonra Arkadaşlar Bunun Anasayfa’da Gözükmesi İçin index.html Dosyamızı Bulup Aşağıdaki Verdiğimiz Kodlarımızı Ekliyoruz.
İndex.html:
Yukardaki Verdiğim Kodlarımızı İndex.html ye Eklediğimizde Kaydet Diyoruz Hemen Ardından Anasayfamızı Kontrol Ediyoruz. Ve Çıkacak Olan Görselimiz Yani Css Menümüz Bu Şekildedir.
şekli Aşağıdaki Siteden Bakabilirsiniz
Kaynak:
