Merhaba arkadaşlar bu dersimizde CSS3 ile hoş görünümlü bir Dikey menü yapıcaz, başlayalım hemen…
CSS3 ile Dikey Menü Yapımı
Yapacağımız menü`nün demo halini görmek için buraya tıklayabilirsiniz.
HTML Kodları
İlk olarak menü için HTML yapımızı oluşturalım.
Aşağıda görmüş olduğunuz gibi ilk olarak “menu” adında bir ul oluşturdum.Daha sonra sırasıyla
li > a > i şeklinde yapı oluşturalım.
Menü ikonlu olacağı için “fa fa-question-circle” bu şekilde font awesome ikonlarını kullandık.
Ayrıca bu konuda bilgi sahibi olmak için Font Awesome Nedir ? Nasıl Kullanılır ? adlı yazımı incelemenizi tavsiye ederim.
<ul id="menu">
<li>
<a href="#" class="first">
<i class="fa fa-question-circle"></i>
WHO ARE <span class="light">WE</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-info-circle"></i>
ABOUT <span class="light">US</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-cog"></i>
WHAT WE <span class="light">DO</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-cog"></i>
OUR <span class="light">REFERANCE</span>
</a>
</li>
<li>
<a href="#" class="last">
<i class="fa fa-phone-square"></i>
CONTACT <span class="light">US</span>
</a>
</li>
</ul>
CSS Kodları
Burada`da CSS kodlarımızı yazıyoruz, id`si “menu” olan ul`nin stil kodlarını yazıyoruz.Daha sonra sırasıyla ul#menu içerisindeki li, a, span, i nesnelerini düzenliyoruz.
Menünün daha efektif durması amacıyla hover (fare üzerine gelince çalışacak kısım) bölümünde transition kullandık.
Ayrıca bu konuda bilgi sahibi değilseniz CSS3 Transition Kullanımı adlı yazımı inceleyebilirsiniz.
body{
background-color: #DBDBDB;
}
ul#menu{
width:265px;
margin:150px auto;
font-family:'Open Sans',sans-serif;
}
ul#menu li{
list-style:none;
width:100%
height:55px;
}
ul#menu li a{
display:block;
color:#000;
font-size: 18px;
font-weight:700;
text-decoration: none;
background-color: #f1f1f1;
border-left:5px solid #000;
border-bottom:1px solid #ddd;
padding:15px 15px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
ul#menu li a i{
margin:0 10px 0 0;
}
ul#menu li a span.light{
font-weight: 400;
}
ul#menu li a:hover{
color:#fff;
background-color: #000;
border-left:10px solid red;
}
ul#menu li a.first{
border-top-left-radius: 20px;
}
ul#menu li a.first:hover{
border-top-left-radius: 20px;
}
ul#menu li a.last{
border-bottom-left-radius: 20px;
}
ul#menu li a.last:hover{
border-bottom-left-radius: 20px;
}
Evet tüm işlemleri yaptık menümüz hazır bir sonraki yazıda görüşmek üzere ayrıca menüyü codepen`de görüntülemek için buraya tıklayabilirsiniz.