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>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
				
						<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ı

Buradada CSS kodlarımızı yazıyoruz, idsi "menu" olan ulnin 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;
}

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.