Sidebar kısmında Kutu Modeli Oluşturma

Sidebar kısmında güzel bir kutu modeli yapıp üzerinde tıkladığımızda açılmasını istediğimiz sayfaya yönlendirmeden bahsediyorum. Bunun için kullanacağımız kodlar.

Style dosyamıza aşağıdaki kodları yapıştıralım.

/* hayvanlar alemi ikonları */
.vcard_main_nav {
float: left;
width: 256px;
}
.vcard_main_nav ul {
float: left;
margin: 0px;
padding: 0px;
width: 256px;
background: #f5f5f5;
}
.vcard_main_nav ul li {
display: block;
float: left;
padding-left: 50.9px;
padding-right: 50.9px;
}
.icon_1 {
background: #1bbc9b;
width: 128px;
height: 52px;
padding: 31.5px;
border-top: 7px solid #16a086;
}
.icon_2 {
background: #3598db;
width: 128px;
height: 52px;
padding: 31.5px;
border-top: 7px solid #2a80b9;
}
.icon_3 {
background: #f2ca2a;
width: 128px;
height: 52px;
padding: 31.5px;
border-top: 7px solid #d2a800;
}
.icon_4 {
background: #e77e23;
width: 128px;
height: 52px;
padding: 31.5px;
border-top: 7px solid #d25400;
}
.icon_5 {
background: #e84c3d;
width: 128px;
height: 52px;
padding: 31.5px;
border-top: 7px solid #c1392b;
}
.icon_6 {
background: #d80afc;
width: 128px;
height: 52px;
padding: 31.5px;
border-top: 7px solid #c1392b;
}
.bl_background {
position: fixed;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.bl_background img {
width: 100%;
height: 100%;
}
.vcard_main_nav ul li:hover {
background: rgba(255, 255, 255, 0.3);
transition: all 0.17s ease-in-out;
}
.vcard_main_nav ul li {
transition: all 0.17s ease-in-out;
}

/* Hayvanlar Alemi Kutusu Bitiş */


Html eklede yeni javascript açalım için aşağıdakileri yerleştirrelim.

<div class='vcard_main_nav'>
<ul>
  <a href='http://www.nedir-nedemektir.com/p/kedi.html'><li class='icon_1'><img height='26px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJlhWg2rJM0g9GMMPxZNt8gk_AghSV1yjXPM5gWnhS9FZkrikpMC0SbFA2vyzoKk1bTUKiZHjb8y-jeDuEvpJv6bMf87IhbCf7DixfDQZ7irxfyFwkbfEjBENWvbML4X-b3xC_CwvjWsm9/s1600/cat.png' width='26px;'/></li></a>

  <a href='http://www.nedir-nedemektir.com/p/kopek.html'><li class='icon_2'><img height='26px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ESsLRZ3AJX6K363WxLSb8mKr_HKNmlsw-SFx51ymGHEl1PAuQy9CvsXaoQj3FqCjRWoDePwwMa75AYTIyKBYtEsoPxNUjJu0TENXTgq0w934_MVrRD1XzfjlNZ5-ZZ8MS-bXWw2ubHEB/s1600/dog.png' width='26px;'/></li></a>

  <a href='http://www.nedir-nedemektir.com/p/buyukbas-hayvanlar.html'><li class='icon_3'><img height='26px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg-eOyVp6j58HjzXOnvhUorcD1uFcvm1m1Dvd9CX7gzaOjLSUqkdnoCfSgsuC6iaEg1EkVw06VVfop14k-NBlsYqQGc6xOUvak2Cfmu1fVZqEdr2fsQnI8OAu6kJzWJo8TTlegAAJSr378/s1600/cow.png' width='26px;'/></li></a>

  <a href='http://www.nedir-nedemektir.com/p/kanatl-hayvanlar.html'><li class='icon_4'><img height='26px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ5qeaAj1NiiYhY2cuinUTjdm23_2OEjptXPB9cBCpeRQjIO5-Y7fyQoqT75gtMJVBTHAgX8iWZap5mDdZ_ifkECRNyjzE0nEk1OPfIfW8iFbrinSzySFU6VZ_NJrcM6K4Ji99d8WpAsdr/s1600/bird.png' width='26px;'/></li></a>

  <a href='http://www.nedir-nedemektir.com/p/egzotik-hayvanlar.html'><li class='icon_5'><img height='26px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaV-AelUzrcrk8L1QBVYxSh1FLeYg8c9FO9PU_GW-ZWr2n3zQzFKulRBPb8MLos1e2I2vw8DX9K3IHExbSbF903vvxn_shZtu7nHmLItE9vtDmKhUqqoweqKC8bBA7aMzA0gYo4To1BjkQ/s1600/turtle.png' width='26px;'/></li></a>

<a href='http://www.nedir-nedemektir.com/p/kedi.html'><li class='icon_6'><img height='26px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJlhWg2rJM0g9GMMPxZNt8gk_AghSV1yjXPM5gWnhS9FZkrikpMC0SbFA2vyzoKk1bTUKiZHjb8y-jeDuEvpJv6bMf87IhbCf7DixfDQZ7irxfyFwkbfEjBENWvbML4X-b3xC_CwvjWsm9/s1600/cat.png' width='26px;'/></li></a>


  </ul>
      </div>


İşlememimiz bu kadar hadi kolay gele.

Ortaya çıkacak olan kutumuz.