デスクトップおよびタッチスクリーンブラウザで動作する見栄えの良いマルチレベルメニューを作成することは可能ですか？jsなし。タッチスクリーンにはプロパティがない:hoverため、両方のバリエーションに対して1つのスタイルシートを作成することに夢中になっています。デスクトップでの動作は次のようになります。ホバーで-サブメニューを開き、クリックで-リンクに移動します。iPadの場合：最初のタップでサブメニューを開き、2番目のタップでリンクに移動します。
アドバイスありがとうございます。
質問する
7554 次
2 に答える
3
純粋なCSS:hoverを使用して、 ANDをターゲットにして目的: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…</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>
于 2012-04-20T15:08:10.460 に答える
1
プライマリメニューノードがどこにもリンクされていない場合は、JavaScriptを使用してそれほど問題なくこれを行うことができます。これをクリック機能として追加するだけで、タッチデバイスで機能します。
兄弟セレクターと組み合わせて：focusおよび：active状態でそれを行うこともできます。これにより、メニューをキーボードナビゲーションでも表示できるようになります。これはプラスですが、サブメニューリンクにタブで移動したときに非表示にならないように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;
}
于 2012-04-20T14:52:27.093 に答える