Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.

  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Xin trợ giúp hoàn thành Code tạo danh sách Menu

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi anhtuan1006, 12/7/16.

Lượt xem: 3,813

  1. anhtuan1006 Thành viên cấp 2

    Mình làm 1 danh sách Menu gồm 2 File:
    1. File HTML(lưu với tên là: bai 12 - menu ngang.html)

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Học CSS</title>
    <link rel="stylesheet" type="text/css" href="bai 12 - menu ngang.css" />
    </head>

    <body>
    <div id="menu">
    <ul>
    <li>
    <a href="#">Thực Phẩm</a>
    <ul class="sub-menu">
    <li>
    <a href="#">Trái Cây</a>
    <ul class="p-menu">
    <li><a href="#">Táo</a></li>
    <li><a href="#">Bưởi</a></li>
    <li><a href="#">Lê</a></li>
    </ul>
    </li>

    <li><a href="#">Rau</a></li>
    <li><a href="#">Thịt</a></li>
    <li><a href="#">Hải Sản</a></li>
    </ul>
    </li>

    <li><a href="#">May Mặc</a> </li>
    <li><a href="#">Nội Thất</a></li>
    <li><a href="#">Điện Tử</a></li>
    <li><a href="#">Đồ Chơi</a></li>

    </ul>
    </div>
    </body>
    </html>

    File CSS (lưu với tên là: bai 12 - menu ngang.css)
    *{/* reset lại CSS*/
    margin:0;
    padding:0;}

    #menu ul{
    list-style-type:none;
    text-align:center;
    margin-left: 300px
    }

    #menu ul li{
    width:120px; height:40px;
    line-height:40px;
    background:#1f568B;
    float:left;
    border-right: solid thin #FFF;
    }

    #menu ul li a{
    text-decoration:none;
    color:#FFF;
    font-weight:bold}

    #menu .sub-menu{
    position: relative;
    margin-left:0;margin-top:0;
    display:none
    }

    #menu .sub-menu li{
    border-top: solid thin #FFF
    }

    #menu .p-menu li {
    position:relative;
    top:-41px;
    left:-179px;
    display:none;
    }

    #menu ul li:hover{
    background:#CCC
    }

    #menu ul li:hover .sub-menu{
    display:block}

    #menu ul li .sub-menu li:hover .p-menu{
    display:block}

    ------------------------------------------------------------------------------------------------------------------
    Code gần hoàn thiện rồi, có điều khi hover vào mục Trái Cây thì danh sách : Táo , Bưởi , Lê --> không hiện ra.
    Mình không biết có phải mình viết sai dòng lệnh bôi đỏ ở trên không mà làm mãi không được.
    Các bạn xem giúp mình nhé

    ...

    Xem thêm các chủ đề cùng chuyên mục

    Facebook Group Việt Designer
    Tham gia nhóm
    Facebook Fanpage Việt Designer
    Thích trang
    anhtuan1006, 12/7/16
    #1
  2. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Bạn nào biết xin giúp đỡ mình với, mình vẫn loay hoay mãi mà chưa chỉnh được...
    anhtuan1006, 12/7/16
    #2
  3. Tư Xả Láng

    Tư Xả Láng Thành viên cấp 2

    Bạn thử sửa lại chổ nầy:
    #menu .p-menu li {
    position:relative;
    top:-41px;
    left:-179px;
    display:none;
    }

    ...thành như vầy:
    #menu .sub-menu .p-menu li {
    position:relative;
    top:-41px;
    left:-179px;
    display:none;
    }
    #menu .sub-menu:hover .p-menu li {
    display:block;
    }

    Mình chưa rảnh mần thử nhưng hy vọng là được
    Tư Xả Láng, 12/7/16
    #3
    anhtuan1006 thích bài viết này
  4. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    File CSS của mình lúc đầu là thế này:

    *{/* reset lại CSS*/
    margin:0;
    padding:0;}

    #menu ul{
    list-style-type:none;
    text-align:center;
    margin-left: 300px
    }

    #menu ul li{
    width:120px; height:40px;
    line-height:40px;
    background:#1f568B;
    float:left;
    border-right: solid thin #FFF;
    }

    #menu ul li a{
    text-decoration:none;
    color:#FFF;
    font-weight:bold}

    #menu .sub-menu{
    position: relative;
    margin-left:0;margin-top:0;
    display:none
    }

    #menu .sub-menu li{
    border-top: solid thin #FFF
    }

    #menu .p-menu li {
    position:relative;
    top:-41px;
    left:-179px;
    display:none;
    }

    #menu ul li:hover{
    background:#CCC
    }

    #menu ul li:hover .sub-menu{
    display:block}

    #menu ul li .sub-menu li:hover .p-menu{
    display:block}

    ---------------------------------------------------------------------------------------
    Theo ý của bạn thì mình sửa 2 đoạn bôi đỏ ở trên lần lượt thành 2 đoạn xanh này:

    #menu .sub-menu .p-menu li {
    position:relative;
    top:-41px;
    left:-179px;
    display:none;
    }

    #menu .sub-menu:hover .p-menu li {
    display:block;
    }

    ---------------------------------------------------------------------------------------------------------
    Tuy nhiên vẫn không ổn bạn ah, khi hover vào các mục : Thịt, Rau, Hải sản thì danh sách Táo, Bưởi, Lê vẫn xổ ra. Nhờ bạn xem lại giúp mình với.
    -----------------------------------------------------------------------------------------------------
    Cảm ơn bạn nhiều nghen, thấy bạn vào giúp đỡ là mình đã thấy mừng rồi :D:D:D
    anhtuan1006, 12/7/16
    #4
  5. Tư Xả Láng

    Tư Xả Láng Thành viên cấp 2

    Ờ! mà bạn nói đúng roài! thui đễ tối rảng sửa cho.:))
    Chỉnh sửa lần cuối: 12/7/16
    Tư Xả Láng, 12/7/16
    #5
  6. Tư Xả Láng

    Tư Xả Láng Thành viên cấp 2

    Chỉnh sửa lần cuối: 12/7/16
    Tư Xả Láng, 12/7/16
    #6
  7. blademaster_sf

    blademaster_sf Thành viên cấp 2

    Bạn sai ở chô không viết rõ ra từng mục menu riêng khiến nó lẫn vào nhau. Code mình đã chỉnh lại cho bạn

    Code:
    
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Học CSS</title>
<style>

