The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

[Help]Navigation Bar

View previous topic View next topic Go down

Solved [Help]Navigation Bar

Post by cHaSwWind04 on March 29th 2013, 11:11 pm

I love their navigation bar
http://animeph.4umer.com/forum
Is there anyway I can do to copy it?
Also, There is a "Like us on facebook" Tab
How can I do similar to that
*Starting to learn HTML, still making a schedule for Java and CSS*

cHaSwWind04
Forumember

Male Posts : 192
Reputation : 1
Language : English
Location : In front of a monitor... Duh!

Back to top Go down

Solved Re: [Help]Navigation Bar

Post by E-Mark on March 30th 2013, 3:23 am

It only use image which can be done by editing.
And for the facebook like. You can use this:

Code:
<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px;}#facebook_right img{position:absolute;top:-2px;left:-35px;}#facebook_right iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px;}#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("facebook").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("facebook").stop(true,false).animate({right: -303}, 500); }); });</script><!----- / Don't remove this / Make sure that you change the facebook page id / (www.trickiezone.com) / ------><div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="http://2.bp.blogspot.com/-3M7olhKGSm8/UQpbtJ2pC5I/AAAAAAAACrw/XBch8Kunsn8/s320/trickiezone.com-facebook-icon.png" alt="" />


<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FIDNUMBERHERE&&amp;amp;amp;width=200&amp;height=348&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:348px;" allowtransparency="true"></iframe>


</div></div></div>

Note: Find the "IDNUMBERHERE" then change it into the idnumber of your page.

Example: https://www.facebook.com/pages/Detective-Conan/521188584582737

The page ID number is: 521188584582737

EDIT: You may put the codes i gave above at the Homepage Message (ACP > Display > Homepage > Generalities)


Last edited by E-Mark on March 30th 2013, 6:52 am; edited 1 time in total

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: [Help]Navigation Bar

Post by cHaSwWind04 on March 30th 2013, 6:29 am

What do you call to this kind of things
and can I add more tabs?

cHaSwWind04
Forumember

Male Posts : 192
Reputation : 1
Language : English
Location : In front of a monitor... Duh!

Back to top Go down

Solved Re: [Help]Navigation Bar

Post by E-Mark on March 30th 2013, 6:46 am

Navigation Bar Razz.
They just use images then make it float, here's a code:

Code:
<ul class="navbar">
<li><a href="/"><img src="LINKOFTHEIMAGE" /></a></li>
<li><a href="/"><img src="LINKOFTHEIMAGE" /></a></li>
<li><a href="/"><img src="LINKOFTHEIMAGE" /></a></li>
<li><a href="/"><img src="LINKOFTHEIMAGE" /></a></li>
<li><a href="/"><img src="LINKOFTHEIMAGE" /></a></li>
</ul>

For the CSS:
Code:
.navbar {
position: fixed;
top: 200px;
list-style: none;
}
ul.navbar li img:hover{
-moz-transition:1.2s;
-ms-transition:1.2s;
-o-transition:1.2s;
-webkit-transition:1.2s;
padding-left:36px;
transition:1.2s;
}

Hello

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: [Help]Navigation Bar

Post by cHaSwWind04 on March 30th 2013, 7:41 am

Just as I thought...
It was floating.
Anyway... are there ways to control the position of the facebook page?

cHaSwWind04
Forumember

Male Posts : 192
Reputation : 1
Language : English
Location : In front of a monitor... Duh!

Back to top Go down

Solved Re: [Help]Navigation Bar

Post by E-Mark on March 30th 2013, 1:44 pm

At what part first? Left or right?

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: [Help]Navigation Bar

Post by cHaSwWind04 on March 30th 2013, 4:39 pm

I position it on the second.
But I want a blank space (that there are no characters there including the space text) between the two image (which are buttons) what do I do for that?

cHaSwWind04
Forumember

Male Posts : 192
Reputation : 1
Language : English
Location : In front of a monitor... Duh!

Back to top Go down

Solved Re: [Help]Navigation Bar

Post by E-Mark on March 30th 2013, 4:43 pm

