[Thanh Nav] Nhìn khá đẹp

    [Thanh Nav] Nhìn khá đẹp

    Bài gửi  by Death Gun on Tue Aug 05, 2014 1:28 pm

    Live Demo
    Code:
    <ul id="nav">
        <li><a href="http://www.script-tutorials.com/">Home</a></li>
        <li><a class="hsubs" href="#">Menu 1</a>
            <ul class="subs">
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
                <li><a href="#">Submenu 3</a></li>
                <li><a href="#">Submenu 4</a></li>
                <li><a href="#">Submenu 5</a></li>
            </ul>
        </li>
        <li><a class="hsubs" href="#">Menu 2</a>
            <ul class="subs">
                <li><a href="#">Submenu 2-1</a></li>
                <li><a href="#">Submenu 2-2</a></li>
                <li><a href="#">Submenu 2-3</a></li>
                <li><a href="#">Submenu 2-4</a></li>
                <li><a href="#">Submenu 2-5</a></li>
                <li><a href="#">Submenu 2-6</a></li>
                <li><a href="#">Submenu 2-7</a></li>
                <li><a href="#">Submenu 2-8</a></li>
            </ul>
        </li>
        <li><a class="hsubs" href="#">Menu 3</a>
            <ul class="subs">
                <li><a href="#">Submenu 3-1</a></li>
                <li><a href="#">Submenu 3-2</a></li>
                <li><a href="#">Submenu 3-3</a></li>
                <li><a href="#">Submenu 3-4</a></li>
                <li><a href="#">Submenu 3-5</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 4</a></li>
        <li><a href="#">Menu 5</a></li>
        <li><a href="#">Menu 6</a></li>
        <li><a href="http://www.script-tutorials.com/pure-css3-lavalamp-menu/">Back</a></li>
        <div id="lavalamp"></div>
    </ul>
    chén code trên vào nơi muốn hiện

    cho vào css code
    Code:
    #nav,#nav ul {
        list-style: none outside none;
        margin: 0;
        padding: 0;
    }
    #nav {
        background: url('menu_bg.png') no-repeat scroll 0 0 transparent;
        clear: both;
        font-size: 12px;
        height: 58px;
        padding: 0 0 0 9px;
        position: relative;
        width: 957px;
    }
    #nav ul {
        background-color: #222;
        border:1px solid #222;
        border-radius: 0 5px 5px 5px;
        border-width: 0 1px 1px;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
        left: -9999px;
        overflow: hidden;
        position: absolute;
        top: -9999px;
        z-index: 2;

        -moz-transform: scaleY(0);
        -ms-transform: scaleY(0);
        -o-transform: scaleY(0);
        -webkit-transform: scaleY(0);
        transform: scaleY(0);

        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;

        -moz-transition: -moz-transform 0.1s linear;
        -ms-transition: -ms-transform 0.1s linear;
        -o-transition: -o-transform 0.1s linear;
        -webkit-transition: -webkit-transform 0.1s linear;
        transition: transform 0.1s linear;
    }
    #nav li {
        background: url('menu_line.png') no-repeat scroll right 5px transparent;
        float: left;
        position: relative;
    }
    #nav li a {
        color: #FFFFFF;
        display: block;
        float: left;
        font-weight: normal;
        height: 30px;
        padding: 23px 20px 0;
        position: relative;
        text-decoration: none;
        text-shadow: 1px 1px 1px #000000;
    }
    #nav li:hover > a {
        color: #00B4FF;
    }
    #nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
        background: none repeat scroll 0 0 #121212;
        outline: 0 none;
    }
    #nav li:hover ul.subs {
        left: 0;
        top: 53px;
        width: 180px;

        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -o-transform: scaleY(1);
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    #nav ul li {
        background: none;
        width: 100%;
    }
    #nav ul li a {
        float: none;
    }
    #nav ul li:hover > a {
        background-color: #121212;
        color: #00B4FF;
    }
    #lavalamp {
        background: url('lavalamp.png') no-repeat scroll 0 0 transparent;
        height: 16px;
        left: 13px;
        position: absolute;
        top: 0px;
        width: 64px;

        -moz-transition: all 300ms ease;
        -ms-transition: all 300ms ease;
        -o-transition: all 300ms ease;
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease;
    }
    #lavalamp:hover {
        -moz-transition-duration: 3000s;
        -ms-transition-duration: 3000s;
        -o-transition-duration: 3000s;
        -webkit-transition-duration: 3000s;
        transition-duration: 3000s;
    }
    #nav li:nth-of-type(1):hover ~ #lavalamp {
        left: 13px;
    }
    #nav li:nth-of-type(2):hover ~ #lavalamp {
        left: 90px;
    }
    #nav li:nth-of-type(3):hover ~ #lavalamp {
        left: 170px;
    }
    #nav li:nth-of-type(4):hover ~ #lavalamp {
        left: 250px;
    }
    #nav li:nth-of-type(5):hover ~ #lavalamp {
        left: 330px;
    }
    #nav li:nth-of-type(6):hover ~ #lavalamp {
        left: 410px;
    }
    #nav li:nth-of-type(7):hover ~ #lavalamp {
        left: 490px;
    }
    #nav li:nth-of-type(8):hover ~ #lavalamp {
        left: 565px;
    }


    xong!

    VnGame



    Khách viếng thăm Hãy cùng nhau ủng hộ và phát triển VnGame Bạn nhé,Bạn đã gửi 0 bài vào diễn đàn cố gằng phát huy nhé



    [You must be registered and logged in to see this link.]
    Death Gun

    Bài gửi  by Demon on Tue Aug 05, 2014 8:05 pm

    Đề Nghị Copy Code Nhớ Ghi Nguồn Wink



    [Thanh Nav] Nhìn khá đẹp FGbNQtb
    [Thanh Nav] Nhìn khá đẹp ARkIp6b
    Diễn Đàn : [You must be registered and logged in to see this link.]
    Fanpage: [You must be registered and logged in to see this link.]

    Cảm Ơn Khách viếng thăm ! Hãy Giúp BQT Phát Triển Diễn Đàn Vngame Nào ^^
    Demon

    Bài gửi  by Death Gun on Thu Aug 07, 2014 12:58 pm

    Anh Mất Zin Vì Ai ? đã viết:Đề Nghị Copy Code Nhớ Ghi Nguồn Wink
    nguồn bên nước ngoài nên k ghi.



    Khách viếng thăm Hãy cùng nhau ủng hộ và phát triển VnGame Bạn nhé,Bạn đã gửi 0 bài vào diễn đàn cố gằng phát huy nhé



    [You must be registered and logged in to see this link.]
    Death Gun

    Bài gửi  by nonamewar on Wed Sep 03, 2014 7:02 am

    xem cái cmn mô ...............
    nonamewar

    Bài gửi  by nonamewar on Sat Sep 13, 2014 10:03 am

    Death Gun đã viết:
    Anh Mất Zin Vì Ai ? đã viết:Đề Nghị Copy Code Nhớ Ghi Nguồn Wink
    nguồn bên nước ngoài nên k ghi.

    Dù là của nc ngoài , bạn cũng nên tôn trọng ngtar..người ta bỏ công ra viết .. mình ngồi ăn ..rồi bảo là của mình viết .. chẳng lẽ đéo phải là vừa ăn cướp vừa la làng à !!
    nonamewar

    Bài gửi  by Sponsored content