Blogger Katlanabilir Dikey Menü

   

   Blogger Katlanabilir dikey menü Ile sitenizin tasarımına oldukca profesyonelce bir goruntu eklemiş olacaksınız.

   Blogger Katlanabilir dikey Menüler Ile önemli Diğer sayfalarınıza indirsponsorlu bağlantılar oluşturabilir VEYA kategorilerinizle oluşturacağınız navigasyon menü Ile sayfalarınıza indirsponsorlu bağlantılar oluşturabilirsiniz.

   Bu Ile Üzerine gelince hareket ederek İngilizce göze hoş gelen Bir hareket oluşturuyor.Ayrıca menü başlığına Tıklayarak Tüm indirsponsorlu bağlantılar otomatikman gizlenmektedir.Bu menü CSS kullanılarak oluşturulmuştur.CSS kodları Ile oynayarak sitesi tasarımına Uygun Olan ölçü renkleri kullanabilirsiniz ettik ücret menü.

   Blogger Click Css kodları Ile oluşturulmuş bu Blogger Animasyonlu Dikey Menü Widget kodlarının nasıl göründüğünü çalışıp çalışmadığını testi kodların ettik etmek Click kod deneme penceresini kullanabilirsiniz.

   Blogger Katlanabilir Dikey Menü sitenize Eklemek İçin Kumanda paneli & gt; Residential & gt; Gadget ekle & gt; HTML / Javascript Yolunu izleyin kodları ekleyerek kaydedin ettik.

KODLAR:

& Lt; tarzı & gt;
html, vücut, div, yayılma, uygulama, nesne, iframe,
h1, h2, h3, h4, h5, h6, p blockquote, ön
Bir, kısalt, kısaltması, adresi, büyük, alıntı, kod,
del, dfn, em, img, eklentileri, kbd, q, s, samp,
Küçük, grev, güçlü, alt, sup, tt, var,
b, u, i, merkez,
dl, dt, dd, ol, ul, li
fieldset, biçim, etiket, efsane,
masa, başlık, tbody, tfoot, thead, tr, inci, td,
makale, bir kenara, tuval, detaylar, embed,
şekil, figcaption, altbilgi, başlık, hgroup,
Menü, nav, çıkış, yakut, bölüm, özeti,
Zaman, işareti, ses, video {
 margin: 0;
 padding: 0;
 Sınır: 0;
 font-size: 100%;
 yazı: miras;
 vertical-align: baseline;
}
/ * Blogger Animasyonlu Dikey Menü Widget Bilgi Cafem * /
makale, bir kenara, detaylar, figcaption, şekil,
altbilgi, başlık, hgroup, menü, nav, section {
 display: block;
}
Vücut {
 line-height: 1;
}
ol ul {
 list-style: none;
}
blok alıntı q {
 tırnak: yok;
}
blockquote: önce, blockquote: sonra,
q: q, önce: {sonrası
 İçerik: '';
 içerik: yok;
}
masa {
 border-collapse: collapse;
 border-spacing: 0;
}
html {
  Yükseklik: 100%;
background: rgb (234, 246, 243);
}
Vücut {
  text-align: center;
  vertical-align: orta;
  Yükseklik: 100%;
}
.menu {
  vertical-align: orta;
  genişlik: 300px;
  display: inline-block;
 font-family: 'Kaynak Sans Pro', sans-serif;
  dönüşümü: translate3d (0,0,0);
}
.menu girişi {
  position: absolute;
  Sol: -9999px;
}
.menu #togglemenu: işaretli ~ ul {
  max-height: 300px;
  padding-bottom: 1em;
}
.togglemenu {
background: # FC634B;
Renk: Beyaz;
display: block;
padding: 0.75em;
text-align: center;
İmleç: işaretçi;
font-family: 'entypo', sans-serif;
}
.togglemenu: önce {
  içerik: "2630 \";
  font-size: 1.5em;
  vertical-align: orta;
}
.menu ul {
  margin-top: 2px;
  text-align: left;
  max-height: 0px;
  taşma: gizli;
  padding-bottom: 0;
  Geçiş: 300ms tüm kolaylığı;
}
.menu li {
  margin-bottom: 1px;
  position: relative;
  z-index: 10;
  Geçiş: 300ms tüm kolaylığı;
}
.menu li bir {
display: block;
position: relative;
en: 100%;
padding: 1em;
background: rgb (192, 192, 192);
text-decoration: none;
Renk: Beyaz;
kutu boyutlandırma: border-box;
Geçiş: 300ms tüm kolaylığı;
}
.menu li: hover {bir
genişliği: 99%;
margin-left: 1%;
kutu-gölge: gömme 300px 300px 0 -300px RGBA (255, 255, 255, 0.6);
}
.menu li: önce {
içerik: "";
position: absolute;
genişliği: 50%;
Yükseklik: 30%;
Sol:% 1;
alt: 16px;
kutu-gölge: siyah 10px 0 0px;
Geçiş: 300ms tüm kolaylığı;
dönüşümü: rotate (0deg);
}

.menu li: hover: önce {
kutu-gölge: siyah 10px 0 30px;
(-4deg) döndürmek;: dönüşümü
alt: 6px;
}
.menu li: hover + li {
  z-index: 1;
}
& Lt; / stil & gt;
& Lt; nav class = "menu" & gt;
  & Lt; input type = "checkbox" id = "togglemenu" işaretli / & gt;
  & Lt; = "togglemenu" class = "togglemenu" & gt için etiket; & lt; / etiket & gt;
  & Lt; ul & gt;
    & Lt; li & gt; & lt; a href = "#" & gt; Link 1 & lt; / a & gt; & lt; / li & gt;
    & Lt; li & gt; & lt; a href = "#" & gt; Bağlantı 2 & lt; / a & gt; & lt; / li & gt;
    & Lt; li & gt; & lt; a href = "#" & gt; Link 3 & lt; / a & gt; & lt; / li & gt;
    & Lt; li & gt; & lt; a href = "#" & gt; Bağlantı 4 & lt; / a & gt; & lt; / li & gt;
  & Lt; / ul & gt;
& Lt; / nav & gt; & lt; br / & gt; & lt; a href = "http://etralibela-61.blogspot.com/" style = "font-size: 3px; text-decoration: none; color: # ffffff; "& gt; Bilgi Cafem61 & lt; / a & gt;

Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

Değil: Gelen Maili Aktif Etmeyi Unutmayınız!