用於觸摸屏的純CSS分層菜單（iPad）

Question

是否可以創建可在桌面和觸摸屏瀏覽器上工作的漂亮多級菜單？沒有任何js。 由於觸摸屏沒有:hover屬性，讓我瘋狂的爲兩種變體創建一個樣式表。 在桌面上的行爲應該是：在懸停 - 打開子菜單，點擊 - 去鏈接。 在iPad上：在第一次水龍頭 - 打開子菜單，第二次水龍頭 - 去鏈接。

感謝您的任何建議。

Answer 1

純CSS，目標:hover和:active來完成你想要的東西。

在您的iPhone/iPad上試用下列網址：www.thepricklepatch.com。這不是完美的，但這就是我正在做的創造我想要的效果。

編輯： 對不起，我花了這麼長的時間回覆 - 本週末露營，沒有電腦允許！ :)這是該網站的CSS，剝離下來，以獲得你想要的位。我已經爲你添加了評論。這裏有空白的規則，我用來設置菜單的風格，我刪除了任何處理純粹外觀的CSS，並專注於元素的定位。

/* NAVIGATION ************************************************************************/ 

nav > ul > li 
{ 
    display: inline-block; /* sets elems to be inline but retain block-like properties, you may not need this */ 
    position: relative; /* resets the positioning context */ 
    cursor: pointer; /* sets the mouse cursor to look like a link for menus that do not have an A element */ 
} 

nav > ul > li:hover 
{ 
    position: relative; /* reset positioning context */ 
    z-index: 2000; /* bring element top-most */ 
} 

nav > ul > li:hover, 
nav > ul > li:hover > a /* HOVERED list elems and links in the main menu */ 
{ 
} 

nav > ul > li, 
nav > ul > li > a /* list elems and links in the menu */ 
{ 
} 

nav > ul > li > div.submenu /* only first level of submenus */ 
{ 
    display: none; /* hide the submenus by default */ 
} 

nav > ul > li:hover > div.submenu /* Only HOVERED OVER first level of submenus */ 
{ 
    display: block; /* display the submenus when the LI is hovered over */ 
    position: absolute; 
    top: 100%; /* set to the bottom of the menu */ 
    left: -1px; /* move left 1px from left of LI element */ 
    z-index: 1000; /* top most */ 
} 

nav > ul div.submenu /* All submenus */ 
{ 
} 

nav > ul div.submenu > ul /* All lists of links in a submenu */ 
{ 
    background: #fff; 
    padding: 2px; 
    border: solid 2px #f89d57; 
} 

nav > ul div.submenu > ul > li, /* All list elements in any submenu */ 
nav > ul div.submenu > ul > li > a /* All list elements containing links in any submenu */ 
{ 
} 

nav > ul div.submenu > ul > li 
{ 
} 

nav > ul div.submenu > ul > li > a 
{ 
display: block; 
} 

nav > ul div.submenu > ul > li, 
nav > ul div.submenu > ul > li > a /* All links in any submenu */ 
{ 
} 

nav > ul div.submenu > ul > li:hover /* All HOVERED li containing links in any submenu */ 
{ 
} 

nav > ul div.submenu > ul > li:hover > a /* All links HOVERED in any submenu */ 
{ 
} 

nav div.submenu > ul > li > div.submenu, 
nav div.submenu > ul > li > a + div.submenu /* 2nd level of submenus and on */ 
{ 
    display: none; /* Hide by default submenus */ 
} 

nav div.submenu > ul > li:hover div.submenu, 
nav div.submenu > ul > li:hover a + div.submenu /* 2nd level submenus and on (if even used) */ 
{ 
    display: block; /* Show submenus when parent hovered */ 
    position: absolute; 
    top: -2px; 
    left: 75%; 
    z-index: 1000; 
} 

nav li:hover 
{ 
    position: relative; 
    z-index: 2000; 
} 

僅供參考，這裏是我使用的HTML：