Uhm... Sorry, but i don't get what you mean, would you mind to clarify it more? Smile

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: [Help]Navigation Bar

Post by cHaSwWind04 on March 30th 2013, 11:51 pm

@E-Mark wrote:It only use image which can be done by editing.
And for the facebook like. You can use this:

Code:
<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px;}#facebook_right img{position:absolute;top:-2px;left:-35px;}#facebook_right iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px;}#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("facebook").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("facebook").stop(true,false).animate({right: -303}, 500); }); });</script><!----- / Don't remove this / Make sure that you change the facebook page id / (www.trickiezone.com) / ------><div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="http://2.bp.blogspot.com/-3M7olhKGSm8/UQpbtJ2pC5I/AAAAAAAACrw/XBch8Kunsn8/s320/trickiezone.com-facebook-icon.png" alt="" />


<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FIDNUMBERHERE&&amp;amp;amp;width=200&height=348&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:348px;" allowtransparency="true"></iframe>


</div></div></div>

Note: Find the "IDNUMBERHERE" then change it into the idnumber of your page.

Example: https://www.facebook.com/pages/Detective-Conan/521188584582737

The page ID number is: 521188584582737

EDIT: You may put the codes i gave above at the Homepage Message (ACP > Display > Homepage > Generalities)

Forget the previous question... It is solved...
I just need a things to move the facebook tab a little higher...

cHaSwWind04
Forumember

Male Posts : 192
Reputation : 1
Language : English
Location : In front of a monitor... Duh!

Back to top Go down

Solved Re: [Help]Navigation Bar

Post by E-Mark on March 31st 2013, 3:14 am

Find this in the code:
Code:
<div id="facebook_right" style="top: 18%;">

Then change the 18 to you desire number, until you get contented.
Btw, if you want to display that in all pages. Go to ACP > Display > Templates > General > Edit the overall_footer_end:

Then find the </body>, after you find it. Paste the code before it (above the </body>). Then save it!

Hello

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: [Help]Navigation Bar

Post by cHaSwWind04 on March 31st 2013, 3:49 am

Working...
But...
This might be my last question...
How can I create another tab? I tried it but still the second tab won't work...

cHaSwWind04
Forumember

Male Posts : 192
Reputation : 1
Language : English
Location : In front of a monitor... Duh!

Back to top Go down

Solved Re: [Help]Navigation Bar

Post by E-Mark on March 31st 2013, 3:58 am

Use this for the other one: (I do change it slightly so it will work)

Code:
<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#facebook_right1{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px;}#facebook_right1 img{position:absolute;top:-2px;left:-35px;}#facebook_right1 iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px;}#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right1").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right1").stop(true,false).animate({right: -200}, 500); }); jQuery("facebook").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("facebook").stop(true,false).animate({right: -303}, 500); });    });</script><!----- / Don't remove this / Make sure that you change the facebook page id / (www.trickiezone.com) / ------><div id="on"><div id="facebook_right1" style="top: 48%;"><div id="facebook_div"><img src="http://2.bp.blogspot.com/-3M7olhKGSm8/UQpbtJ2pC5I/AAAAAAAACrw/XBch8Kunsn8/s320/trickiezone.com-facebook-icon.png" alt="" />


<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FIDNUMBERHERE&&amp;amp;amp;amp;width=200&height=348&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:348px;" allowtransparency="true"></iframe>


</div></div></div>

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: [Help]Navigation Bar

Post by cHaSwWind04 on March 31st 2013, 4:49 am

I just lack last one more... content...
How do I can create more tabs rather than just two?
I may do four...

cHaSwWind04
Forumember

Male Posts : 192
Reputation : 1
Language : English
Location : In front of a monitor... Duh!

Back to top Go down

Solved Re: [Help]Navigation Bar

Post by cHaSwWind04 on April 1st 2013, 8:24 pm

Bump.

cHaSwWind04
Forumember

Male Posts : 192
Reputation : 1
Language : English
Location : In front of a monitor... Duh!

Back to top Go down

Solved Re: [Help]Navigation Bar

