Question

我正在尝试制作一个扩展的导航栏，而且我很擅长这样做，但我只是一个初学者，目前看起来像是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>

写起来太难了，这是蓝图：

BLUEPRINTS

这是现有的代码：

CODE

Answer 1

我无法想象网站因为我没有在这台机器上安装Java x86。

“所以我正在尝试制作一个不断增长的导航栏，菜单会逐渐淡入，并且是景观中的下拉菜单”

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

阅读以下链接：

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

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

Stopping a CSS3 Animation on last frame

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

CSS中的可扩展导航栏？

1 个答案: