Tạo Vertical Navigation Menu với CSS3 và jQuery

09/09/2013

Menu là một thành phần không thể thiếu trong các website, để giúp các bạn có thêm một sự lựa chọn cho menu trong các website của các bạn. Hôm nay mình xin chia sẻ một mẫu menu đẹp được xây dựng chủ yếu từ CSS3 và jQuery. Các bạn có thể xem demo bài viết hoặc download trực tiếp về máy của mình trước khi tiến hành từng bước trong bài viết này.

Tạo Vertical Navigation Menu với CSS3 và jQuery

Xem Demo | Download

Bước 1: Việc đầu tiên là chúng ta tạo một bộ khung chuẩn html cho menu của mình.

<div id="wrapper">
    <ul class="menu">
        <li class="item1"><a href="#">Friends <span>340</span></a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
                <li class="subitem2"><a href="#">Strange "Stuff" <span>6</span></a></li>
                <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
            </ul>
        </li>
        <li class="item2"><a href="#">Videos <span>147</span></a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
                <li class="subitem2"><a href="#">Strange "Stuff" <span>6</span></a></li>
                <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
            </ul>
        </li>
        <li class="item3"><a href="#">Galleries <span>340</span></a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
                <li class="subitem2"><a href="#">Strange "Stuff" <span>6</span></a></li>
                <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
            </ul>
        </li>
        <li class="item4"><a href="#">Podcasts <span>222</span></a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
                <li class="subitem2"><a href="#">Strange "Stuff" <span>6</span></a></li>
                <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
            </ul>
        </li>
        <li class="item5"><a href="#">Robots <span>16</span></a>
            <ul>
                <li class="subitem1"><a href="#">Cute Kittens <span>14</span></a></li>
                <li class="subitem2"><a href="#">Strange "Stuff" <span>6</span></a></li>
                <li class="subitem3"><a href="#">Automatic Fails <span>2</span></a></li>
            </ul>
        </li>
    </ul>
</div>

Sau khi tạo xong, chúng ta sẽ có kết quả như thế này :

Tạo Vertical Navigation Menu với CSS3 và jQuery

Bước 2 : Định dạng với CSS

Trước tiên chúng ta sẽ định dạng cho menu :

body {
    font-size: 100%;
}
a {
    text-decoration: none;
}
ul,
ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#wrapper {
    width: 220px;
    margin: 100px auto;
    font-size: 0.8125em;
}
.menu {
    width: auto;
    height: auto;
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
    -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.menu > li > a {
    background-color: #616975;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
    background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');
    border-bottom: 1px solid #33373d;
    -webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
    -moz-box-shadow: inset 0px 1px 0px 0px #878e98;
    box-shadow: inset 0px 1px 0px 0px #878e98;
    width: 100%;
    height: 2.75em;
    line-height: 2.75em;
    text-indent: 2.75em;
    display: block;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #fff;
    text-shadow: 0px 1px 0px rgba(0,0,0,.5);
}

Để rõ hơn, chúng ta sẽ chèn thêm màu cho body

body {
    background:#32373d;
}

Tạo Vertical Navigation Menu với CSS3 và jQuery

Kế tiếp chúng ta sẽ định dạng cho phần Sub Menu

.menu ul li a {
    background: #fff;
    border-bottom: 1px solid #efeff0;
    width: 100%;
    height: 2.75em;
    line-height: 2.75em;
    text-indent: 2.75em;
    display: block;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.923em;
    font-weight: 400;
    color: #878d95;
}
.menu ul li:last-child a {
    border-bottom: 1px solid #33373d;
}

Bây giờ menu của chúng ta đã trở nên khá hơn :

Tạo Vertical Navigation Menu với CSS3 và jQuery
Kế tiếp chúng ta sẽ định dạng cho phần HoverActive

.menu > li > a:hover,
.menu > li > a.active {
    background-color: #35afe3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
    background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
    border-bottom: 1px solid #103c56;
    -webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
    -moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
    box-shadow: inset 0px 1px 0px 0px #6ad2ef;
}
.menu > li > a.active {
    border-bottom: 1px solid #1a638f;
}

Tiếp theo là Menu Icons

.menu > li > a:before {
    content: '';
    background-image: url(../images/sprite.png);
    background-repeat: no-repeat;
    font-size: 36px;
    height: 1em;
    width: 1em;
    position: absolute;
    left: 0;
    top: 50%;
    margin: -.5em 0 0 0;
}
.item1 > a:before {
    background-position: 0 0;
}
.item2 > a:before {
    background-position: -38px 0;
}
.item3 > a:before {
    background-position: 0 -38px;
}
.item4 > a:before {
    background-position: -38px -38px;
}
.item5 > a:before {
    background-position: -76px 0;
}

Tạo Vertical Navigation Menu với CSS3 và jQuery

Kế tiếp là Menu Numbers

.menu > li > a span {
    font-size: 0.857em;
    display: inline-block;
    position: absolute;
    right: 1em;
    top: 50%;
    background: #48515c;
    line-height: 1em;
    height: 1em;
    padding: .4em .6em;
    margin: -.8em 0 0 0;
    color: #fff;
    text-indent: 0;
    text-align: center;
    -webkit-border-radius: .769em;
    -moz-border-radius: .769em;
    border-radius: .769em;
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    text-shadow: 0px 1px 0px rgba(0,0,0,.5);
    font-weight: 500;
}
.menu > li > a:hover span, .menu > li a.active span {
    background: #2173a1;
}

Tạo Vertical Navigation Menu với CSS3 và jQuery

Tiếp theo là định dạng cho phần Sub Menu Numbers

.menu ul > li > a span {
    font-size: 0.857em;
    display: inline-block;
    position: absolute;
    right: 1em;
    top: 50%; /
    background: #fff;
    border: 1px solid #d0d0d3;
    line-height: 1em;
    height: 1em;
    padding: .4em .7em;
    margin: -.9em 0 0 0;
    color: #878d95;
    text-indent: 0;
    text-align: center;
    -webkit-border-radius: .769em;
    -moz-border-radius: 769em;
    border-radius: 769em;
    text-shadow: 0px 0px 0px rgba(255,255,255,.01));
}
.menu > li > ul li a:before {
    content: '▶';
    font-size: 8px;
    color: #bcbcbf;
    position: absolute;
    width: 1em;
    height: 1em;
    top: 0;
    left: -2.7em;
}
.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
    color: #32373D;
}

