Html ve Css İle Yatay Animasyonlu Menü-10
Bu menü örneğimizde Css ve Html ile yapılmış güzel animasyonlu yatay bir menü tasarımı yapılmaktadır. Örneğimizde menü elemanları animasyonlu bir şekilde isim değiştirmekte ve daha sonra o menü elemanı ile ilgili resim yine animasyonlu bir şekilde menü elemanının üzerinde belirmektedir. Menü css ve html kodları aşağıdaki gibidir. İstenildiği takdirde kodlar üzerinde değişiklik yapılarak değiştirilebilir. Yada sayfa altında bulunan linkten menünün çalışan dosyasını indirebilirsiniz.
Css Kodları:
<style type="text/css"> * { box-sizing: border-box; margin: 0; padding: 0; } *:focus { outline: 0; } html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { align-items: center; background-color: #111111; display: flex; font-family: 'Poppins', sans-serif; justify-content: center; min-height: 100vh; } ul { display: flex; margin: 0 10px; } ul li:before { background-color: #000000; background-size: cover; content: ''; height: 200px; left: -65px; opacity: 0; position: absolute; top: -90px; transform: translateY(100px); transition: opacity 0.5s ease, transform 0.5s ease; width: 200px; z-index: -1; } ul li:nth-child(1):before { background-image: url('https://images.unsplash.com/photo-1564031314476-678354c0b6e7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1228&q=80'); } ul li:nth-child(2):before { background-image: url('https://images.unsplash.com/photo-1563964040780-8605906e3eb6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); } ul li:nth-child(3):before { background-image: url('https://images.unsplash.com/photo-1563906385047-ab0e0c479bc3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1349&q=80'); } ul li:nth-child(4):before { background-image: url('https://images.unsplash.com/photo-1563906399005-2f376fcef08b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1349&q=80'); } ul li:nth-child(5):before { background-image: url('https://images.unsplash.com/photo-1563900409641-e9d427a611bd?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80'); } ul li:nth-child(6):before { background-image: url('https://images.unsplash.com/photo-1563858391804-19ec0c1c50e3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'); } ul li:hover:before { opacity: 0.5; transform: translateY(0); transition-delay: 0.5s; } ul li { list-style: none; margin: 0 10px; position: relative; } ul li a { display: block; font-weight: 600; height: 20px; overflow: hidden; position: relative; text-decoration: none; text-transform: uppercase; } ul li a span { color: #ffffff; display: block; height: 100%; transition: transform 0.5s ease; width: 100%; } ul li a span:nth-child(1) { color: #444444; } ul li:hover a span:nth-child(1) { transform: translateY(-100%); } ul li a span:nth-child(2) { color: #ffffff; } ul li:hover a span:nth-child(2) { transform: translateY(-100%); } </style>
Html kodları:
<body> <ul> <li> <a href="javascript:void(0);"> <span> Anasayfa </span> <span> Anasayfa </span> </a> </li> <li> <a href="javascript:void(0);"> <span> Hakkında </span> <span> Hakkında </span> </a> </li> <li> <a href="javascript:void(0);"> <span> Servisler </span> <span> Servisler </span> </a> </li> <li> <a href="javascript:void(0);"> <span> Özgeçmiş </span> <span> Özgeçmiş </span> </a> </li> <li> <a href="javascript:void(0);"> <span> Takım </span> <span> Takım </span> </a> </li> <li> <a href="javascript:void(0);"> <span> İletişim </span> <span> İletişim </span> </a> </li> </ul> </body>
Bu Yazıya Tepkin Nedir?
+1
+1
+1
+1
+1
+1
+1
<< Önceki Yazı
Sonraki Yazı >>
css açılır menü örnekleri, css dikey açılır menü örnekleri, css dikey menü örnekleri, css menü örnekleri, css menü tasarımları, Css ücretsiz menü örnekleri, css yatay menü örnekleri, dikey akerdion menü örnekleri, html menü örnekleri, icon menü örneği