làm thế nào để thêm menu phụ trên menu css đáp ứng

Question

Tôi có html này cho menu css của tôi:

<nav class="clearfix"> 
    <ul class="clearix"> 
     <li><a href="http://www.domain.co.uk/">Homepage</a></li> 
     <li><a href="/services">Services</a></li> 
     <li><a href="/project-gallery">Project Gallery</a></li> 
     <li><a href="/contact-us">Contact Us</a></li> 
    </ul> 
    <a href="#" id="pull">Menu</a> 
</nav> 

 

nav { 
    height: 50px; 
    width: 100%; 
    background: #F00; 
    font-size: 14pt; 
    font-family: Arial; 
    position: relative; 
    border-bottom: 5px solid #FFFFFF; 
} 
nav ul { 
    padding: 0; 
    margin: 0 auto; 
    width: 100%; 
    height: 50px; 
    text-align: center; 
} 
nav li { 
    display: inline; 
} 
.clearfix:before, 
.clearfix:after { 
    content: " "; 
    display: table; 
} 
.clearfix:after { 
    clear: both; 
} 
.clearfix { 
    *zoom: 1; 
} 
nav a { 
    color: #FFFFFF; 
    display: inline-block; 
    width: auto; 

    text-align: center; 
    text-decoration: none; 
    line-height: 50px; 
} 
nav li a { 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    padding-left: 10px; 
    padding-right: 10px; 
} 
nav li:last-child a { 
    border-right: 0; 
} 
nav a:hover, nav a:active { 
    background-color: #000000; 
    color:#FFFFFF; 
} 
nav a#pull { 
    display: none; 
} 
@media screen and (max-width: 600px) { 
    nav { 
     height: auto; 
    } 
    nav ul { 
     width: 100%; 
     display: block; 
     height: auto; 
    } 
    nav li { 
     width: 50%; 
     float: left; 
     position: relative; 
    } 
    nav li a { 
     border-bottom: 1px solid #FFFFFF; 
     border-right: 1px solid #FFFFFF; 
    } 
    nav a { 
     text-align: left; 
     width: 100%; 
     text-indent: 25px; 
    } 
} 
@media only screen and (max-width : 480px) { 
    nav { 
     border-bottom: 0; 
    } 
    nav ul { 
     display: none; 
     height: auto; 
    } 
    nav a#pull { 
     display: block; 
     color:#FFFFFF; 
     background-color: #F00; 
     width: 100%; 
     position: relative; 
    } 
    nav a#pull:after { 
     content:""; 
     background: url('nav-icon.png') no-repeat; 
     width: 30px; 
     height: 30px; 
     display: inline-block; 
     position: absolute; 
     rightright: 15px; 
     top: 10px; 
    } 
} 
@media only screen and (max-width : 320px) { 
    nav li { 
     display: block; 
     float: none; 
     width: 100%; 
    } 
    nav li a { 
     border-bottom: 1px solid #FFFFFF; 
    } 
} 

Tôi đang tìm kiếm một cách để thêm các menu phụ và sau đó thứ hai menu phụ trên những cái đầu tiên nhưng vẫn giữ nó như đáp ứng như nó được.

Tôi làm cách nào để thực hiện việc này?

http://jsfiddle.net/EYjnG/

Answer 1

Có nhiều cách để đi trước về điều này.

Tôi thường ẩn menu phụ ul s với display: none và đưa chúng ra khỏi luồng nội dung với position: absolute. Cung cấp cho li chứa menu phụ position: relative để menu phụ liên quan đến cha mẹ trực tiếp của chúng, sau đó định vị các menu phụ, tuy nhiên, bạn sử dụng các thuộc tính top, right, bottom và left. Cuối cùng, thay đổi menu phụ thành display: block thông qua :hover hoặc bất kỳ thứ gì.

Dưới đây là một ví dụ trần xương này:

Markup:

<nav> 
    <ul> 
    <li><a>Link</a> 
     <ul> 
     <li><a>Sub link</a></li> 
     <li><a>Sub link</a></li> 
     <li><a>Sub link</a></li> 
     </ul> 
    </li> 
    </ul> 
</nav> 

CSS:

nav li { 
    position: relative; 
} 

nav li > ul { 
    position: absolute; 
    top: 100%; 
    display: none; 
} 

