Đổi từ click sang hover trong Menu Navigation Dropdown Bootstrap

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi seolagi, 13/8/18.

  1. seolagi

    seolagi

    Vip Member

    Tham gia ngày:
    16/4/14
    Bài viết:
    642
    Đã được thích:
    49
    Điểm thành tích:
    28
    Đổi từ click sang hover trong Menu Navigation Dropdown Bootstrap như thế nào vậy?
    Mình có cái menu bootstrap, mình trước có sử dụng làm cái gì đó nó chuyển từ hiệu ứng hiện tại là trên lattop click nó sẽ hiện menu con.
    Giờ mình muốn đổi từ click sang hover vào menu cha nó sẽ hiện các thanh menu con thì như thế nào?

    Mã:
    <div class="navbar navbar-inverse row" style="width: 100%;margin-top: 10px;margin-bottom: 5px;">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="/" class="navbar-brand">Trang chủ</a>
    </div>
    <div class="navbar-collapse in" style="padding-left: 15px; padding-right: 0px; height: auto;">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Thống kê <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Công việc</a></li>

                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tài khoản <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="/Admin/Master/Login">Đăng xuất</a></li>
                    <li><a href="/Admin/Master/Change">Đổi mật khẩu</a></li>
                    <li class="divider"></li>
                    <li><a href="/Admin/Master">Quản lý tài khoản</a></li>
                    <li><a href="/Admin/Role">Quản lý vai trò</a></li>
                    <li><a href="/Admin/WebAction">Quản lý chức năng</a></li>
                    <li class="divider"></li>
                    <li><a href="/Admin/MasterRole">Phân vai trò</a></li>
                    <li><a href="/Admin/WebActionRole">Phân quyền sử dụng</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
    chuyen-tu-click-sang-hover-trong-menu-bootstrap.jpg
     
    Cảm ơn đã xem bài:

    Đổi từ click sang hover trong Menu Navigation Dropdown Bootstrap

    danh sách diễn đàn rao vặt gov chất lượng

    Lượt xem: 539 - Xem Bài Viết Cùng Chủ Đề

    seolagi, 13/8/18
    #1
  2. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,278
    Đã được thích:
    1,038
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Của bạn đây:
    • Vào CSS thêm:
    HTML:
    .dropdown:hover .dropdown-menu{
  display:block;
}
    • Hoặc để mặc định nếu màn hình nhỏ hơn 768px của mobi thì phải click mới được thì dùng code (Khuyên dùng)
    HTML:
    @media only screen and (min-width: 768px) {
  .dropdown:hover .dropdown-menu{
     display:block;
  }
}
     
    admin, 13/8/18
    #2
    seolagi thích bài này.
  3. seolagi

    seolagi

    Vip Member

    Tham gia ngày:
    16/4/14
    Bài viết:
    642
    Đã được thích:
    49
    Điểm thành tích:
    28
    HTML:
    @media only screen and (min-width: 768px) {
  .dropdown:hover .dropdown-menu{
     display:block;
  }
}
    Code css tốt, cảm ơn ad nhiều
     
    seolagi, 13/8/18
    #3


Chủ để tương tự : Đổi từ
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Thay đổi màu sắc Placeholder CSS thẻ Input HTML 25/9/18
Ngôn ngữ lập trình CSS, HTML, HTML5 Đổi ngôn ngữ, Change Language Recaptcha Google nhứ thế nào 31/8/18
Ngôn ngữ lập trình CSS, HTML, HTML5 Thay đổi menu navbar collapse chế độ thu gọn trên mobi bootstrap 5/5/17
Ngôn ngữ lập trình CSS, HTML, HTML5 Sự thay đổi cách sử dụng trong html, thay đổi và tối ưu các thẻ trong html 17/2/14
Ngôn ngữ lập trình CSS, HTML, HTML5 Tắt tự động chạy slider Stop Autoplay Bootstrap Carousel slider như thế nào 7/8/18

Like và Share ủng hộ ITSEOVN