HTML ve CSS İle Akordion Dikey Menü
Bu menü örneğimizde html ve css ile birlikte dikey olarak bir akerdion menü yapacağız. Menümüzün CSS ve HTML kodları aşağıdaki gibidir. Bu kodları yeni bir html sayfasına kopyaladığınızda menü çalışacaktır. Menünün elemanlarını kendi isteğinize göre değiştirebilirsiniz.
Menünün Çalışan Hali:
HTML ve CSS kodları:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <style type="text/css"> @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css); @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,300); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Montserrat', sans-serif; } .container { width: 100%; height: 100%; } nav { position: fixed; display: flex; align-items: flex-start; width: 20%; height: 100%; background-color: #111; } main { position: fixed; right: 0; width: 80%; height: 100%; background-color: #fff; overflow: auto; padding: 40px; } h1 { font-weight: bold; margin-bottom: 50px; font-size: 55px; text-align: center; } p { margin-bottom: 20px; line-height: 26px; } p::first-letter { font-size: 200%; font-weight: bold; } li, ul label.title, ul, a { width: 100%; color: #FFF; font-family: 'Montserrat', 'Open Sans', sans-serif; display: block; font-weight: bold; } ul label { height: 35px; } ul li{ height: 35px; overflow: hidden; transition: all .3s; } li { display: block; background-color: #363636; } label.title { font-size: 14px; background: linear-gradient(#111, #2f2f2f); padding: 10px 15px; cursor: pointer; transition: all .25s; } a{ font-size: 12px; text-decoration: none; color: #FFF; display: block; padding: 10px 25px; transition: all .25s; } a:hover { background-color: #444; box-shadow: inset 5px 0px 0px 0px #fff; } label:hover { text-shadow: 0px 0px 10px #fff; } input[type="radio"] { display: none; } #edit:checked + li, #archive:checked + li, #tools:checked + li, #preferences:checked + li { height: 179px; } i { margin-right: 12px; } @media screen and (max-width: 600px){ nav { width: 100%; position: relative; } main { width: 100%; position: relative; } } </style> <div class="container"> <nav class="menu"> <ul> <input type="radio" name="menu" id="archive" checked> <li> <label for="archive" class="title"><i class="fa fa-folder"></i>Arşiv</label> <a href="#">Yeni Dosya</a> <a href="#">Dosya Aç</a> <a href="#">Kaydet</a> <a href="#">Çıkış</a> </li> <input type="radio" name="menu" id="edit"> <li> <label for="edit" class="title"><i class="fa fa-edit"></i>Düzenle</label> <a href="#">Kopyala</a> <a href="#">Kes</a> <a href="#">Yapıştır</a> <a href="#">Geri Al</a> </li> <input type="radio" name="menu" id="tools"> <li> <label for="tools" class="title"><i class="fa fa-gavel"></i>Araçlar</label> <a href="#">Araç1</a> <a href="#">Araç2</a> <a href="#">Ara31</a> <a href="#">Araç4</a> </li> <input type="radio" name="menu" id="preferences"> <li> <label for="preferences" class="title"><i class="fa fa-gears"></i>Ayarlar</label> <a href="#">Tarayıcı</a> <a href="#">Ayarlar</a> <a href="#">Sayfalar</a> <a href="#">Temalar</a> </li> </ul> </nav> </div> </body> </html>
Bu Yazıya Tepkin Nedir?
+1
+1
+1
+1
+1
+1
+1
<< Önceki Yazı
Sonraki Yazı >>
css açılır menü örnekleri, css akerdion menü örnekleri, css dikey açılır menü örnekleri, css dikey menü örnekleri, css menü örnekleri, css yatay menü örnekleri, dikey akerdion menü örnekleri, html menü örnekleri