nav li:hover > ul { 
    display: block; 
} 

Here's a pen with this example. Nó trông giống như crap nhưng bạn nhận được khoan.

Bạn chỉ có thể giữ thêm nhiều menu phụ, nhưng có thể bạn sẽ muốn sử dụng vị trí khác nhau cho các menu phụ thứ hai và thấp hơn.

Tuy nhiên, xin lưu ý rằng trình duyệt trên điện thoại di động không thực sự hỗ trợ :hover. Ít nhất họ không đối xử với nó như nhau. Bạn không nên làm cho các menu phụ của bạn chỉ có thể truy cập trên :hover. Thay vào đó, hãy cân nhắc thêm một số loại chuyển đổi tên lớp khi nhấp vào bằng javascript.

Answer 2

Tôi không chắc chắn 100% nếu bạn hỏi cách làm cho menu id có chức năng menu hoặc chỉ là menu phụ cho điều hướng chính của bạn.

Nếu nó liên quan đến menu phụ cho điều hướng chính của bạn thì thao tác này sẽ hoạt động tốt. Nếu đó là cho trình đơn di động thì hãy cho tôi biết và tôi sẽ làm việc gì đó cho bạn. (SOLVED)

Fiddle này có menu phụ hoạt động trong khi vẫn đang đáp ứng toàn bộ thời gian. Bạn có thể phong cách nó theo nhu cầu của bạn nhưng nó là một khởi đầu vững chắc.

nav ul li ul { 
    display: none; 
    position: absolute; 
    width: 100%; 
    top: 100%; 
    background: #000; 
    color: #fff; 
} 

nav ul li:hover ul { 
    display: block; 
} 

nav ul li ul li { 
    display: block; 
    -webkit-transition: .6s ease; 
    -moz-transition: .6s ease; 
    -ms-transition: .6s ease; 
    -o-transition: .6s ease; 
} 

nav ul li ul li:hover { 
    background: #c1c1c1; 
    color: #2b2b2b; 
} 

JSFIDDLE

JSFIDDLE with relative sized sub menu

Đây là điều hướng di động làm việc và vấn đề lớn nhất là bạn không có thư viện jQuery chọn để fiddle để chạy tắt của.

Mobile Nav

HTML

<div id="pull"><span>Menu</span> 

</div> 

CSS

div span { 
    color: #FFFFFF; 
    display: inline-block; 
    width: auto; 
    text-align: center; 
    text-decoration: none; 
    line-height: 50px; 
    padding-left: 10px; 
    padding-right: 10px; 
} 

Tôi đã thay đổi id kéo đến một div bởi vì khi đó là một thẻ neo tất cả các navs sẽ mất màu văn bản của họ .

Tôi đã tạo danh sách thả xuống với trình đơn thả xuống trong khi vẫn đang phản hồi! Tham gia đỉnh cao tại jsfiddle này.

JSFIDDLE Drop-Down with a nested Drop-Down

Answer 3

sử dụng di chuột trong css như:

a:hover 

hoặc nếu div id của bạn là "div1":

#div1:hover 

Answer 4

Dưới đây là quan điểm của tôi: http://codepen.io/teodragovic/pen/rmviJ

HTML

<nav> 
    <input type="checkbox" id="nav-toggle-1" /> 
    <label for="nav-toggle-1" class="pull sub"><a>Menu</a></label> 
    <ul class="lvl-1"> 
    <li><a href="http://www.domain.co.uk/">Homepage</a></li> 
    <li> 
     <input type="checkbox" id="nav-toggle-2" /> 
     <label for="nav-toggle-2" class="sub"><a>Services</a></label> 
     <ul class="lvl-2"> 
     <li><a href="#">Service 1</a></li> 
     <li><a href="#">Service 2</a></li> 
     <li> 
      <input type="checkbox" id="nav-toggle-3" /> 
      <label for="nav-toggle-3" class="sub"><a>Service 3</a></label> 
      <ul class="lvl-3"> 
      <li><a href="#">Service 3 a</a></li> 
      <li><a href="#">Service 3 b</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Service 4</a></li> 
     </ul> 
    </li> 
    <li><a href="/project-gallery">Project Gallery</a></li> 
    <li><a href="/contact-us">Contact Us</a></li> 
    </ul> 