*{/* reset lại CSS*/ 
margin:0;
padding:0;}

#menu ul{
list-style-type:none;
text-align:center;
margin-left: 300px
}

#menu ul li{
width:120px; height:40px;
line-height:40px;
background:#1f568B;
float:left;
border-right: solid thin #FFF;
}

#menu ul li a{
text-decoration:none;
color:#FFF;
font-weight:bold}

#menu .sub-menu{
position: relative;
margin-left:0;margin-top:0;
display:none
}

#menu .sub-menu li{
border-top: solid thin #FFF
}

#menu .p-menu li {
position:relative;
}
#menu .p-menu {
position:absolute;
top:0px;
left:-200px;
}

#menu ul li:hover{
background:#CCC
}

#menu ul li:hover ul.sub-menu {
display:block
}#menu ul li:hover .p-menu{
display:none;}

#menu ul li .sub-menu li:hover .p-menu{
display:block}

</style>

</head>

<body>
<div id="menu">
<ul>
<li>
<a href="#">Thực Phẩm</a>
<ul class="sub-menu">
<li>
<a href="#">Trái Cây</a>
<ul class="p-menu">
<li><a href="#">Táo</a></li>
<li><a href="#">Bưởi</a></li>
<li><a href="#">Lê</a></li>
</ul>
</li>

<li><a href="#">Rau</a></li>
<li><a href="#">Thịt</a></li>
<li><a href="#">Hải Sản</a></li>
</ul>
</li>

<li><a href="#">May Mặc</a> </li>
<li><a href="#">Nội Thất</a></li>
<li><a href="#">Điện Tử</a></li>
<li><a href="#">Đồ Chơi</a></li>

