在实现 [ 图片 ] 效果时, 以下那几种 "结构组合" 更加适合?

6WQnWG37
  • 633

MENU
下面的那些 "结构" 更加适应于上图的场景呢? 或许还有更好的方法?

1. 有着较多的镶嵌.

<nav class="main-menu">
    <ul class="music-menu">
        <li class="music-menu__item">
            <span class="music-menu__heading"></span>
            <ul class="music-menu__children">
                <li><a href="" class="music-menu__children__item"></a></li>
                <li><a href="" class="music-menu__children__item"></a></li>
                <li><a href="" class="music-menu__children__item"></a></li>
            </ul>
        </li>
        <li class="music-menu__item">
            <span class="music-menu__heading"></span>
            <ul class="music-menu__children">
                <li><a href="" class="music-menu__children__item"></a></li>
                <li><a href="" class="music-menu__children__item"></a></li>
                <li><a href="" class="music-menu__children__item"></a></li>
            </ul>
        </li>
    </ul>
</nav>

2. 看起来很清爽, 代码重用很方便.

<nav class="main-nav">
    <span class="main-nav__heading"></span>
    <ul id="language-menu" class="music-menu">
        <li><a href="" class="music-menu__item"></a></li>
        <li><a href="" class="music-menu__item"></a></li>
        <li><a href="" class="music-menu__item"></a></li>
    </ul>
    <span class="main-nav__heading"></span>
    <ul id="genre-menu" class="music-menu">
        <li><a href="" class="music-menu__item"></a></li>
        <li><a href="" class="music-menu__item"></a></li>
        <li><a href="" class="music-menu__item"></a></li>
    </ul>
</nav>

3. 另外一种想法.

<nav class="main-nav">
    <ul id="language-menu" class="music-menu">
        <li><span class="music-menu__heading"></span></li>
        <li><a href="" class="music-menu__item"></a></li>
        <li><a href="" class="music-menu__item"></a></li>
        <li><a href="" class="music-menu__item"></a></li>
    </ul>
    <ul id="genre-menu" class="music-menu">
        <li><span class="music-menu__heading"></span></li>
        <li><a href="" class="music-menu__item"></a></li>
        <li><a href="" class="music-menu__item"></a></li>
        <li><a href="" class="music-menu__item"></a></li>
    </ul>
</nav>

.main-nav__heading 并不是属于导航的一部分, 而是子导航的标题.

回复
阅读 3.9k
2 个回答
kmxz
  • 4.3k

其实都很好了…… 我有个同学写了三年前端,至今只用 <div>,其它什么 tag 都不用……

不过第一种使用多层 <ul> 嵌套的做法确实看起来最 pro。
比如 WordPress 的 sidebar 一般也那么处理。
多数网站的导航栏(比如 Mozilla)也那么处理。
再比如 Bootstrap 的导航栏也是那么做的。

因为毕竟 <ul><li> 能够最大程度地体现元素的逻辑层级关系。其实我也不觉得它的重用性差。

如果是要增加一个标题项的话,最后一个应该是不可取的,虽然能实现,不过不推荐。

如果两个导航栏之间有联系的话推荐用第一种,如果没有联系的话推荐用第二种,需要补充的是建议用section或者别的什么标签包裹住每一个导航栏的标题和内容。

<nav class="main-nav">
    <section>
        <a href="" class="main-nav__heading"></a>
        <ul id="language-menu" class="c-music-menu">
            <li><a href="" class="c-music-menu__item"></a></li>
            <li><a href="" class="c-music-menu__item"></a></li>
            <li><a href="" class="c-music-menu__item"></a></li>
        </ul>
    </section>
    <section>
        <a href="" class="main-nav__heading"></a>
        <ul id="genre-menu" class="c-music-menu">
            <li><a href="" class="c-music-menu__item"></a></li>
            <li><a href="" class="c-music-menu__item"></a></li>
            <li><a href="" class="c-music-menu__item"></a></li>
        </ul>
    </section>
</nav>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