[Code] Thanh Nav đơn giản

    [Code] Thanh Nav đơn giản

    Bài gửi  by Death Gun on Thu Jul 31, 2014 9:49 am

    demo: [You must be registered and logged in to see this link.]
    Dùng CSS + HTML nên khá đơn giản  >:) 
    Bạn có thể chèn đâu tùy theo mình muốn Wink cười
    Muốn nó hiện ở đầu forum thì chèn sau 
    Code:
    <a id="top" name="top" accesskey="t"></a>
     (y) 
    Code:
    <ul id="nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#s1">Menu 1</a>
                        <span id="s1"></span>
                        <ul class="subs">
                            <li><a href="#">Header a</a>
                                <ul>
                                    <li><a href="#">Submenu x</a></li>
                                    <li><a href="#">Submenu y</a></li>
                                    <li><a href="#">Submenu z</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Header b</a>
                                <ul>
                                    <li><a href="#">Submenu x</a></li>
                                    <li><a href="#">Submenu y</a></li>
                                    <li><a href="#">Submenu z</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="active"><a href="#s2">Menu 2</a>
                        <span id="s2"></span>
                        <ul class="subs">
                            <li><a href="#">Header c</a>
                                <ul>
                                    <li><a href="#">Submenu x</a></li>
                                    <li><a href="#">Submenu y</a></li>
                                    <li><a href="#">Submenu z</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Header d</a>
                                <ul>
                                    <li><a href="#">Submenu x</a></li>
                                    <li><a href="#">Submenu y</a></li>
                                    <li><a href="#">Submenu z</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Menu 3</a></li>
                    <li><a href="#">Menu 4</a></li>
                    <li><a href="#">Menu 5</a></li>
                    <li><a href="http://www.script-tutorials.com/css3-responsive-menu/">Back to Responsive menu tutorial</a></li>
                </ul>
    Code:
    #nav li.active > a {
        background-color: #359BED;
        color: #FFFFFF;
    }
    /* submenu */
    #nav li:hover ul.subs {
        display: block;
    }
    #nav ul.subs > li {
        display: inline-block;
        float: none;
        padding: 10px 1%;
        vertical-align: top;
        width: 33%;
    }
    #nav ul.subs > li a {
        color: #777777;
        line-height: 20px;
    }
    #nav ul li a:hover {
        color: #F55856;
    }
    #nav ul.subs > li > a {
        font-size: 1.3em;
        margin-bottom: 10px;
        text-transform: uppercase;
    }
    #nav ul.subs > li li {
        float: none;
        padding-left: 8px;
        -moz-transition: padding 150ms ease-out 0s;
        -ms-transition: padding 150ms ease-out 0s;
        -o-transition: padding 150ms ease-out 0s;
        -webkit-transition: padding 150ms ease-out 0s;
        transition: padding 150ms ease-out 0s;
    }
    #nav ul.subs > li li:hover {
        padding-left: 15px;
    }
    /* common and top level styles */
    #nav span {
        display: none;
    }
    #nav, #nav ul {
        list-style: none outside none;
        margin: 0;
        padding: 0;
    }
    #nav {
        background-color: #F5F5F5;
        border-bottom: 5px solid #359BED;
        float: left;

        position: relative;
        width: 100%;
    }
    #nav ul.subs {
        background-color: #FFFFFF;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
        color: #333333;
        display: none;
        left: 0;
        padding: 2%;
        position: absolute;
        top: 54px;
        width: 96%;
    }
    #nav > li {
        border-bottom: 5px solid transparent;
        float: left;
        margin-bottom: -5px;
        text-align: left;
        -moz-transition: all 300ms ease-in-out 0s;
        -ms-transition: all 300ms ease-in-out 0s;
        -o-transition: all 300ms ease-in-out 0s;
        -webkit-transition: all 300ms ease-in-out 0s;
        transition: all 300ms ease-in-out 0s;
    }
    #nav li a {
        display: block;
        text-decoration: none;
        -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
        -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
        -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
        -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
        transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
        white-space: normal;
    }
    #nav > li > a {
        color: #333333;
        display: block;
        font-size: 1.3em;
        line-height: 49px;
        padding: 0 15px;
        text-transform: uppercase;
    }
    #nav > li:hover > a, #nav > a:hover {
        background-color: #F55856;
        color: #FFFFFF;
    }
    Demo 2 : [You must be registered and logged in to see this link.]
    Code:
    /* CSS3 delays for transition effects */
    .menu li:hover .submenu li:nth-child(1) {
        -webkit-transition-delay: 0s;
        -moz-transition-delay: 0s;
        -ms-transition-delay: 0s;
        -o-transition-delay: 0s;
        transition-delay: 0s;
    }
    .menu li:hover .submenu li:nth-child(2) {
        -webkit-transition-delay: 50ms;
        -moz-transition-delay: 50ms;
        -ms-transition-delay: 50ms;
        -o-transition-delay: 50ms;
        transition-delay: 50ms;
    }
    .menu li:hover .submenu li:nth-child(3) {
        -webkit-transition-delay: 100ms;
        -moz-transition-delay: 100ms;
        -ms-transition-delay: 100ms;
        -o-transition-delay: 100ms;
        transition-delay: 100ms;
    }
    .menu li:hover .submenu li:nth-child(4) {
        -webkit-transition-delay: 150ms;
        -moz-transition-delay: 150ms;
        -ms-transition-delay: 150ms;
        -o-transition-delay: 150ms;
        transition-delay: 150ms;
    }
    .menu li:hover .submenu li:nth-child(5) {
        -webkit-transition-delay: 200ms;
        -moz-transition-delay: 200ms;
        -ms-transition-delay: 200ms;
        -o-transition-delay: 200ms;
        transition-delay: 200ms;
    }
    .menu li:hover .submenu li:nth-child(6) {
        -webkit-transition-delay: 250ms;
        -moz-transition-delay: 250ms;
        -ms-transition-delay: 250ms;
        -o-transition-delay: 250ms;
        transition-delay: 250ms;
    }
    .menu li:hover .submenu li:nth-child(7) {
        -webkit-transition-delay: 300ms;
        -moz-transition-delay: 300ms;
        -ms-transition-delay: 300ms;
        -o-transition-delay: 300ms;
        transition-delay: 300ms;
    }
    .menu li:hover .submenu li:nth-child(8) {
        -webkit-transition-delay: 350ms;
        -moz-transition-delay: 350ms;
        -ms-transition-delay: 350ms;
        -o-transition-delay: 350ms;
        transition-delay: 350ms;
    }

    .submenu li:nth-child(1) {
        -webkit-transition-delay: 350ms;
        -moz-transition-delay: 350ms;
        -ms-transition-delay: 350ms;
        -o-transition-delay: 350ms;
        transition-delay: 350ms;
    }
    .submenu li:nth-child(2) {
        -webkit-transition-delay: 300ms;
        -moz-transition-delay: 300ms;
        -ms-transition-delay: 300ms;
        -o-transition-delay: 300ms;
        transition-delay: 300ms;
    }
    .submenu li:nth-child(3) {
        -webkit-transition-delay: 250ms;
        -moz-transition-delay: 250ms;
        -ms-transition-delay: 250ms;
        -o-transition-delay: 250ms;
        transition-delay: 250ms;
    }
    .submenu li:nth-child(4) {
        -webkit-transition-delay: 200ms;
        -moz-transition-delay: 200ms;
        -ms-transition-delay: 200ms;
        -o-transition-delay: 200ms;
        transition-delay: 200ms;
    }
    .submenu li:nth-child(5) {
        -webkit-transition-delay: 150ms;
        -moz-transition-delay: 150ms;
        -ms-transition-delay: 150ms;
        -o-transition-delay: 150ms;
        transition-delay: 150ms;
    }
    .submenu li:nth-child(6) {
        -webkit-transition-delay: 100ms;
        -moz-transition-delay: 100ms;
        -ms-transition-delay: 100ms;
        -o-transition-delay: 100ms;
        transition-delay: 100ms;
    }
    .submenu li:nth-child(7) {
        -webkit-transition-delay: 50ms;
        -moz-transition-delay: 50ms;
        -ms-transition-delay: 50ms;
        -o-transition-delay: 50ms;
        transition-delay: 50ms;
    }
    .submenu li:nth-child(8) {
        -webkit-transition-delay: 0s;
        -moz-transition-delay: 0s;
        -ms-transition-delay: 0s;
        -o-transition-delay: 0s;
        transition-delay: 0s;
    }
      /* submenu styles */
    .submenu {
        left: 0;
        max-height: 0;
        position: absolute;
        top: 100%;
        z-index: 0;

        -webkit-perspective: 400px;
        -moz-perspective: 400px;
        -ms-perspective: 400px;
        -o-perspective: 400px;
        perspective: 400px;
    }
    .submenu li {
        opacity: 0;

        -webkit-transform: rotateY(90deg);
        -moz-transform: rotateY(90deg);
        -ms-transform: rotateY(90deg);
        -o-transform: rotateY(90deg);
        transform: rotateY(90deg);

        -webkit-transition: opacity .4s, -webkit-transform .5s;
        -moz-transition: opacity .4s, -moz-transform .5s;
        -ms-transition: opacity .4s, -ms-transform .5s;
        -o-transition: opacity .4s, -o-transform .5s;
        transition: opacity .4s, transform .5s;
    }
    .menu .submenu li:hover a {
        border-left: 3px solid #454545;
        border-radius: 0;
        color: #ffffff;
    }
    .menu > li:hover .submenu, .menu > li:focus .submenu {
        max-height: 2000px;
        z-index: 10;
    }
    .menu > li:hover .submenu li, .menu > li:focus .submenu li {
        opacity: 1;

        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
      .menu li:hover {
        background-color: #1c1c1c;
        background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
        background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
        background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
        background: -o-linear-gradient(#1c1c1c, #1b1b1b);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
        background: linear-gradient(#1c1c1c, #1b1b1b);

        border-bottom: 2px solid #222222;
        border-top: 2px solid #1B1B1B;
    }
    .menu li:hover > a {
        border-radius: 5px 0 0 0;
        border-left: 3px solid #C4302B;
        color: #C4302B;
    }
      .menu, .menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .menu {
        height: 58px;
    }
    .menu li {
        background: -moz-linear-gradient(#292929, #252525);
        background: -ms-linear-gradient(#292929, #252525);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
        background: -webkit-linear-gradient(#292929, #252525);
        background: -o-linear-gradient(#292929, #252525);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
        background: linear-gradient(#292929, #252525);

        border-bottom: 2px solid #181818;
        border-top: 2px solid #303030;
        min-width: 160px;
    }
    .menu > li {
        display: block;
        float: left;
        position: relative;
    }
    .menu > li:first-child {
        border-radius: 5px 0 0;
    }
    .menu a {
        border-left: 3px solid rgba(0, 0, 0, 0);
        color: #808080;
        display: block;
        font-family: 'Lucida Console';
        font-size: 18px;
        line-height: 54px;
        padding: 0 25px;
        text-decoration: none;
        text-transform: uppercase;
      }
    Code:
    <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#s1">Menu 1</a>
            <ul class="submenu">
                <li><a href="#">Submenu a</a></li>
                <li><a href="#">Submenu b</a></li>
                <li><a href="#">Submenu c</a></li>
                <li><a href="#">Submenu d</a></li>
                <li><a href="#">Submenu e</a></li>
                <li><a href="#">Submenu f</a></li>
                <li><a href="#">Submenu g</a></li>
                <li><a href="#">Submenu h</a></li>
            </ul>
        </li>
        <li class="active"><a href="#s2">Menu 2</a>
            <ul class="submenu">
                <li><a href="#">Submenu a</a></li>
                <li><a href="#">Submenu b</a></li>
                <li><a href="#">Submenu c</a></li>
                <li><a href="#">Submenu d</a></li>
                <li><a href="#">Submenu e</a></li>
                <li><a href="#">Submenu f</a></li>
                <li><a href="#">Submenu g</a></li>
                <li><a href="#">Submenu h</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 3</a>
            <ul class="submenu">
                <li><a href="#">Submenu a</a></li>
                <li><a href="#">Submenu b</a></li>
                <li><a href="#">Submenu c</a></li>
                <li><a href="#">Submenu d</a></li>
                <li><a href="#">Submenu e</a></li>
                <li><a href="#">Submenu f</a></li>
                <li><a href="#">Submenu g</a></li>
                <li><a href="#">Submenu h</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 4</a></li>
        <li><a href="http://www.script-tutorials.com/whirling-dropdown-menu/">Back to tutorial</a></li>
    </ul>


    ChinhPhuc



    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