Süper Css Menü

[next155]

Admin KP - Temalar & Şablonlar - Temalar - Temanızı Seçin - Css Ekle ;

Dosya Adı: menu.css
Genel
Kendi İçeriğimi Yaz'ı Seçtiğinizde Açılan Kutuya Şu Kodları Koyun;

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

.menue_body {
    /* CSS3 perspective */
    -webkit-perspective: 1500px;
    -moz-perspective: 1500px;
    -ms-perspective: 1500px;
    -o-perspective: 1500px;
    perspective: 1500px;
}

.menue, .page_content {
    /* CSS3 box-sizing, transition and transform */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: -webkit-transform 0.5s ease;
    -moz-transition: -moz-transform 0.5s ease;
    -ms-transition: -ms-transform 0.5s ease;
    -o-transition: -o-transform 0.5s ease;
    transition: transform 0.5s ease;
}


/* the main menu element (which appears from the top) */
.menue {
    background-color: #002edb;
    position: fixed;
    width: 100%;
    height: 148px;

    /* CSS3 transform */
    -webkit-transform: rotateX(-45deg) translateY(-95%);
    -moz-transform: rotateX(-45deg) translateY(-95%);
    -ms-transform: rotateX(-45deg) translateY(-95%);
    -o-transform: rotateX(-45deg) translateY(-95%);
    transform: rotateX(-45deg) translateY(-95%);
}

/* change background color and rotate the main menu element on hover */
.menue:hover {
    background-color: #FF0000;
    /* CSS3 transform */
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

/* the main menu - UL-LI properties */
.menue ul {
    display: block;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 1036px;
}
.menue ul li {
    float: left;
    list-style: none outside none;
    margin: 10px;

    /* CSS3 transition */
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.menue ul li:hover {
    background-color: #FF99FF;
    /* CSS3 border-radius */
    -webkit-border-radius: 64px;
    -moz-border-radius: 64px;
    -ms-border-radius: 64px;
    -o-border-radius: 64px;
    border-radius: 64px;
} 


Kaydedip Çıkın;

Admin KP - Temalar & Şablonlar - Şablonlar - Temanız - Header Şablonlar - header şablonunu açın en üste şu kodları ekleyin;

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

<div class="menue">
            <ul>
                <li><a href="/index.php"><img src="http://www.script-tutorials.com/demos/298/images/1.png" /></a></li>
                <li><a href="/memberlist.php"><img src="http://www.script-tutorials.com/demos/298/images/2.png" /></a></li>
                <li><a href="/calendar.php"><img src="http://www.script-tutorials.com/demos/298/images/3.png" /></a></li>
                <li><a href="/search.php"><img src="http://www.script-tutorials.com/demos/298/images/4.png" /></a></li>
                <li><a href="/misc.php?action=help"><img src="http://www.script-tutorials.com/demos/298/images/5.png" /></a></li>
                <li><a href="/portal.php"><img src="http://www.script-tutorials.com/demos/298/images/6.png" /></a></li>
            </ul>
        </div> 


Demo: http://webmasterr.10tl.net/index.php

[gencfuat1997]

teşkkürler:)

[next155]

teşkkürler:)

Rica ederim :) Aslında O Bir Menü Değildi Ancak Biraz Oynama İle Menü Oldu :D

[Ripbyrustavi]

teşşekürler çok güzelmiş :)

[MonsteR]

Harika Teşekkürler

[next155]

teşşekürler çok güzelmiş :)

Rica ederim, beğenmenize sevindim..

Harika Teşekkürler

Rica ederim.

[TrLyy]

Gerçekten Çok Güzel

[next155]

Gerçekten Çok Güzel

Rica ederim.