1. Hiện tại có một số member mạo danh BQT để giao dịch trên diễn đàn và đã LỪA ĐẢO khá nhiều tại chuyên mục Adwords... Mọi người cảnh giác và đọc bài: Giới thiệu giao dịch đảm bảo bởi @Admin

Cách xây dựng CSS Mega Drop-Down Menu cho Wordpress đơn giản

Thảo luận trong 'Hỗ trợ về mã nguồn, code' bắt đầu bởi lamvt, 14/4/14.

Lượt xem: 201,633
  1. lamvt

    lamvt Cựu Administrator

    Gia nhập:
    14/9/11
    Bài viết:
    973
    Đã được thích:
    1,123
    Web:
    Cách xây dựng CSS Mega Drop-Down Menu cho Wordpress đơn giản
    Thông thường trong các website lớn hoặc các website thương mại điện tử, việc dùng Mega Drop-Down Menu càng trở nên phổ biến.

    [​IMG]

    Với Mega Drop-Down Menu dễ dàng trình bày nhiều hơn sự lựa chọn cho người dùng, cũng như chính webmaster dễ dàng điều khiển các menu, thể hiện được nhiều hơn các giá trị nội dung.
    Với Wordpress, việc sử dụng Mega Drop-Down Menu với CSS một cách đơn giản và hiệu quả thường được sự chú trọng của các webmaster.
    Để làm được điều này các bạn làm theo hướng dẫn sau:

    Bước 1: tạo Navigation Bar

    Việc tạo menu cho Wordpress được thực hiện thông qua dashboard menu manager:
    Login admin: -> chọn giao diện -> trình đơn->main menu

    tham khảo theo hình:

    [​IMG]

    Bước 2: thêm CSS

    Mã:
    ul#menu-main-menu{
    list-style:none;
    width:100%;
    margin:0;
    padding:0;
    }
    Tạo css cho menu cha (chính)
    Mã:
    #menu-main-menu li {
      position: static;
    float:left;
    display:block;
    }
    #menu-main-menu > li > a {
      color: #428BCA;
    padding:15px 10px;
    }
    
    Bước 3 tạo Dropdown bởi CSS cho Sub-menu - các menu con

    Mã:
    #menu-main-menu li ul.sub-menu {
      background: none repeat scroll 0 0 #F9F9F9;
      border: 1px solid #01ABEF;
      border-bottom-left-radius: 2px;
      border-bottom-right-radius: 2px;
      box-shadow: 1px 1px 1px #DDDDDD;
      display: none;
      float: left;
      left: 0;
      list-style: none outside none;
      margin: 0;
      min-width: 160px;
      padding: 5px 0;
      position: absolute;
      right: 0;
      top: 100%;
      width: 100%;
      z-index: 1000;
    }
    Khi hover thì hiện dropdown
    Mã:
    #menu-main-menu li ul.sub-menu:hover,
    #menu-main-menu li:hover ul.sub-menu{display:block;}
    
    và xắp xếp của các menu con -submenu
    Mã:
    #menu-main-menu li ul.sub-menu > li {
      background: none;
      display: block;
      float: left;
      margin: 10px 0 10px 20px;
      max-width: 180px;
      min-width: 116px !important;
    }
    Tạo style cho menu con
    Mã:
    #menu-main-menu li ul.sub-menu > li > a {
      border-bottom: 1px dotted #E9E9E9;
      color: #222222 !important;
      display: inline-block;
      font-size: 13px;
      font-weight: bold;
      margin-bottom: 0.6em;
      padding-bottom: 0.4em;
      text-shadow: 0 1px 1px #FFFFFF;
      width: 100%;
    }
    Các bạn có thể tham khảo chi tiết DEMO tại: Kính hiển vi Micros
    hoặc Hoa cảnh sự kiện
    Lưu ý khi tạo menu dạng Text hoặc ảnh thì các bạn dùng dạng menu Liên kết và viết text hoặc ảnh trong phần descriptions nhé

    Cần trợ giúp Joomla , Wordpress ? Liên hệ http://joomquery.com/contact-us/

    Chúc vui

    JoomlaGroup thích bài này.
  2. markmark

    markmark Seo Newbie

    Gia nhập:
    3/5/15
    Bài viết:
    4
    Đã được thích:
    0
  3. duchieu6888

    duchieu6888 Top 10

    Gia nhập:
    28/4/14
    Bài viết:
    21
    Đã được thích:
    2
    Web:
    bạn ơi cho mình hỏi chút là với kiểu megamenu này thì mình muốn chèn thêm cái phần gọi dữ liệu vào đó có được không, ví dụ như cái này chẳng hạn thì phải làm sao?
    [​IMG]
  4. neconeco84

    neconeco84 Seo Newbie

    Gia nhập:
    30/12/14
    Bài viết:
    1
    Đã được thích:
    0
    Ba điều cần lưu ý khi mướn xe 16 chỗ tại Hà Nội dịp tết âm lịch Hiện nay các công việc Cho thue xe 16 cho đang xuất hiện tương đối nhiều trên thị trường đặt xe tại Hà Nội. Tuy nhiên, nhiều người vẫn băn khoăn không biết nên làm thế nào để thuê được chiếc xe cưới đời mới với chất lượng cũng như giá thành tốt nhất. Sau đây là một số gợi ý
    http://www.chothuexeredstar.com/2016/03/cho-thue-xe-i-du-le-hoi-lang-le-mat.html
  5. Kishikaisei

    Kishikaisei Top 9

    Gia nhập:
    8/12/15
    Bài viết:
    73
    Đã được thích:
    16
    Nơi ở:
    TPHCM
    Web:
    Thanks admin đã chia sẽ, đã thử thành công trên 1 web wordpress mới toanh, nhưng cần style thêm chút xíu nữa cho đẹp
    JoomlaGroup thích bài này.
  6. teamx123

    teamx123 Seo Newbie

    Gia nhập:
    3/8/16
    Bài viết:
    4
    Đã được thích:
    0
    Web:
  7. vayvontindung247

    vayvontindung247 Top 10

    Gia nhập:
    16/2/17
    Bài viết:
    26
    Đã được thích:
    1
    Nơi ở:
    Hải Dương
    Web:
  8. dietmoi37

    dietmoi37 Seo Newbie

    Gia nhập:
    11/5/18
    Bài viết:
    3
    Đã được thích:
    0

Nội quy khi thảo luận:

Dù bạn có cố tình spam bằng cách nào khi BQT diễn đàn phát hiện sẽ lập tức banned nick và xoá toàn bộ bài viết của bạn. Ngoài ra khi phát hiện ra Spam hãy gửi thông báo cho BQT diễn đàn. Hãy suy nghĩ trước khi hành động..!
✓ Khi muốn trả lời ai đó, bạn gõ @ cộng thêm nick diễn đàn của người đó phía sau @, giống như tag tên trên Facebook.
✓ Yêu cầu khi bình luận, bạn phải gõ chữ rõ ràng, không viết tắt, gõ tiếng Việt đầy đủ dấu câu.
✓ Nên dùng font chữ mặc định của diễn đàn, không tô màu lòe loẹt hay dùng size chữ quá lớn khi bình luận.
✓ Bài viết, comment... không được phép quảng cáo dịch vụ, rao vặt, pr... Loại trừ ở chuyên mục Rao vặt đã cho phép.
✓ Nghiêm cấm các chủ đề dạng: Cứu em với, help me, giật tít, câu view... dưới mọi hình thức.
✓ Tất cả các thành viên tham gia diễn đàn cần đọc kỹ Nội quy chung và nghiêm túc tuân thủ.


Chia sẻ trang này

Đang tải...