Tinh khiết CSS3 hoạt hình Menu cho Blogger

Bạn có thể đã nhìn thấy các menu động. Nhiều đơn hoạt hình sử dụng Lavalamp (một Plugin Jquery) nhưng hôm nay chúng tôi sẽ làm cho một menu mới trong đó có hình ảnh động như Lavalamp nhưng mà không có Javascript. Các hình ảnh động sẽ diễn ra với sự giúp đỡ của CSS3 chuyển tiếp. Menu, chúng tôi sẽ làm việc trên là màu đen. Trên di chuột nó trở nên tối hơn và một mũi tên xuất hiện ở trên các văn bản trình đơn.

Dưới đây là 2 bước đơn giản về cách bạn có thể thêm các trình đơn này vào blog blogger của bạn.

Bước 1: Thêm CSS

Đầu tiên đi vào Blog Tiêu đề → Template → Edit HTML. Nhấn Ctrl + F. Mở rộng <b:skin> ... </ b: skin> nếu nó không được mở rộng. Loại ]]> </ b: skin> trong hộp tìm kiếm và nhấn Enter. [Theo trình biên tập HTML mới]

Thêm đoạn mã dưới đây đưa ra chỉ trên ]]> </ b: skin>

#abt-nav,#abt-nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#abt-nav {
    background: url('http://www.script-tutorials.com/demos/249/css/menu_bg.png') no-repeat scroll 0 0 transparent;
    clear: both;
    font-size: 12px;
    height: 58px;
    padding: 0 0 0 9px;
    position: relative;
    width: 100%;
}
#abt-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;
}
#abt-nav li {
    background: url('http://www.script-tutorials.com/demos/249/css/menu_line.png') no-repeat scroll right 5px transparent;
    float: left;
    position: relative;
}
#abt-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;
}
#abt-nav li:hover > a {
    color: #00B4FF;
}
#abt-nav li:hover, #abt-nav a:focus, #abt-nav a:hover, #abt-nav a:active {
    background: none repeat scroll 0 0 #121212;
    outline: 0 none;
}
#abt-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);
}
#abt-nav ul li {
    background: none;
    width: 100%;
}
#abt-nav ul li a {
    float: none;
}
#abt-nav ul li:hover > a {
    background-color: #121212;
    color: #00B4FF;
}
#lavalamp {
    background: url('http://www.script-tutorials.com/demos/249/css/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;
}
#abt-nav li:nth-of-type(1):hover ~ #lavalamp {
    left: 13px;
}
#abt-nav li:nth-of-type(2):hover ~ #lavalamp {
    left: 90px;
}
#abt-nav li:nth-of-type(3):hover ~ #lavalamp {
    left: 170px;
}
#abt-nav li:nth-of-type(4):hover ~ #lavalamp {
    left: 250px;
}
#abt-nav li:nth-of-type(5):hover ~ #lavalamp {
    left: 330px;
}
#abt-nav li:nth-of-type(6):hover ~ #lavalamp {
    left: 410px;
}
#abt-nav li:nth-of-type(7):hover ~ #lavalamp {
    left: 490px;
}
#abt-nav li:nth-of-type(8):hover ~ #lavalamp {
    left: 565px;
}

Lưu Mẫu. Bây giờ chúng ta chỉ cần thêm HTML

Bước 2: Bổ sung thêm HTML

Đi vào Blog Tiêu đề → Giao diện → Thêm Widget → HTML / JavaScript. Dán mã dưới đây và lưu các phụ tùng.

<ul id="abt-nav">
    <li><a href="http://www.lutip.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.lutip.com/">Back</a></li>
    <div id="lavalamp"></div>
</ul>

Bạn chỉ cần thay đổi các liên kết và văn bản trình đơn.

Các tin khác