Tạo Vertical Navigation Menu với CSS3 và jQuery

Bước 3 : Vậy là phần css đã xong, chúng ta sẽ tiếp tục với phần jQuery để tạo ra hiệu ứng :

Trước tiên chúng ta sẽ chèn đoạn script sau ngay bên trong thẻ <head>

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>

Tạo một file scripts.js sau đó copy đoạn code bên dưới rồi past vào :

<script type="text/javascript">
$(function() {
    var menu_ul = $('.menu > li > ul'),
        menu_a  = $('.menu > li > a');
    menu_ul.hide();
    menu_a.click(function(e) {
        e.preventDefault();
        if(!$(this).hasClass('active')) {
            menu_a.removeClass('active');
            menu_ul.filter(':visible').slideUp('normal');
            $(this).addClass('active').next().stop(true,true).slideDown('normal');
        } else {
            $(this).removeClass('active');
            $(this).next().stop(true,true).slideUp('normal');
        }
    });
});
</script>

Vậy là xong, menu của chúng ta đã hoàn thành, nếu có vấn đề gì trong quá trình hoàn thành bài viết, các bạn để lại lời nhắn dưới dạng comments nhé, mình sẽ giúp các bạn hoàn thành bài viết này.

Chúc các bạn thành công !

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !
  • Kien Nguyen

    Cảm ơn thuthuatweb với bài viết rất hay. Tuy nhiên, có một vấn đề muốn nhờ thuthuatweb giúp đỡ.

    Mình đã làm 1 menu cơ bản ổn định, duy chỉ có điều là ở menu cha, nếu có menu con thì sẽ sổ ra menu con, khi click vào menu con sẽ đến trang cần đến. Tuy nhiên, nếu menu cha không có menu con, khi click vào nó thì nó cứ đơ ra, không chuyển đến trang mình muốn.

    Ví dụ:
    – Menu 1
    —- Submenu 1 (http://localhost/demo/submenu-1)
    —- Submenu 2 (http://localhost/demo/submenu-2)
    – Menu 2 (http://localhost/demo/menu-2)
    – Menu 3 (http://localhost/demo/menu-3)

    Khi click vào Menu 1, nó sổ ra 2 cái submenu. Khi click vào submenu này sẽ đến các link tương ứng. Tuy nhiên khi click vào Menu 2 hoặc Menu 3 thì nó cứ đơ ra, mà không chuyển đến những link tương ứng ở bên cạnh.

    Vậy trường hợp này xử lý làm sao? Mong thuthuatweb giúp đỡ. Thanks!

  • Kien Nguyen

    Sao không có ai giúp đỡ nhỉ? Hjx!

  • papyrut

    Bạn chỉ cần bỏ dòng lệnh e.preventDefault(); trong file script.js là được thôi bạn.

    • Kien Nguyen

      Nếu bỏ dòng lệnh này đi, khi click vào menu cha nó sẽ không hiện menu con mà sẽ đến link của menu cha luôn, đồng thời các menu con sẽ bị đóng lại bạn ạ !

      • papyrut

        Hì, bạn cứng nhắc quá, bạn có thể thay đổi sự kiện click bằng sự kiện .hover(function(){…} ,như vậy thì mỗi lần bạn rê chuột vào menu cha thì sẽ hiển thị menu con, và khi click vào menu nào thì nó sẽ theo link của menu đó. Chúc bạn thành công !

  • bin

    sao dw của mình nó báo là file scripts.js bị lỗi syntax ở dòng thứ 3 ấy nhỉ. Bạn xem lại giúp mình với nhé

    • papyrut

      Mọi người làm theo và đều thành công mà bạn, bạn xem lại phần cấu trúc html xem có đặt tên class đúng với khung html mà mình đã đưa ra không.

  • bibochip

    Bạn cho mình hỏi là những tấm hình này tìm ở đâu?

    • papyrut

      Ban co the tim thay o muc download toan bo bai viet do ban