</nav> 

CSS

@import "compass"; 

/* globals */ 
* {box-sizing:border-box;} 

ul { 
    margin: 0; 
    padding: 0; 
} 

input { 
    position: absolute; 
    top: -99999px; 
    left: -99999px; 
    opacity: 0; 
} 

nav { 
    height: 50px; 
    background: #F00; 
    font: 16px/1.5 Arial, sans-serif; 
    position: relative; 
} 

a { 
    color: #FFFFFF; 
    display: inline-block; 
    text-decoration: none; 
    line-height: 50px; 
    padding: 0 20px; 
    &:hover, 
    &:active { 
    background-color: #000000; 
    color:#FFFFFF; 
    } 
} 

/* nav for +600px screen */ 

ul.lvl-1 { 
    text-align: center; 
    @include pie-clearfix; 
    li { 
    display: inline; 
    } 
} 

ul.lvl-2, 
ul.lvl-3 { 
    position: absolute; 
    width: 100%; 
    background: lighten(red, 15%); 
    display:none; 
} 
ul.lvl-3 {background: lighten(red, 30%);}  

#nav-toggle-2:checked ~ ul.lvl-2, 
#nav-toggle-3:checked ~ ul.lvl-3 { 
    display: block; 
} 

.pull {display: none;} 

/* arrow thingy - crappy positioning, needs tinkering */ 
.sub { 
    position: relative; 
    cursor: pointer; 
    &:after { 
    position: absolute; 
    top: 40%; 
    right: 0; 
    content:""; 
    width: 0; 
    height: 0; 
    border-right: 6px solid transparent; 
    border-left: 6px solid transparent; 
    border-top: 6px solid white; 
    } 
} 

/* medium-ish nav */ 

@media screen and (max-width: 600px) { 

nav {height: auto;} 

a { 
    text-align: left; 
    width: 100%; 
    text-indent: 25px; 
    border-bottom: 1px solid #FFFFFF; 
} 

ul > li { 
    width: 50%; 
    float: left; 
    &:nth-of-type(odd) { 
    border-right: 1px solid white; 
    } 
} 

li:nth-of-type(even) ul.lvl-2, 
li:nth-of-type(even) ul.lvl-3 { 
    position: relative; 
    width: 200%; 
    left: -100%; 
} 

li:nth-of-type(odd) ul.lvl-2, 
li:nth-of-type(odd) ul.lvl-3 { 
    position: relative; 
    width: 200%; 
    left: 1px; 
} 

ul.lvl-2 li {background: lighten(red, 15%);} 
ul.lvl-3 li {background: lighten(red, 30%);} 

} 

/* small-ish nav */ 

@media only screen and (max-width : 480px) { 

.pull { 
    display: block; 
    width: 100%; 
    position: relative; 
} 

ul { 
    height: 0; 
    > li { 
    width: 100%; 
    &:nth-of-type(odd) { 
     border-right: none; 
    } 
    } 
} 

#nav-toggle-1:checked ~ ul.lvl-1 { 
    height: auto; 
} 

#nav-toggle-2:checked ~ ul.lvl-2, 
#nav-toggle-3:checked ~ ul.lvl-3 { 
    //reverting stuff from previous breakpoint 
    left: 0; 
    width: 100%; 
} 

} 

Markup được chút sửa đổi từ gốc kể từ khi tôi tìm thấy nó dễ dàng hơn để sử dụng các lớp học hơn các bộ chọn nói chung, đặc biệt là khi làm tổ danh sách.

Chỉ có CSS ​​(Tôi đang sử dụng SASS + la bàn). :checked pseudo-class được sử dụng để bật và tắt các menu. Tôi đã xóa liên kết cho các dịch vụ giả định rằng nó sẽ được sử dụng chỉ để mở menu phụ (nội dung khôn ngoan, bạn luôn có thể thêm một cái gì đó như "tất cả các dịch vụ" trong menu phụ nếu bạn muốn giữ trang đó trong điều hướng).

