Merhaba Arkadaşlar
Bu gün sizlerle şık ve efektif bir menünün nasıl yapıldığını inceleyeceğiz.
Öncelikle bir navigation sınıflı div oluşturuyoruz.
Sonra klasik ul, li kullanarak kaç adet menümüz olacaksa onu ve ikonlarını belirliyoruz. Dikkat edilmesi gereken nokta spanların içine ikonlarımız ve yazımızın gelecek olması.
Ben ionicon sitesinden faydalandığım için html sayfamda script tagıyla iconları çağırıyorum.
Artık css kodlamalarımıza geçelim.
Ben font olarak pappins kullanacağım bu yüzden css sayfamın başında ppppinsi çağırıp import ediyorum. Ardından font-family ile yazı tipim olarak belirliyorum.
Menümüzdeki yeşil top sayfanın dışında kalacağı için body divimizin sergilenmesini ortalıyoruz.
Navigation divimizin pozisyonunu relative ile göreceli olarak konumlandırıyoruz. Genişliğimizi 5 adet kullanacağım için 400 ayarlıyoruz. Ardından esnek yapıların kolay yönetimi için display'ı flex yapıyoruz.
Navigaation'daki ul'un genişliğinide 350 yapıyoruz ki divimizden çıkmasın.
Ul deki li yi relative yapıp listeleme sitili yok yapıyoruz. Önemli olan yer z-index:1 dir.
Şimdi ise icon ve yazılarımızı merkezi olarak konumlandırıp font genişliğini veriyoruz. Burada yarım saniyelik transition tanımlıyoruz.
Divimize tıklandığında a nın içindeki iconlarımızın yeri değişmesi için transform ile y ekseninde hareket etsin diyoruz.
Burada position'u absolute ayarlayıp menü yazılarımızın genişliği gibi özelliklerini verip opacity'i 0 yapıyoruz. Böylelikle tıklama yapılmadığında gözükmüyor.
Şimdi ise tıklandığında ne yapılacağını belirlemek için li.active yapıp ardından yazılarımıza opacity:1 ekleyerek görünür yapıp yerini güncelliyoruz.
Sıra geldi yeşil topumuzu yapmaya.
Pozisyonu absolute yapıp büyüklük, boşluk gibi tanımlamalar yapıp gecikmemizi yarım saniye olarak ayarlıyoruz.
Ardından yeşil topun solunda ve sağında bulunan arka beyaz yerin ovalliğini düzenliyoruz.
Artık yeşil topumuzun kaç px hareket etmesini tanımlamak için js ye bağlayacağımız alanı yapıyoruz.
Yeşil topumuzu x ekseninde kaç px kaydıracağımızı belirleyeceğiz ancak px değerini javascript ile vereceğiz.
Java script ile kaç px kaydıracağımızı vermek için ve menüye tıklandığında hareket için html sayfamıza döndük.
--position yerine 70 px kaydırma yapacağımız için 70 ile çarpıp yanına px yazdırdık. Ve işlem tamam.
İyi Forumlar
Bu gün sizlerle şık ve efektif bir menünün nasıl yapıldığını inceleyeceğiz.
Öncelikle bir navigation sınıflı div oluşturuyoruz.
Sonra klasik ul, li kullanarak kaç adet menümüz olacaksa onu ve ikonlarını belirliyoruz. Dikkat edilmesi gereken nokta spanların içine ikonlarımız ve yazımızın gelecek olması.
Kod:
<div class="navigation">
<ul>
<li class="list active">
<a href="#">
<span class="icon">
<ion-icon name="home-outline"></ion-icon>
</span>
<span class="text">Home</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="person-circle-outline"></ion-icon>
</span>
<span class="text">Profile</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="chatbox-outline"></ion-icon>
</span>
<span class="text" >Message</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="camera-outline"></ion-icon>
</span>
<span class="text" >Photos</span>
</a>
</li>
<li class="list">
<a href="#">
<span class="icon">
<ion-icon name="settings-outline"></ion-icon>
</span>
<span class="text" >settings</span>
</a>
</li>
<div class="indicator"></div>
</ul>
</div>Ben ionicon sitesinden faydalandığım için html sayfamda script tagıyla iconları çağırıyorum.
Kod:
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>Artık css kodlamalarımıza geçelim.
Ben font olarak pappins kullanacağım bu yüzden css sayfamın başında ppppinsi çağırıp import ediyorum. Ardından font-family ile yazı tipim olarak belirliyorum.
CSS:
@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
:root
{
--clr: #222327;
}Menümüzdeki yeşil top sayfanın dışında kalacağı için body divimizin sergilenmesini ortalıyoruz.
CSS:
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: var(--clr);
}Navigation divimizin pozisyonunu relative ile göreceli olarak konumlandırıyoruz. Genişliğimizi 5 adet kullanacağım için 400 ayarlıyoruz. Ardından esnek yapıların kolay yönetimi için display'ı flex yapıyoruz.
CSS:
.navigation
{
position: relative;
width: 400px;
height: 70px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}Navigaation'daki ul'un genişliğinide 350 yapıyoruz ki divimizden çıkmasın.
CSS:
.navigation ul
{
display: flex;
width: 350px;
}Ul deki li yi relative yapıp listeleme sitili yok yapıyoruz. Önemli olan yer z-index:1 dir.
CSS:
.navigation ul li
{
position: relative;
list-style: none;
width: 70px;
height: 70px;
z-index: 1;
}Şimdi ise icon ve yazılarımızı merkezi olarak konumlandırıp font genişliğini veriyoruz. Burada yarım saniyelik transition tanımlıyoruz.
CSS:
.navigation ul li a
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
text-align: center;
font-weight: 500;
}
.navigation ul li a .icon
{
margin-top: 20px;
position: relative;
display:block;
line-height: 75px;
font-size: 1.5em;
text-align: center;
transition: 0.5s;
color: var(--clr);
}Divimize tıklandığında a nın içindeki iconlarımızın yeri değişmesi için transform ile y ekseninde hareket etsin diyoruz.
CSS:
.navigation ul li.active a .icon
{
transform: translateY(-32px);
}Burada position'u absolute ayarlayıp menü yazılarımızın genişliği gibi özelliklerini verip opacity'i 0 yapıyoruz. Böylelikle tıklama yapılmadığında gözükmüyor.
CSS:
.navigation ul li a .text
{
position: absolute;
color: var(--clr);
font-weight: 400;
font-size: 0.87em;
letter-spacing: 0.05em;
transition: 0.5s;
opacity: 0;
transform: translateY(20px);
}Şimdi ise tıklandığında ne yapılacağını belirlemek için li.active yapıp ardından yazılarımıza opacity:1 ekleyerek görünür yapıp yerini güncelliyoruz.
CSS:
.navigation ul li.active a .text
{
opacity: 1;
transform: translateY(26px);
}Sıra geldi yeşil topumuzu yapmaya.
CSS:
.indicator
{
position: absolute;
width: 70px;
top: -50%;
height: 70px;
background: #29fd53;
border-radius: 50%;
border: 6px solid var(--clr);
transition: 0.5s;
}Pozisyonu absolute yapıp büyüklük, boşluk gibi tanımlamalar yapıp gecikmemizi yarım saniye olarak ayarlıyoruz.
Ardından yeşil topun solunda ve sağında bulunan arka beyaz yerin ovalliğini düzenliyoruz.
CSS:
.indicator::before
{
content: '';
position: absolute;
top: 50%;
left: -22px;
width: 20px;
height: 20px;
background: transparent;
border-top-right-radius: 20px;
box-shadow: 0px -10px 0 0 var(--clr);
}
.indicator::after
{
content: '';
position: absolute;
top: 50%;
right: -22px;
width: 20px;
height: 20px;
background: transparent;
border-top-left-radius: 20px;
box-shadow: 0px -10px 0 0 var(--clr);
}Artık yeşil topumuzun kaç px hareket etmesini tanımlamak için js ye bağlayacağımız alanı yapıyoruz.
Yeşil topumuzu x ekseninde kaç px kaydıracağımızı belirleyeceğiz ancak px değerini javascript ile vereceğiz.
CSS:
.navigation ul li.active ~ .indicator {
transform: translateX(var(--position));
}Java script ile kaç px kaydıracağımızı vermek için ve menüye tıklandığında hareket için html sayfamıza döndük.
JavaScript:
<script>
const list = document.querySelectorAll('.list');
const root = document.querySelector(':root');
list.forEach(activeLink);
function activeLink(item, index) {
item.addEventListener('click', function() {
list.forEach((li) =>
li.classList.remove('active'));
this.classList.add('active');
root.style.setProperty('--position', index * 70 + 'px');
});
}
</script>--position yerine 70 px kaydırma yapacağımız için 70 ile çarpıp yanına px yazdırdık. Ve işlem tamam.
İyi Forumlar
