-- CSS3 & HTML5

CSS3 ile Dikey Menü Yapımı

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.