Thách thức lớn nhất là tạo kiểu điểm giữa. Tùy thuộc vào vị trí của mục danh sách mẹ (lẻ hoặc thậm chí), danh sách con được kéo dài đến 200% (vì bố mẹ rộng 50%) và được định vị sao cho nó nổi từ bên trái. Lỗi nhỏ xuất hiện ở cấp độ 3 liên quan đến chiều rộng của danh sách khiến cho màu bị chảy máu trên các cạnh.

Additionaly, display: block và display:none selectors có thể được thay thế bằng max-height để thêm một số hiệu ứng hình ảnh động css mát

Answer 5

JSFIDDLE DEMO logic là chỉ đơn giản và có với mã này

#submenu,#submenu2,#submenu3{ 
    visibility:hidden;  /*turn all the submenus visibility hidden */ 
} 
#top_menu li.first:hover #submenu,#submenu li.second:hover #submenu2,#submenu2  li.second:hover #submenu3{ 
    visibility:visible;  /*On hover turn on visibility visible */ 
}  

Toàn bộ mã:

HTML:

<div id="top_menu"> <!--MAIN MENU -->      
    <ul> 
     <li class="first">menu1     
      <div id="submenu"> <!--First Submenu --> 
       <ul class="abc"> 
        <li class="second">item1  
         <div id="submenu2"> <!--Second Submenu --> 
          <ul class="abc"> 
           <li class="second">item1_1 
            <div id="submenu3"> <!--Third Submenu --> 
             <ul class="abc"> 
              <li class="second">item1_1_1</li> 
              <li class="second">item1_1_2</li> 
              <li class="second">item1_1_3</li> 
             </ul> 
            </div> <!--third Submenu Ends here--> 
           </li> 
           <li class="second">item1_2</li> 
           <li class="second">item1_3</li> 
          </ul> 
         </div> <!--Second Submenu Ends here-->       
        </li> 
        <li class="second">item2 
           <div id="submenu2"> 
            <ul class="abc"> 
             <li class="second">item2_1</li> 
             <li class="second">item2_2</li> 
             <li class="second">item2_3</li> 
            </ul> 
           </div>        
        </li> 
        <li class="second">item3 
           <div id="submenu2"> 
            <ul class="abc"> 
             <li class="second">item3_1</li> 
             <li class="second">item3_2</li> 
             <li class="second">item3_3</li> 
            </ul> 
           </div>        
        </li> 
       </ul> 
      </div> 
     </li> 

     <li class="first">menu2 
      <div id="submenu"> 
       <ul class="abc"> 
        <li class="second">item1</li> 
        <li class="second">item2</li> 
        <li class="second">item3</li> 
        <li class="second">item4</li> 
       </ul> 
      </div> 
     </li> 

    </ul> 
</div> 

CSS:

ul{ 
    padding:10px; 
    padding-right:0px; 
} 
li.first{ 
    display:block; 
    display:inline-block; 
    padding:5px; 
    padding-right:25px; 
    padding-left:25px; 
    cursor:pointer; 
} 
li.second{ 
    list-style:none; 
    margin:0px; 
    padding:5px; 
    padding-right:25px; 
    margin-bottom:5px; 
    cursor:pointer; 
} 
#submenu li.second:hover{ 
    background:red; 
    border-radius:5px; 
} 

#submenu2 li.second:hover{ 
    background:green; 
    border-radius:5px; 
} 
/*********MAIN LOGIC***************/ 

#submenu,#submenu2,#submenu3{ 
    visibility:hidden; 
} 
#top_menu li.first:hover #submenu,#submenu li.second:hover #submenu2,#submenu2 li.second:hover #submenu3{ 
    visibility:visible; 
} 
/**********STYLING SUBMENUS**************/ 
#submenu{ 
    padding-right:0px; 
    text-align:left; 
    position:absolute; 
    background:white; 
    box-shadow:0px 0px 5px; 
    border-radius:5px; 
} 
#submenu2{ 
    text-align:left; 
    position:absolute; 
    left:70px; 
    top:0px; 
    background:red; 
    box-shadow:0px 0px 5px; 
    border-radius:5px; 
} 
#submenu3{ 
    text-align:left; 
    position:absolute; 
    left:80px; 
    top:0px; 
    background:green; 
    box-shadow:0px 0px 5px; 
    border-radius:5px; 
} 

chỉ hiểu được logic đằng sau mã này và bạn có thể thực hiện như nhiều menu con như bạn muốn.