29-03-2015 Saat: 23:27
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;
CSS kodlarımız;
Eklemeyi bilmeyen varsa bana öm atarak bildirebilir, elimden geldiğince yardımcı olmaya çalışırım :)
Ş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:
<!--
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:
@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 :)
