CSS3 ile Dikey Menü Yapım

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.

<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>

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.

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;
}