</ul>
</div>
</body>
</html>
    blademaster_sf, 12/7/16
    #7
    anhtuan1006 thích bài viết này
  8. Tư Xả Láng

    Tư Xả Láng Thành viên cấp 2

    Tư Xả Láng, 12/7/16
    #8
    anhtuan1006 thích bài viết này
  9. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Bạn blademaster_sf , bạn xem lại giúp mình với , nó bị đè lên nhau trông xấu quá.

    Cảm ơn 2 bạn nhiều !
    anhtuan1006, 13/7/16
    #9
  10. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Mình làm được rồi, ở dòng đầu tiên - của đoạn bôi đỏ đầu tiên- ở bài #4 chỉ cần bỏ cái li đi là OK.

    Nhưng mình thấy phần này mình vẫn còn "tơ lơ mơ" quá, nhất là mấy cái Position: Relative ,absolute

    cứ lẫn lộn hết lên ... chẳng biết trường hợp nào thì dùng cái nào nữa....với lại mấy con số -41 với -179 kia

    mình cứ phải tăng lên , giảm xuống rồi lại thay đổi , thay đổi ... thế nào cho nó nằm cân xứng , nói chung

    phải mò mãi mới ra được 2 số đó

    Kết luận: Mình thấy phần này vẫn khó nhai quá !
    Chỉnh sửa lần cuối: 13/7/16
    anhtuan1006, 13/7/16
    #10
  11. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    --------------------------------------------------
    anhtuan1006, 13/7/16
    #11
  12. blademaster_sf

    blademaster_sf Thành viên cấp 2

    :v Muốn chỉnh kích thước với khoảng cách hợp lý thì bạn đừng để display:none nữa. Cho cho hiện ra mà tùy chỉnh theo ý mình thui.
    Như menu di chuyển sang trái thì bạn cho left = kích thước của cái ul li cha của nó thôi:3

    nhất là mấy cái Position: Relative ,absolute

    Bạn cứ hiểu là "Relative" như gốc tọa độ O (0;0)
    Còn absolute là thằng di chuyển theo A (3;5) chả hạn chứ có gì đâu

    Css là dễ nhất rùi bạn, Có gì phức tạp đâu
    blademaster_sf, 13/7/16
    #12
    anhtuan1006 thích bài viết này
  13. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Cảm ơn blademaster_sf đã góp ý cho mình ...mình sẽ tìm hiểu thêm mấy cái đó
    anhtuan1006, 13/7/16
    #13
  14. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    Các bạn có thể giải thích thêm cho mình chỗ này được không:

    #menu .p-menu li {
    position:relative;
    top:-41px;
    left:-179px;
    display:none;
    }

    Tại sao khi thay cặp :
    top:-41px;
    left:-179px;

    Bằng cặp:
    margin-left:0;
    margin-top:0;

    giống với thằng sub-menu thì lại không được vầy ?????????
    anhtuan1006, 13/7/16
    #14
  15. HanTal U

    HanTal U Thành viên cấp 2

    'Nhưng mình thấy phần này mình vẫn còn "tơ lơ mơ" quá, nhất là mấy cái Position: Relative ,absolute

    cứ lẫn lộn hết lên ... chẳng biết trường hợp nào thì dùng cái nào nữa"

    Nếu không thực sự cần đến position thì nên hạn chế dùng, còn về cơ bản thì bạn chỉ cần nhớ "khẩu quyết": Absolute là con của Realtive.

    Một đối tượng "absolute" dịch chuyển các khoảng "top - left - right - bottom" theo 1 tọa độ dựa theo đôi tượng bao nó có position là "relative"

    Nếu bạn đặt postion cho 1 đối tượng là absolute mà không đặt thêm đối tượng nào khác là relative thì mặc định xem body của bạn (cái bao quát lớn nhất) là relative.

    P/s: Đến một lúc nào bạn dùng đc pure CSS để làm được những cái vi diệu như này: http://codepen.io/lbebber/pen/LELBEo bạn sẽ thấy mình "ảo" như người dùng Excel để vẽ tranh vậy. Học CSS rất dễ nghiện :3

    Chúc bạn thành công!
    HanTal U, 13/7/16
    #15
    anhtuan1006 thích bài viết này
  16. anhtuan1006

    anhtuan1006 Thành viên cấp 2

    HanTal U , um mình cảm ơn bạn nhiều nhé ....

    Đúng là học cái CSS này thú vị thật đó !
    anhtuan1006, 13/7/16
    #16

Ủng hộ diễn đàn