Cấp bậc tác giả:

HTML

Hướng dẫn làm menu ngang có mũi tên sau khi chọn tab tương ứng

Được viết bởi webmaster ngày 31/10/2015 lúc 11:59 AM
Xem hình để biết rõ hơn
  • 0
  • 3501

Hướng dẫn làm menu ngang có mũi tên sau khi chọn tab tương ứng

Loading...

Hôm nay DOTNET GROUP - Thiết kế web tại Đà Nẵng sẽ viết một bài thủ thuật khá thú vị mà nhiều bạn chưa nắm được, đó là kỹ xảo thuộc tính after và postion trong CSS
Ví dụ bạn muốn làm như hình dưới:
huong-dan-lam-menu-co-mui-ten.jpg
Bạn chỉ cần tạo các thẻ ul và li tương ứng, sau đó thêm các CSS vào

HTML:
<div class="page-nav">
<ul id="page-menu-nav" class="">
<li><a href="#tong-quan" title="Tổng quan" class="active">Tổng quan</a></li>
<li><a href="#noi-dung" title="Nội dung">Nội dung</a></li>
<li><a href="#hoc-phi" title="Học phí">Học phí</a></li>
<li><a href="#dang-ky" title="Đăng ký">Đăng ký</a></li>
</ul>
<div id="tong-quan" data-title="Tổng quan" class="entry-content">
<p>Khóa đào tạo SEO Online ra đời từ nhu cầu tìm hiểu về SEO của các bạn học viên đến từ Đà Nẵng, do không có điều kiện để tham gia <a title="Khóa học SEO tiêu chuẩn - Trung tâm đào tạo thiết kế web chuẩn SEO DOTNET GROUP" href="/ChuyenMuc/Thiet-ke-Web-chuan-SEO-923.aspx" target="_blank">khóa học SEO tiêu chuẩn</a>&nbsp;của DOTNET GROUP. Khóa học SEO Online được Mr. Quang Le CEO của DOTNET GROUP trực tiếp hướng dẫn các bạn những phương pháp cần thiết để làm cho trang web của bạn thành công.</p>
<hr>
</div>
</div>

Dòng CSS:

#page-menu-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
}

.page-nav ul {
    color: #fff;
    margin: 0;
    position: relative;
    z-index: 9999;
}

#page-menu-nav li {
    display: inline-block;
}

#page-menu-nav li a.active {
    background: #ed1c24;
    transition: 0.2s all;
}

#page-menu-nav li a {
    padding: 0 10px;
    display: block;
    line-height: 36px;
    text-decoration: none;
    transition: 0.2s all;
    position: relative;
}
.page-nav {
    background: #47b64b;
}
#page-menu-nav li a.active:after {
    position: absolute;
    display: block;
    content: '';
    border-top: 6px solid #ED1C24;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    left: 30px;
}

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

Loading...

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML