× İletişim Formu Blogger CSS Mobil Menü Arlina Design 5/26/2017 Etiketler : Blogger CSS Blogger Menü Arlina Design <!DOCTYPE html> <html> <head> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body { font-family: 'Fira Sans Condensed', sans-serif; -webkit-font-smoothing: antialiased; margin: 0 auto 0 auto } ul { padding: 0 } nav { width: 1020px; margin: 0 auto; background-color: #eeeeee } nav a { font-size: 22px; padding: 5px; text-decoration: none; color: #262d35 } nav a:hover { color: white; background-color: #e90f47; transition: 0.5s } nav label, nav input { display: none } .slide li { display: inline-block; padding: 10px 12px } @media (max-width: 1024px) { nav { width: 100% } nav label, nav input { display: block } span { padding: 10px 20px; background: #2d2f31; color: white; font-size: 22px; cursor: pointer; display: block } span::after { float: right; right: 10%; content: "+" } .slide { clear: both; background-color: #eeeeee; margin: 0; width: 100%; height: 0; overflow: hidden; text-align: center; transition: height .4s ease } .slide li { display: block; width: 100%; padding: 10px 0 } #touch { position: absolute; opacity: 0; height: 0 } #touch:checked + .slide { height: 29.5em } } </style> </head> <body> <nav> <label for='touch'><span>Menü</span></label> <input type='checkbox' id='touch'/> <ul class='slide'> <li><a href='#'>Bağlantı sekmesi 1</a></li> <li><a href='#'>Bağlantı sekmesi 2</a></li> <li><a href='#'>Bağlantı sekmesi 3</a></li> <li><a href='#'>Bağlantı sekmesi 4</a></li> <li><a href='#'>Bağlantı sekmesi 5</a></li> <li><a href='#'>Bağlantı sekmesi 6</a></li> <li><a href='#'>Bağlantı sekmesi 7</a></li> <li><a href='#'>Bağlantı sekmesi 8</a></li> <li><a href='#'>Bağlantı sekmesi 9</a></li> <li><a href='#'>Bağlantı sekmesi 10</a></li> </ul> </nav> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Blogger CSS Mobil Menü" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blogger CSS Mobil Menü Arlina Design 5/26/2017 Etiketler : Blogger CSS Blogger Menü Arlina Design <!DOCTYPE html> <html> <head> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body { font-family: 'Fira Sans Condensed', sans-serif; -webkit-font-smoothing: antialiased; margin: 0 auto 0 auto } ul { padding: 0 } nav { width: 1020px; margin: 0 auto; background-color: #eeeeee } nav a { font-size: 22px; padding: 5px; text-decoration: none; color: #262d35 } nav a:hover { color: white; background-color: #e90f47; transition: 0.5s } nav label, nav input { display: none } .slide li { display: inline-block; padding: 10px 12px } @media (max-width: 1024px) { nav { width: 100% } nav label, nav input { display: block } span { padding: 10px 20px; background: #2d2f31; color: white; font-size: 22px; cursor: pointer; display: block } span::after { float: right; right: 10%; content: "+" } .slide { clear: both; background-color: #eeeeee; margin: 0; width: 100%; height: 0; overflow: hidden; text-align: center; transition: height .4s ease } .slide li { display: block; width: 100%; padding: 10px 0 } #touch { position: absolute; opacity: 0; height: 0 } #touch:checked + .slide { height: 29.5em } } </style> </head> <body> <nav> <label for='touch'><span>Menü</span></label> <input type='checkbox' id='touch'/> <ul class='slide'> <li><a href='#'>Bağlantı sekmesi 1</a></li> <li><a href='#'>Bağlantı sekmesi 2</a></li> <li><a href='#'>Bağlantı sekmesi 3</a></li> <li><a href='#'>Bağlantı sekmesi 4</a></li> <li><a href='#'>Bağlantı sekmesi 5</a></li> <li><a href='#'>Bağlantı sekmesi 6</a></li> <li><a href='#'>Bağlantı sekmesi 7</a></li> <li><a href='#'>Bağlantı sekmesi 8</a></li> <li><a href='#'>Bağlantı sekmesi 9</a></li> <li><a href='#'>Bağlantı sekmesi 10</a></li> </ul> </nav> </body> </html>
Yorum Gönder