0

我正在尝试将图像模型转换为 HTML/CSS，并且我正在努力让导航栏正常工作：

JSFiddle 代码：

http://jsfiddle.net/victorhooi/ZcrCc/

全屏 JSFiddle 输出：

http://jsfiddle.net/victorhooi/ZcrCc/embedded/result/

这是导航栏的模型：

在此处输入图像描述

这个想法是通常它只有汉堡图标和“菜单”文本，然后当你悬停时，它应该向下打开并显示字形和文本。

我不确定如何将字形图标集成到现有<li>元素中（我应该只使用 a<br>来分割线条吗？） - 然后使用 CSS 定位使其打开和关闭。

#nav > a
{
    display: none;
}
#nav li
{
    position: relative;
}

/* first level */

#nav > ul
{
    height: 3.75em;
}
    #nav > ul > li
    {
        width: 25%;
        height: 100%;
        float: left;
    }
4

1 回答 1

1

这应该让你更接近。我会让你的字形图标块元素。如果您想要一个漂亮的动画，请使用 CSS3 或 jQuery。

html

<ul>
    <li>
        <ul>
            <li><a href="#biography"><img src="http://placehold.it/50x50"/>Bio</a>
            </li>
            <li><a href="#story"><img src="http://placehold.it/50x50"/>Story</a>
            </li>
            <li><a href="#proposal"><img src="http://placehold.it/50x50"/>Proposal</a>
            </li>
            <li><a href="#gallery"><img src="http://placehold.it/50x50"/>Gallery</a>
            </li>
            <li><a href="#rsvp"><img src="http://placehold.it/50x50"/>RSVP</a>
            </li>
            <li><a href="#thedate"><img src="http://placehold.it/50x50"/>The Date</a>
            </li>
            <li><a href="#party"><img src="http://placehold.it/50x50"/>Party</a>
            </li>
            <li><a href="#thankyou"><img src="http://placehold.it/50x50"/>Thank You</a>
            </li>
        </ul> <a href="/">Menu</a>

    </li>
</ul>

css

#nav > a {
    display:none;
}
#nav ul {
    list-style:none;
    margin:0;
    padding:0;
}
#nav li {
    position: relative;
}
/* first level */
#nav > ul > li {
    float: left;
}
/* second level */
#nav li ul {
    display: none;
}
#nav li:hover ul {
    display: block;
}
#nav li ul img {
    display:block;
    min-width:100%;
}
#nav li ul li {
    text-align:center;
}

http://jsfiddle.net/Wz5wn/

于 2013-09-30T19:41:04.563 回答