× İletişim Formu Blogger CSS Tablo Menü Arlina Design 5/26/2017 Etiketler : Blogger CSS Blogger Tablo 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;margin: 0 auto;} nav{position:relative;overflow:hidden;margin:0 auto;margin-top:25px;word-spacing:-5px;width:700px;box-shadow:0 0 10px rgba(0,0,0,0.2)} nav ul{margin:0 auto;padding:0;display:inline-block} nav li{background:white;word-spacing:0;width:160px;list-style:none;margin:0 auto;padding:20px;border:1px solid rgba(0,0,0,0.1);border-right:none;border-bottom:none;font-family:calibri light;letter-spacing:3px;box-shadow:inset -50px 0 175px -50px rgba(0,0,0,0.2);cursor:pointer} nav li:hover{box-shadow:inset -50px 0 175px -50px rgba(0,0,0,0.1)} nav li:active{background:rgba(255,170,118,.5)} nav li span{float:right;font-weight:bold;display:none} nav li:hover span{display:block} nav > div{position:absolute;top:0;right:0;width:450px;height:100%;background:white;padding:25px;font-family:calibri;word-spacing:3px} nav li > div{display:none;position:absolute;top:0;right:0;width:450px;height:100%;background:white;padding:25px;font-family:calibri;letter-spacing:1px;z-index:10} nav div h1{margin:0 auto;font-family:calibri light;font-size:25px} nav li:focus{outline:none;background:white;border-top:1px solid rgba(0,0,0,0.1);box-shadow:none} nav li:focus > div{display:block} </style> </head> <body> <nav> <ul> <li tabindex="0"> <b>1. Tab</b> <span>→</span> <div> <h1>1. Tab</h1> <p>1. Sekme içindekiler</p> </div> </li> <li tabindex="0"> <b>2. Tab</b> <span>→</span> <div> <h1>2. Tab</h1> <p>2. Sekme içindekiler</p> </div> </li> <li tabindex="0"> <b>3. Tab</b> <span>→</span> <div> <h1>3. Tab</h1> <p>3. Sekme içindekiler</p> </div> </li> <li tabindex="0"> <b>4. Tab</b> <span>→</span> <div> <h1>4. Tab</h1> <p>4. Sekme içindekiler</p> </div> </li> <li tabindex="0"> <b>5. Tab</b> <span>→</span> <div> <h1>5. Tab</h1> <p>5. Sekme içindekiler</p> </div> </li> </ul> <div> <h1>CSS Tablo Menü</h1> <p>Bu tablo tıklanabilir bir CSS menüsüdür.</p> <p>Sol taraftaki sekmelerden birine tıklamanız yeterlidir.</p> </div> </nav> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Blogger CSS Tablo Menü" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blogger CSS Tablo Menü Arlina Design 5/26/2017 Etiketler : Blogger CSS Blogger Tablo 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;margin: 0 auto;} nav{position:relative;overflow:hidden;margin:0 auto;margin-top:25px;word-spacing:-5px;width:700px;box-shadow:0 0 10px rgba(0,0,0,0.2)} nav ul{margin:0 auto;padding:0;display:inline-block} nav li{background:white;word-spacing:0;width:160px;list-style:none;margin:0 auto;padding:20px;border:1px solid rgba(0,0,0,0.1);border-right:none;border-bottom:none;font-family:calibri light;letter-spacing:3px;box-shadow:inset -50px 0 175px -50px rgba(0,0,0,0.2);cursor:pointer} nav li:hover{box-shadow:inset -50px 0 175px -50px rgba(0,0,0,0.1)} nav li:active{background:rgba(255,170,118,.5)} nav li span{float:right;font-weight:bold;display:none} nav li:hover span{display:block} nav > div{position:absolute;top:0;right:0;width:450px;height:100%;background:white;padding:25px;font-family:calibri;word-spacing:3px} nav li > div{display:none;position:absolute;top:0;right:0;width:450px;height:100%;background:white;padding:25px;font-family:calibri;letter-spacing:1px;z-index:10} nav div h1{margin:0 auto;font-family:calibri light;font-size:25px} nav li:focus{outline:none;background:white;border-top:1px solid rgba(0,0,0,0.1);box-shadow:none} nav li:focus > div{display:block} </style> </head> <body> <nav> <ul> <li tabindex="0"> <b>1. Tab</b> <span>→</span> <div> <h1>1. Tab</h1> <p>1. Sekme içindekiler</p> </div> </li> <li tabindex="0"> <b>2. Tab</b> <span>→</span> <div> <h1>2. Tab</h1> <p>2. Sekme içindekiler</p> </div> </li> <li tabindex="0"> <b>3. Tab</b> <span>→</span> <div> <h1>3. Tab</h1> <p>3. Sekme içindekiler</p> </div> </li> <li tabindex="0"> <b>4. Tab</b> <span>→</span> <div> <h1>4. Tab</h1> <p>4. Sekme içindekiler</p> </div> </li> <li tabindex="0"> <b>5. Tab</b> <span>→</span> <div> <h1>5. Tab</h1> <p>5. Sekme içindekiler</p> </div> </li> </ul> <div> <h1>CSS Tablo Menü</h1> <p>Bu tablo tıklanabilir bir CSS menüsüdür.</p> <p>Sol taraftaki sekmelerden birine tıklamanız yeterlidir.</p> </div> </nav> </body> </html>
Yorum Gönder