<nav> 

     <ul> 

      <li><a href="/index.aspx">Home</a></li> 

      <li><a href="/shop-by.aspx">Shop By&hellip;</a> 

       <div class="submenu"> 

        <ul> 

         <li>Shop By Product 

          <div class="submenu"> 

           <ul> 

            <li><a href="/products.aspx?category=furniture">Furniture</a></li><li><a href="/products.aspx?category=bed-bath">Bed & Bath</a></li><li><a href="/products.aspx?category=decor-accents">Décor Accents</a></li><li><a href="/products.aspx?category=tabletops">Tabletops</a></li><li><a href="/products.aspx?category=rugs-curtains">Rugs & Curtains</a></li><li><a href="/products.aspx?category=home-office">Home Office</a></li> 

           </ul> 

          </div> 

         </li> 

         <li>Shop By Room 

          <div class="submenu"> 

           <ul> 

            <li><a href="/products.aspx?room=bathroom">Bathroom</a></li><li><a href="/products.aspx?room=bedroom">Bedroom</a></li><li><a href="/products.aspx?room=dining">Dining</a></li><li><a href="/products.aspx?room=kitchen">Kitchen</a></li><li><a href="/products.aspx?room=living-room">Living Room</a></li><li><a href="/products.aspx?room=media-office">Media & Office</a></li> 

           </ul> 

          </div> 

         </li> 

         <li>Shop By Color 

          <div class="submenu"> 

           <ul> 

            <li><a href="/products.aspx?color=black">Black</a></li><li><a href="/products.aspx?color=blue">Blue</a></li><li><a href="/products.aspx?color=brown">Brown</a></li><li><a href="/products.aspx?color=green">Green</a></li><li><a href="/products.aspx?color=orange">Orange</a></li><li><a href="/products.aspx?color=purple">Purple</a></li><li><a href="/products.aspx?color=red">Red</a></li><li><a href="/products.aspx?color=white">White</a></li><li><a href="/products.aspx?color=yellow">Yellow</a></li> 

           </ul> 

          </div> 

         </li> 

        </ul> 

       </div> 

      </li> 

      <li><a href="/services.aspx">Services</a> 

       <div class="submenu"> 

        <ul> 

         <li><a href="/">Home Consultation</a></li> 

         <li><a href="/">Interior Design</a></li> 

         <li><a href="/">Floral Design</a></li> 

         <li><a href="/">Event Planning</a></li> 

        </ul> 

       </div> 

      </li> 

      <li><a href="/galleries.aspx">Gallery</a> 

       <div class="submenu"> 

        <ul> 

         <li><a href="/">Rooms</a></li> 

         <li><a href="/">Floral</a></li> 

         <li><a href="/">Christmas</a></li> 

         <li><a href="/">Other Seasons</a></li> 

        </ul> 

       </div> 

      </li> 

      <li><a href="/promotions.aspx">Promotions</a> 

       <div class="submenu"> 

        <ul> 

         <li><a href="/">Semi-Annual</a></li> 

         <li><a href="/">Sale</a></li> 

         <li><a href="/">Sale by Season</a></li> 

        </ul> 

       </div> 

      </li> 

      <li><a href="/contact-us.aspx">Contact Us</a> 

       <div class="submenu"> 

        <ul> 

         <li><a href="/">Contact Info</a></li> 

         <li><a href="/">Comments</a></li> 

         <li><a href="/">Inquiries</a></li> 

        </ul> 

       </div> 

      </li> 

      <li class="navWishList"><a href="/wish-list.aspx">Wish List</a></li> 

     </ul> 

    </nav> 

Answer 2

如果您的主菜單節點沒有鏈接到任何地方，您可以使用JavaScript來做到這一點，而不會有太多麻煩。您可以將其添加爲點擊功能，這可以在觸控設備上使用。

你也可以用：焦點和：活動狀態與兄弟選擇器結合使用。這將允許菜單與鍵盤導航一起顯示，這是一個優點，但是當您選擇到子菜單鏈接時，您將不得不添加一些JavaScript來隱藏它。

<ul> 
    <li> 
     <a class="menuLink" href="javascript:void(0);">Menu 1</a> 
     <ul class="submenu"> 
      <li><a href="page">Submenu Link</a></li> 
      <li><a href="page">Submenu Link</a></li> 
      <li><a href="page">Submenu Link</a></li> 
      <li><a href="page">Submenu Link</a></li> 
     </ul> 
    </li> 
    <li> 
     <a class="menuLink" href="javascript:void(0);">Menu 2</a> 
     <ul class="submenu"> 
      <li><a href="page">Submenu Link</a></li> 
      <li><a href="page">Submenu Link</a></li> 
      <li><a href="page">Submenu Link</a></li> 
      <li><a href="page">Submenu Link</a></li> 
     </ul> 
    </li> 
    <li> 
     <a class="menuLink" href="javascript:void(0);">Menu 3</a> 
     <ul class="submenu"> 
      <li><a href="page">Submenu Link</a></li> 
      <li><a href="page">Submenu Link</a></li> 
      <li><a href="page">Submenu Link</a></li> 
      <li><a href="page">Submenu Link</a></li> 
     </ul> 
    </li> 
    <li> 
     <a class="menuLink" href="javascript:void(0);">Menu 4</a> 
     <ul class="submenu"> 
      <li><a href="page">Submenu Link</a></li> 
      <li><a href="page">Submenu Link</a></li> 
      <li><a href="page">Submenu Link</a></li> 
      <li><a href="page">Submenu Link</a></li> 
     </ul> 
    </li> 
<ul> 

使用CSS這樣的：

.submenu { display:none; } 
.menuLink:hover + .submenu, 
.menuLink:focus + .submenu, 
.menuLink:active + .submenu { 
    display:block; 
} 

http://jsfiddle.net/vPM6W/