Wolder King: Css3 Menü Kodu

<div class="separator" style="clear: both; text-align: center;">
<a href="http://sphotos-d.ak.fbcdn.net/hphotos-ak-prn1/644317_624799807533594_330268076_n.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="121" src="http://sphotos-d.ak.fbcdn.net/hphotos-ak-prn1/644317_624799807533594_330268076_n.png" width="200" /></a></div>
Bu süper navigasyon kodu ile sitenize çok güzel bir hava katabilirsiniz. Üzerinde sadece buton isimleri ve resimlerini değiştirin. Eğer css bilginiz varsa renkler üzerinde de biraz değişiklik yapabilirsiniz. Fakat kesinlikle telif haklarını silmeyin. Sizde blogger karalisteye girmeyin. Eğer bize birazcık saygınız varsa.<br />
<br />
<textarea class="bginput" cols="42" name="wep-kodlari" onclick="this.focus();this.select()" rows="5" style="height: 112px; margin: 0px; width: 389px;">

<wolderking>
<style type="text/css">
.overview-button {
 position:fixed;
 left:-10px;
 top:10px;
 width:72px;
 height:62px;
 background-color: #363636;
 cursor:pointer;
 pointer-events: auto !important;
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
 z-index:999999;
    background-repeat: no-repeat;
    background-position: 10px center;
    text-align: center;
    background-color: #000;
    border-right-style: solid;
    border-right-width: 5px;
    border-right-color: #b72228;
    -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
}
.overview-button img
{
    width: 40px;
    height: 40px;
    float: right;
    padding: 12px 12px 0px 0px;
}
.overview-button:hover {
 background-color: #b72228;
 border-right-style: solid;
    border-right-width: 5px;
    border-right-color: #000;
}
ul#wolderking {
 position:fixed;
 margin: 0px;
 padding: 0px;
 top: 10px;
 right: 0px;
 list-style: none;
 z-index:999999;
 cursor:pointer;
 pointer-events: auto !important;
 display:block;
}
ul#wolderking li
{
    width: 200px;
    margin-bottom: 5px;
}
ul#wolderking li img
{
    width: 40px;
    height: 40px;
    float: left;
    padding: 10px 0px 0px 12px;
}
ul#wolderking li a
{
    display: block;
    width: 200px;
    height: 62px;
    background-color: #b72228;
    background-repeat: no-repeat;
    background-position: 10px center;
    text-align: center;
    -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    border-left-style: solid;
    border-left-width: 5px;
    border-left-color: #000;
}
ul#wolderking li a:hover
{
    background-color: #000;
    border-left-style: solid;
    border-left-width: 5px;
    border-left-color: #b72228;
}
ul#wolderking li span {
 color:#fff;
 font-family: Arial;
 font-weight:normal;
 font-size:28px;
 line-height:62px;
}
@media screen and (max-width: 1024px) 
{
    .overview-button img
    {
        width: 30px;
        height: 30px;
        padding: 4px 6px 0px 0px;
    }
    .overview-button
    {
        width: 50px;
        height: 38px;
    }
    ul#wolderking li img
    {
        width: 30px;
        height: 30px;
        padding: 5px 0px 0px 5px;
    }    
    ul#wolderking li a
    {
        height: 40px;
    }
    ul#wolderking li span
    {
        font-size: 20px;
        line-height: 40px;
        padding-right:20px;
    }
    ul#wolderking li 
    {
        margin-right:-20px;
    }
    .hint {
 font-size: 18px;
 padding: 5px 10px 10px 10px;
}    
}
      </style>

<ul id="wolderking">
<li><a href="#"><img src="http://redcode.web.tr/images/home.png" alt="" /><span>AnaSayfa</span></a></li>
<li><a href="#"><img src="http://redcode.web.tr/images/skills.png" alt="" /><span>MinikUzman</span></a></li>
<li><a href="#"><img src="http://redcode.web.tr/images/resume.png" alt="" /><span>Servisler</span></a></li>
<li><a href="#"><img src="http://redcode.web.tr/images/portfolio.png" alt="" /><span>Haberler</span></a></li>
<li><a href="#"><img src="http://redcode.web.tr/images/about.png" alt="" /><span>Hakkımızda</span></a></li>
<li><a href="#"><img src="http://redcode.web.tr/images/contact.png" alt="" /><span>Iletişim</span></a></li>
</ul>
</wolderking>

Gelişmiş Navigasyon (Menü) Kodu

Bu süper navigasyon kodu ile sitenize çok güzel bir hava katabilirsiniz. Üzerinde sadece buton isimleri ve resimlerini değiştirin. Eğer cs...

Devamı »

Gelişmiş Navigasyon (Menü) Kodu

Popüler

Arşiv