[Solved] Expandable Nav Bar in CSS? [closed]

by


I can’t visualize the website cause I dont have Java x86 installed in this machine.

“So I’m trying to make a growing navbar, where the menu fades in and is dropdown menu in landscape”

Maybe another alternative to Javascript is using CSS3 Animation.

Read following links:

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 */

Here is a demo in JSFiddle (Press “Run”).

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

I hope than It helps in someway.

EDIT:

also if you want to add a transition (mouse hover effect or show up something):
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

2

solved Expandable Nav Bar in CSS? [closed]