如何添加一個響應CSS菜單的子菜單

Question

我有這個網站對於我的CSS菜單：

<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; 
    } 
} 

我正在尋找一種方法來添加子菜單，然後第二子菜單上的第一個，但仍然保持它的響應，因爲它是。

我該怎麼做？

http://jsfiddle.net/EYjnG/

Answer 1

有很多方法來繼續這個問題。

我通常隱藏子菜單ul s與display: none並從position: absolute帶出內容流。給li包含子菜單position: relative，使子菜單是相對於他們的直接父母，然後定位子菜單，但請使用top,right,bottom和left屬性。最後，通過:hover或其他任何方式將子菜單更改爲display: block。

下面是這一個最基本的例子：

標記：

<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。它看起來像廢話，但你得到演習。

您可以繼續嵌套更多的子菜單，但是您可能想要爲子菜單的二級和更低級別使用不同的定位。

但請注意，手機瀏覽器並不真正支持:hover。至少他們不會這樣對待它。您不應讓您的子菜單僅在:hover上可訪問。考慮添加某種類的名稱切換點擊與JavaScript代替。

Answer 2

我不是100％確定如果你問如何使ID菜單有一個菜單功能或只是一個子菜單爲您的主要導航。

如果它屬於主導航的子菜單，那麼這將工作得很好。如果是用於移動菜單，請告訴我，我會爲您解決問題。 （求助）

這個小提琴的子菜單工作，同時仍然響應整個時間。您可以根據自己的需求設計款式，但這是一個堅實的開始。

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

這裏是移動導航工作，最大的問題是你有選擇的小提琴斷的運行沒有jQuery庫。

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; 
} 

我改變了ID拉來一個div因爲當它是一個錨標記的所有資產淨值的會失去他們的文字顏色。

我做了一個下拉式下拉式下拉菜單，同時仍然響應！在這個jsfiddle處找個高峯。在如CSS

JSFIDDLE Drop-Down with a nested Drop-Down

Answer 3

使用懸停：

a:hover 

，或者如果你的div id爲 「DIV1」：

#div1:hover 

Answer 4

這是我的看法：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%; 
} 

} 

標記的小由原來的修改，因爲我覺得它更容易使用類比一般的選擇，尤其是嵌套列表時。

它只是CSS（我使用SASS +指南針）。 :checked僞類用於打開和關閉菜單。我刪除了服務的鏈接，假設它只是用於打開子菜單（內容方面，如果要在導航中保留該頁面，則可以在子菜單中添加「所有服務」）。

最大的挑戰是設計中間斷點。根據父列表項的位置（奇數或偶數），子列表被拉伸到200％（因爲父母的寬度爲50％），並且定位使它從左側漂浮。小錯誤出現在3級關於導致邊緣顏色流血的列表寬度。

Additionaly，display: block和display:none選擇可以用max-height代替，以添加一些很酷的CSS動畫效果

Answer 5

JSFIDDLE DEMO 邏輯僅僅是簡單的，並有與此代碼

#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 */ 
}  

完整代碼：

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; 
} 

才明白這段代碼背後的邏輯，當你想，你可以做盡可能多的子菜單。