-8

我正在尝试制作一个扩展的导航栏，而且我已经做得很远了，但我只是一个初学者，它目前看起来像 sh*t。

如果你能帮我一点忙？我想用纯 CSS 来做，因为我对 JS 一无所知。

<div id="blackbox" />
<div id="blacktxt">Navigation</div>
<nav>
    <ul>
        <li><a href="About">About</a>

            <ul>
                <li><a href="abfin">About Finland</a>
                </li>
                <li><a href="#">About Us</a>
                </li>
        </li>
        </ul>
        </div>

太难写了，下面是蓝图：

蓝图

这是现有的代码：

代码

4

1 回答 1

0

我无法可视化网站，因为我没有在这台机器上安装 Java x86。

“所以我正在尝试制作一个不断增长的导航栏，菜单淡入并且是横向的下拉菜单”

也许 Javascript 的另一种替代方法是使用 CSS3 动画。

阅读以下链接：

http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

http://www.w3schools.com/cssref/css3_pr_animation.asp

在最后一帧停止 CSS3 动画

animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards; /* Safari and Chrome */

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */

这是 JSFiddle 中的演示（按“运行”）。

http://jsfiddle.net/Z3SSm/5/

我希望它在某种程度上有所帮助。

编辑：

如果你想添加一个过渡（鼠标悬停效果或显示一些东西）： http ://www.w3schools.com/cssref/css3_pr_transition.asp

http://www.w3.org/TR/css3-selectors/#selectors

http://www.w3.org/TR/css3-selectors/#general-sibling-combinators

于 2013-08-29T13:18:08.547 回答