Merhaba arkadaşlar,
http://www.dapyapi.com.tr/ de sol tarafta yana doğru açılan menüler var. Bunlarda biz sizi arayalım nasıl bir yapıda hazırlanmış? Örnek yada kod konusunda nasıl yardımcı olabilirsiniz?
Ek Olarak: Arkdaşlar lütfen biri yardımcı olabilir mi?
Yana doğru açılan menü |
6 Mesajlar | 1.922 Okunma | ||
- Üyelik 23.12.2012
- Yaş/Cinsiyet 40 / E
- Meslek Yönetici
- Konum Ankara
- Ad Soyad ** **
- Mesajlar 91
- Beğeniler 48 / 2
- Ticaret 0, (%0)
- Üyelik 18.07.2012
- Yaş/Cinsiyet 37 / E
- Meslek Front End Developer
- Konum İstanbul Avrupa
- Ad Soyad S** A**
- Mesajlar 219
- Beğeniler 28 / 66
- Ticaret 0, (%0)
Basit CSS hover mantığı ile yapılır.Hazır yapılmışı da vardır bulursam paylaşırım.
- Üyelik 23.12.2012
- Yaş/Cinsiyet 40 / E
- Meslek Yönetici
- Konum Ankara
- Ad Soyad ** **
- Mesajlar 91
- Beğeniler 48 / 2
- Ticaret 0, (%0)
Valla çok sevinirim
- Üyelik 18.07.2012
- Yaş/Cinsiyet 37 / E
- Meslek Front End Developer
- Konum İstanbul Avrupa
- Ad Soyad S** A**
- Mesajlar 219
- Beğeniler 28 / 66
- Ticaret 0, (%0)
.panelbg {
position: fixed;
top: 50%;
left: 0;
transition: 0.5s;
}
.formbg {
position: fixed;
top: 50%;
left: -200px;
transition: 0.5s;
}
.panelbg:hover {
left: 200px;
}
.panelbg:hover .formbg {
left: 0;
}
.formbg .form {
width: 200px;
background: rgba(0,0,0,0.6);
padding: 20px 10px;
box-sizing: border-box;
}
.formbg .form .form-label{
display: block;
width: 100%;
margin-bottom: 10px;
box-sizing: border-box;
}
.formbg .form .form-input {
padding: 6px;
width: 100%;
box-sizing: border-box;
}
Daha önce yapılmışını görmüştüm,ücretsiz de dağıtılıyordu ama bulamadım.Mantığı anlamanız için basit bir örnek yaptım.
- Üyelik 23.12.2012
- Yaş/Cinsiyet 40 / E
- Meslek Yönetici
- Konum Ankara
- Ad Soyad ** **
- Mesajlar 91
- Beğeniler 48 / 2
- Ticaret 0, (%0)
Çok teşekkür ederim. Peki sağdan yapacak olsak bunu kodda nasıl bir değişiklik yapmak gerekiyor.
Ek Olarak:
Daha önce yapılmışını görmüştüm,ücretsiz de dağıtılıyordu ama bulamadım.Mantığı anlamanız için basit bir örnek yaptım.
Bu açılır kısmı sağdan yaparsak kodda nasıl bir değişikli yapmamız gerekiyor.
Ek Olarak:
sosyalmedya adlı üyeden alıntı
.panelbg {
position: fixed;
top: 50%;
left: 0;
transition: 0.5s;
}
.formbg {
position: fixed;
top: 50%;
left: -200px;
transition: 0.5s;
}
.panelbg:hover {
left: 200px;
}
.panelbg:hover .formbg {
left: 0;
}
.formbg .form {
width: 200px;
background: rgba(0,0,0,0.6);
padding: 20px 10px;
box-sizing: border-box;
}
.formbg .form .form-label{
display: block;
width: 100%;
margin-bottom: 10px;
box-sizing: border-box;
}
.formbg .form .form-input {
padding: 6px;
width: 100%;
box-sizing: border-box;
}
Daha önce yapılmışını görmüştüm,ücretsiz de dağıtılıyordu ama bulamadım.Mantığı anlamanız için basit bir örnek yaptım.
Bu açılır kısmı sağdan yaparsak kodda nasıl bir değişikli yapmamız gerekiyor.
- Üyelik 18.07.2012
- Yaş/Cinsiyet 37 / E
- Meslek Front End Developer
- Konum İstanbul Avrupa
- Ad Soyad S** A**
- Mesajlar 219
- Beğeniler 28 / 66
- Ticaret 0, (%0)
"left" olan yerleri "right" yapın