html - 在现有导航菜单中制作子菜单垂直布局

Question

我在 css3 和 html 中有一个菜单导航功能

<nav>
<ul>
<li><a href="#" >Sec1</a></li>
    <li><a href="#" >Sec2</a></li>
    <li><a href="#" class="current">Sec3</a>
    <ul class="menu">
        <li><a href="#" class="documents">Documents</a></li>
        <li><a href="#" class="messages">Messages</a></li>
        <li><a href="#" class="signout">Sign Out</a></li>
    </ul></li>
<li><a href="#" >Sec4</a></li>

</ul>
</nav>

但是子菜单怎么可能是这样的:

代替:

-- fiddle - here is fiddle

Answer 1

我明白您在寻找什么，并已使我的 jsfiddle 尽可能接近您的。我没有使用您提供的图像，而是使用了图标字体，如果您计划使用许多图像，这会很有用。我的图标字体来自 Keyamoon icomoon.io .这是一个非常好的工具，您绝对应该将它用于您需要的任何其他图标。我从 Egemen Kapusuz 的 Icon Minia 中挑选了我的。您可以看到我使用的图标，如果这些是您唯一需要的图标，只需从 jsfiddle 中的@font-face url 下载文件即可。 ，或从这里:

@font-face {
    font-family: 'IHK';
    src:url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.eot');
    src:url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.eot?#iefix') format('embedded-opentype'),
        url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.svg#IHK') format('svg'),
        url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.woff') format('woff'),
        url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

您可以从这里复制链接，如果您只需要这 3 个图标，它会为您提供要下载的字体文件。图标字体很棒，因为您可以将图标字体一起打包到 1 个 HTTP 请求中，而不是为每个背景或图标加载 1 个图像或其他任何东西，从而使它们在传输中更高效，也更可定制。图标字体只是一种字体，因此您也可以更轻松地操作它们；您可以更改字体的颜色、抗锯齿，就像真正的文本字体一样。

我用一些 jQuery 重写了你的代码，因为你的代码看起来很困惑，有点难以理解，所以如果你想使用我的 jsfiddle，你需要从 CDN 添加一个 jquery 源链接或托管你自己的复制到你的服务器上。 jquery.com将有大量相关信息。

所以对于我的 HTML:

HTML:

<nav>
    <ul>
        <li><a href="#" >Sec1</a></li>
        <li><a href="#" >Sec2</a></li>
        <li><a href="#" class="current">Sec3</a></li>
        <li><a href="contacto.html" >Sec4</a></li>
        <ul class="menu">
            <li><a href="#" class="documents" data-icon="&#xe000">Documents</a></li>
            <br>
            <li><a href="#" class="messages" data-icon="&#xe001">Messages</a></li>
            <br>
            <li><a href="#" class="signout" data-icon="&#xe002">Sign Out</a></li>
        </ul>
    </ul>
</nav>

html 有一些新属性，我将其命名为数据图标。我用这些来合并图标字体中的图标，而没有在 DOM 中添加官方元素。浏览器对此的支持有点新，因此您应该研究冗余图标方案，以防用户使用不支持图标字体的旧浏览器以及您还拥有的其他新功能，例如 border-radius 和 转换。

CSS 被大量修改以使用非常有用的伪选择器。此外，我现在有了 jQuery 的导航栏，所以它应该得到很好的支持，因为 jQuery 是一个跨浏览器的 JavaScript 库。

我唯一无法解决的是第二个导航级别中的悬停文本会跳动的小问题，我不知道为什么会发生这种情况，我会调查它，但现在，this is what我可以为您制作。