You are viewing our Forum Archives. To view or take place in current topics click here.
How would i make a navigation bar that apears on click of ..
Posted:
How would i make a navigation bar that apears on click of ..Posted:
Status: Offline
Joined: Dec 28, 201310Year Member
Posts: 85
Reputation Power: 3
Status: Offline
Joined: Dec 28, 201310Year Member
Posts: 85
Reputation Power: 3
how would i make it so that when i clicked a image that a black navigation would slide in from the left side like
|----|--------------------|
|----|--------------------|
|----|--------------------|
|----|--------------------|
|----|--------------------|
|----|--------------------|
|----|--------------------|
|----|--------------------|
|----|--------------------|
and when i clicked the image again the navigation would disapear links to tuts or help on here please
|----|--------------------|
|----|--------------------|
|----|--------------------|
|----|--------------------|
|----|--------------------|
|----|--------------------|
|----|--------------------|
|----|--------------------|
|----|--------------------|
and when i clicked the image again the navigation would disapear links to tuts or help on here please
#2. Posted:
Status: Offline
Joined: Dec 24, 201211Year Member
Posts: 1,498
Reputation Power: 79
In Jquery it would be something like:
First you'd set the #blackNav to a position off the screen on the left side, using CSS
Edit:
Something along those lines. I hate working in this small box. You'll use toggle since it's first parameter activates on the first click, and the second, on the second click.
Inside the first function you either want to show the nav, but in this case you want it to slide, so you'd use animate for it to slide in from the left.
In the second anonymous function you'd hide the nav again, but in this case you want to move it back to it's original spot. In this case, you would use animate again (I didn't, you probably should) or call it's class or use .css() to set it's properties back to where it was. You could also use toggleClass.
First you'd set the #blackNav to a position off the screen on the left side, using CSS
$('blackNav').hide(); //optional since you want it to slide in
$('#imageName').toggle(function(){
$('#blackNav').animate({
right: 100px;}, //whatever you set it's left to be + the nav's width
1000; //Duration in milliseconds (1000ms = 1s)
); //animate ends
}, //first anonymous function ends (this is for the first click)
function(){
$('#blackNav').hide(); //optional
('#blackNav').css( left: 200px;);
} //second anonymous function ends
)}; //toggle ends
Edit:
Something along those lines. I hate working in this small box. You'll use toggle since it's first parameter activates on the first click, and the second, on the second click.
Inside the first function you either want to show the nav, but in this case you want it to slide, so you'd use animate for it to slide in from the left.
In the second anonymous function you'd hide the nav again, but in this case you want to move it back to it's original spot. In this case, you would use animate again (I didn't, you probably should) or call it's class or use .css() to set it's properties back to where it was. You could also use toggleClass.
- 0useful
- 0not useful
You are viewing our Forum Archives. To view or take place in current topics click here.