Post by E-Mark on April 2nd 2013, 12:20 pm

4 tabs: (Just replace the old one i gave with this one)

Code:
<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px;}#facebook_right img{position:absolute;top:-2px;left:-35px;}#facebook_right iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px;}#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("facebook").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("facebook").stop(true,false).animate({right: -303}, 500); });    });</script><!----- / Don't remove this / Make sure that you change the facebook page id / (www.trickiezone.com) / ------><div id="on"><div id="facebook_right" style="top: 1%;"><div id="facebook_div"><img src="http://2.bp.blogspot.com/-3M7olhKGSm8/UQpbtJ2pC5I/AAAAAAAACrw/XBch8Kunsn8/s320/trickiezone.com-facebook-icon.png" alt="" />


<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FIDNUMBERHERE&&amp;amp;amp;amp;width=200&height=348&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:348px;" allowtransparency="true"></iframe>


</div></div></div>





<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#facebook_right1{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px;}#facebook_right1 img{position:absolute;top:-2px;left:-35px;}#facebook_right1 iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px;}#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right1").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right1").stop(true,false).animate({right: -200}, 500); }); jQuery("facebook").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("facebook").stop(true,false).animate({right: -303}, 500); });    });</script><!----- / Don't remove this / Make sure that you change the facebook page id / (www.trickiezone.com) / ------><div id="on"><div id="facebook_right1" style="top: 21%;"><div id="facebook_div"><img src="http://2.bp.blogspot.com/-3M7olhKGSm8/UQpbtJ2pC5I/AAAAAAAACrw/XBch8Kunsn8/s320/trickiezone.com-facebook-icon.png" alt="" />


<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FIDNUMBERHERE&&amp;amp;amp;amp;amp;width=200&height=348&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:348px;" allowtransparency="true"></iframe>


</div></div></div>





<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#facebook_right2{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px;}#facebook_right2 img{position:absolute;top:-2px;left:-35px;}#facebook_right2 iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px;}#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right2").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right2").stop(true,false).animate({right: -200}, 500); }); jQuery("facebook").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("facebook").stop(true,false).animate({right: -303}, 500); });    });</script><!----- / Don't remove this / Make sure that you change the facebook page id / (www.trickiezone.com) / ------><div id="on"><div id="facebook_right2" style="top: 41%;"><div id="facebook_div"><img src="http://2.bp.blogspot.com/-3M7olhKGSm8/UQpbtJ2pC5I/AAAAAAAACrw/XBch8Kunsn8/s320/trickiezone.com-facebook-icon.png" alt="" />


<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FIDNUMBERHERE&&amp;amp;amp;amp;amp;width=200&height=348&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:348px;" allowtransparency="true"></iframe>


</div></div></div>





<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#facebook_right3{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px;}#facebook_right3 img{position:absolute;top:-2px;left:-35px;}#facebook_right3 iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px;}#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right3").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right3").stop(true,false).animate({right: -200}, 500); }); jQuery("facebook").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("facebook").stop(true,false).animate({right: -303}, 500); });    });</script><!----- / Don't remove this / Make sure that you change the facebook page id / (www.trickiezone.com) / ------><div id="on"><div id="facebook_right3" style="top: 61%;"><div id="facebook_div"><img src="http://2.bp.blogspot.com/-3M7olhKGSm8/UQpbtJ2pC5I/AAAAAAAACrw/XBch8Kunsn8/s320/trickiezone.com-facebook-icon.png" alt="" />


<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FIDNUMBERHERE&&amp;amp;amp;amp;amp;width=200&height=348&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:348px;" allowtransparency="true"></iframe>


</div></div></div>

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: [Help]Navigation Bar

Post by cHaSwWind04 on April 5th 2013, 1:59 pm

Thanks...
Problema Solvar!

cHaSwWind04
Forumember

Male Posts : 192
Reputation : 1
Language : English
Location : In front of a monitor... Duh!

Back to top Go down

Solved Re: [Help]Navigation Bar

Post by Jophy on April 5th 2013, 2:09 pm

Topic Solved & Locked

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum