用于触摸屏的纯CSS层级菜单（新iPad）(Pure CSS hierarchical menu f

2019-07-29 01:58发布

站内文章 / 前沿技术
38 0 0

是否有可能创造好看的多级菜单，这将在desctop和触摸屏浏览器的工作？ 没有任何的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/



文章来源: Pure CSS hierarchical menu for touchscreens(iPad)
标签： css ipad menu
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~