Hexagon Menü

[Abdullah Öztürk]

Merhaba arkadaşlar ve iyi akşamlar.Şimdi multi konusuna hiç girmiyeceğim ve özel mesajdan adminlerimize mesaj attım.Karar gelince banlarsınız yada boşa atarsınız yani pas geçersiniz.

Şimdi bir menü buldum ve işinize yarar diye düşündüm.Onu sizinle paylaşmak istiyorum ve geçelim konuya.


HTML Kodlarımız;

PHP Kod: Tümünü Seç Tümünü Kopyala

<!-- 
autor: Marco Barría 
https://twitter.com/marco_bf
-->

<div class='hexagon'>
  <ul>
    <li class='polygon_top'>
      <a href="#">Cssdeck</a>
    </li>
    <li class='polygon_top'></li>
    <li class='polygon_top'>
      <a href="#">Dribbble</a>
    </li>
    <li class='polygon_bottom'>
      <a href="#">Forrst</a>
    </li>
    <li class='polygon_bottom'></li>
    <li class='polygon_bottom'>
      <a href="#">Twitter</a>
    </li>
  </ul>
  <p>Hover me!</p>
</div> 


CSS kodlarımız;

PHP Kod: Tümünü Seç Tümünü Kopyala

@import url(http://fonts.googleapis.com/css?family=Lato:300);

html,
body {
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

body {
  background: #404853;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
}

a {
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  width: 100%;
}

li {
  list-style-type: none;
}

/*=================================== container 
*/

.hexagon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
  width: 60px;
  transform-origin: center;
  transform: scale(1.00005); /* hack Firefox smooth edge */
}

/*=================================== top and bottom triangle
*/

.polygon_top,
.polygon_bottom {
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  position: absolute;
  width: 0;
  height: 0;
  transition: width 0.3s ease-in-out, border 0.1s linear, border-radius 0.5s ease-in-out;
}

.polygon_top a,
.polygon_bottom a {
  color: rgba(55, 55, 55, 0);
  display: block;
  font-size: 0em;
  text-transform: uppercase;
  width: 100%;
  transition: color, font-size 0.3s;
}

.polygon_top:nth-child(1),
.polygon_top:nth-child(3),
.polygon_bottom:nth-child(4),
.polygon_bottom:nth-child(6) {
  cursor: pointer;
}

.polygon_top:nth-child(1):hover > a,
.polygon_top:nth-child(3):hover > a,
.polygon_bottom:nth-child(4):hover > a,
.polygon_bottom:nth-child(6):hover > a {
  color: #373737;
  font-size: 1em;
}

.polygon_top:nth-child(1) {
  border-bottom: 30px solid #9b59b6;
  right: 0;
  transform: translateX(-30px) translateY(-15px);
}

.polygon_top:nth-child(1):hover {
  border-radius: 4px 0 0 4px;
  border-left: 18px solid #9b59b6;
  width: 120px;
  z-index: 100;
}
.polygon_top:nth-child(1) > a {
  line-height: 30px;
}

.polygon_top:nth-child(2) {
  border-bottom: 30px solid #d0b2dd;
  transform: translateX(12px) translateY(15px);
}

.polygon_top:nth-child(3) {
  border-bottom: 30px solid #b07cc6;
  left: 0;
  transform: translateX(30px) translateY(-15px);
}

.polygon_top:nth-child(3):hover {
  border-radius: 0 4px 4px 0;
  border-right: 18px solid #b07cc6;
  width: 120px;
  z-index: 100;
}

.polygon_top:nth-child(3) > a {
  text-align: right;
  line-height: 30px;
}

.polygon_bottom:nth-child(4) {
  border-top: 30px solid #dbc3e5;
  right: 0;
  transform: translateX(-30px) translateY(15px);
}

.polygon_bottom:nth-child(4):hover {
  border-radius: 4px 0 0 4px;
  border-left: 18px solid #dbc3e5;
  width: 120px;
  z-index: 100;
}

.polygon_bottom:nth-child(4) > a {
  text-align: left;
  line-height: 30px;
  margin-top: -30px;
}

.polygon_bottom:nth-child(5) {
  border-top: 30px solid #a66bbe;
  transform: translateX(12px) translateY(-15px);
}

.polygon_bottom:nth-child(6) {
  border-top: 30px solid #c6a0d5;
  transform: translateX(30px) translateY(15px);
}

.polygon_bottom:nth-child(6):hover {
  border-radius: 0 4px 4px 0;
  border-right: 18px solid #c6a0d5;
  width: 120px;
  z-index: 100;
}

.polygon_bottom:nth-child(6) > a {
  text-align: right;
  line-height: 30px;
  margin-top: -30px;
}

p{
  color: #666;
  cursor:default;
  font-size:0.8em;
  margin-top:5em;
  user-select: none;
} 


Eklemeyi bilmeyen varsa bana öm atarak bildirebilir, elimden geldiğince yardımcı olmaya çalışırım :)

[xoxox]

Elinize sağlık

[Abdullah Öztürk]

Elinize sağlık

Önemli değil.Bu arada ben yapmadım siteden buldum :)

[meta the god]

Herhangi bir ekran görüntüsü yokmu?

[Abdullah Öztürk]

Herhangi bir ekran görüntüsü yokmu?

Tabiki :)

[gürbey]

keşke bir demo, resim bişey olsaydı. foruma ne kurucagımızı bilirdik?

[Rusveld]

keşke bir demo, resim bişey olsaydı. foruma ne kurucagımızı bilirdik?

Banlı birinin konusuna yorum yapıyorsunuz. Size cevap vereceğini mi düşünüyorsunuz ?
Ekran görüntüsü atmış zaten.

[leojely]

http://destek.10tl.net/showthread.php?tid=83399&pid=536923#pid536923

Bunu gördükten sonra beklerim @Rusveld