Một vài thắc mắc về cách làm menu đa cấp

#1

Mình đang tập tành làm 1 menu đa cấp như sau:

Mọi người giúp mình nhé, câu hỏi đã nằm trong code !

#2

sao post được iframe vậy bạn, mình làm mãi mà ko được.
còn với câu hỏi của bạn:



#3

để canh giữa cả cái ul thì do ko biết trước width của ul, bạn đành lồng thêm 1 cái outer div vậy (http://stackoverflow.com/questions/283961/centering-a-div-block-without-the-width) :

<div class="outer-center">
  <ul class="list inner-center">

rồi thêm CSS cho inner-center và outer-center

.outer-center {
  float:right;
  right:50%;
  position:relative;
}
.inner-center {
  float:right;
  right:-50%;
  position:relative;
}

cách này cũng cũ, hình như có cách dễ hơn ở dưới

còn để cho khi hover cái link trong li mà toàn bộ li được chọn thì trước tiên bạn choa thành display:block; và chuyển padding vào trong a thay vì để ở li.

li.item {
  float:left;
}
li.item a {
  display:block;
  padding:10px;
}

còn cái overflow thì khi bạn chỉnh width height gì cố định cộng thêm mấy cái word wrap gì đó nữa thì có thể tràn chữ, hidden là ko hiện những chữ bị tràn đó ra.

@Minh_Meo: thử paste link ko có ?editors=1100 thì nó tự động parse cái link codepen cho thì phải

EDIT: cách dễ hơn là xài display:inline-block; rồi thêm 1 cái div bọc ở ngoài cho text-align:center; là được:

<div class="center-text">
  <ul class="list">

.list {
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;
  display:inline-block; /*cho .list thành inline-block*/
}
.center-text {
  text-align:center;
}
#4

Em cho thêm cái đoạn code này

.list {
     ...
     position:absolute;
     left:35%;
}

vào .list để canh giữa có được không anh ?

Cho em hỏi vì sao có display:inline-block; thì nó mới căn vào giữa được ạ ? Em tưởng chỉ thêm cái div bọc bên ngoài và text-align:center; là đủ ?

Tương tự, vì sao phải để display:block; nữa ạ ? Em thử bỏ nó đi, chỉ để padding:10px không thì nó chỉ cách 2 bên trái phải, còn bên trên bên dưới nó không cách 10px …

1 Like
#5

canh giữa mà cho thụt vô lề trái 35% của parent container thì đa số là ko canh giữa đúng vì cái ul.list có width ko cố định, nếu nó có width là 30% của parent container thì thụt lề trái 35% là đúng, nhưng làm gì may mắn dài đúng 30% như vậy.

display inline-block là để cho parent container coi cái ul.list như 1 block text, từ đó text-align center mới có tác dụng. Nếu ko có thì nó coi ul.list là 1 div bình thường mà text align ko có tác dụng lên div.

còn cái display block kia thì mình bỏ vô thấy nó che hết luôn trên dưới chứ có biết tại sao đâu :kissing_closed_eyes:

#6

Bạn tham khao thêm menu đa cấp của mình nhé

#7

Cái menu đa cấp nhiều trường hợp làm cũng phức tạp đó.

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?