How Can I Make A Navigation Bar on My Website
5 posters
Page 1 of 1
How Can I Make A Navigation Bar on My Website
So i Was Wondering If i Can Put Navigation Bar on My Website Could i Do this Or No
Please Help Me Figure Out This.
Please Help Me Figure Out This.
Mr DarkHaxers2- Forumember
- Posts : 409
Reputation : -17
Language : English
Location : Modesto,Cali
Re: How Can I Make A Navigation Bar on My Website
Hi,
Please explain your request?
You have a navbar already? Do you have an extra one you can add or?
You can add it in overall_header replacing this {GENERATED_NAV_BAR}
For anything else please do explain or provide the navbar you want to add.
Please explain your request?
You have a navbar already? Do you have an extra one you can add or?
You can add it in overall_header replacing this {GENERATED_NAV_BAR}
For anything else please do explain or provide the navbar you want to add.
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: How Can I Make A Navigation Bar on My Website
yeah you will have to explain more?
you could always remove the whole nav bar and add your own custom one if you wanted to as well.
I am not sure if you want to add or remove something from your existing nav bar or if you just want to add a whole new custom one?
you could always remove the whole nav bar and add your own custom one if you wanted to as well.
I am not sure if you want to add or remove something from your existing nav bar or if you just want to add a whole new custom one?
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: How Can I Make A Navigation Bar on My Website
kirk wrote:yeah you will have to explain more?
you could always remove the whole nav bar and add your own custom one if you wanted to as well.
I am not sure if you want to add or remove something from your existing nav bar or if you just want to add a whole new custom one?
yea I Want to Do tht
Mr DarkHaxers2- Forumember
- Posts : 409
Reputation : -17
Language : English
Location : Modesto,Cali
Re: How Can I Make A Navigation Bar on My Website
Oh gee thanx..lol
And which one of the two things i asked above would that be??
And which one of the two things i asked above would that be??
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: How Can I Make A Navigation Bar on My Website
kirk wrote:Oh gee thanx..lol
And which one of the two things i asked above would that be??
you could always remove the whole nav bar and add your own custom one if you wanted to as well.
Mr DarkHaxers2- Forumember
- Posts : 409
Reputation : -17
Language : English
Location : Modesto,Cali
Re: How Can I Make A Navigation Bar on My Website
Hello I Want To Do this Can Someone Help Me Please
Mr DarkHaxers2- Forumember
- Posts : 409
Reputation : -17
Language : English
Location : Modesto,Cali
Re: How Can I Make A Navigation Bar on My Website
well fist you want to create your nav bar.
I would do it with bbcode like you are creating a post first.
then open another tab so you can click to the links you want to add,
So all you would do is add the link and text or images you want placed in the navbar
text link would be like this.
or if you want to add images/buttons
so then you would place them side by side, for which ever way you want to do it with text or image, you can preview it as you go along as well.
Once you have all of the ones you want, be sure to wrap the whole thing with center tags.
Now take the whole bbcode and place it in your home page message and hit save, This will convert it to html for you. copy the new converted html code and save to a note pad, then be sure to remove it from the home page message.
The last steps would be to
1 go to navigation bar options and select only show images and hit save.
2 Go to your pics management and remove all nav bar related images on the first page.
Ok so now your nav bar will be gone, simply copy your code from the note pad and go to your overall header template, past and the ver top of you template, then publish.
you may want to add one of these above you new nav bar code for space. </br> or two.
you can also place one under your code to, you have to fiddle with it for what you like.
You may also want to save all the nav bar images in your pic's management first as well, in case you ever wanted to add them back.
You could also just remove the whole nav bar from your template to first if you think that may be easier, but either way i would suggest creating the whole thing in bbcode first then convert by adding to your home page message as i explained above,
It's just easier to do that way for beginners instead of jumping in trying to do it all html from the get go.
If you would like to just do it with all html first, then here are the html code format and you can test on a html page first as you go along and create it.
or if you want to add images/buttons
So that is pretty basic on how to create a custom nab bar, now if you wanted to add mouse over images,sprites or spy-menu type, then you getting into a whole different ball game and would have to know more of basic html,java,css and perhaps certain web development software depending what you was doing?
so for anything like that i would need to see some example links on what exactly your shooting for.
I would do it with bbcode like you are creating a post first.
then open another tab so you can click to the links you want to add,
So all you would do is add the link and text or images you want placed in the navbar
text link would be like this.
- Code:
[url=YOUR LINK HERE]YOUR TEXT HERE[/url]
or if you want to add images/buttons
- Code:
[url=YOUR LINK HERE][img]YOUR DIRECT IMAGE LINK HERE[/img][/url]
so then you would place them side by side, for which ever way you want to do it with text or image, you can preview it as you go along as well.
Once you have all of the ones you want, be sure to wrap the whole thing with center tags.
Now take the whole bbcode and place it in your home page message and hit save, This will convert it to html for you. copy the new converted html code and save to a note pad, then be sure to remove it from the home page message.
The last steps would be to
1 go to navigation bar options and select only show images and hit save.
2 Go to your pics management and remove all nav bar related images on the first page.
Ok so now your nav bar will be gone, simply copy your code from the note pad and go to your overall header template, past and the ver top of you template, then publish.
you may want to add one of these above you new nav bar code for space. </br> or two.
you can also place one under your code to, you have to fiddle with it for what you like.
You may also want to save all the nav bar images in your pic's management first as well, in case you ever wanted to add them back.
You could also just remove the whole nav bar from your template to first if you think that may be easier, but either way i would suggest creating the whole thing in bbcode first then convert by adding to your home page message as i explained above,
It's just easier to do that way for beginners instead of jumping in trying to do it all html from the get go.
If you would like to just do it with all html first, then here are the html code format and you can test on a html page first as you go along and create it.
- Code:
<a href="YOUR LINK HERE" class="postlink">YOUR TEXT HERE</a>
or if you want to add images/buttons
- Code:
<a href="YOUR LINK HERE" class="postlink"><img src="YOUR DIRECT IMAGE LINK HERE" border="0" alt="" /></a>
So that is pretty basic on how to create a custom nab bar, now if you wanted to add mouse over images,sprites or spy-menu type, then you getting into a whole different ball game and would have to know more of basic html,java,css and perhaps certain web development software depending what you was doing?
so for anything like that i would need to see some example links on what exactly your shooting for.
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: How Can I Make A Navigation Bar on My Website
But Where I Put My Code At And I Want To Change The Top Forums To My Navigation Bar Could I Do That Or No.
Mr DarkHaxers2- Forumember
- Posts : 409
Reputation : -17
Language : English
Location : Modesto,Cali
Re: How Can I Make A Navigation Bar on My Website
If its a new navigation bar then the best place would be to past it at the top of your overall header template, this way it will be on every page.
I pretty much explained everything up there the easiest way as possible.
How many links are you adding?
And are you using your own images or just text.
If you post a few links with the names or images then i can set up a small example for you.
I pretty much explained everything up there the easiest way as possible.
How many links are you adding?
And are you using your own images or just text.
If you post a few links with the names or images then i can set up a small example for you.
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Mr DarkHaxers2- Forumember
- Posts : 409
Reputation : -17
Language : English
Location : Modesto,Cali
Re: How Can I Make A Navigation Bar on My Website
That looks a bit complicated, I would just replace the pictures if I were you.
Destructo- Forumember
- Posts : 52
Reputation : 1
Language : English!¬_¬
Mr DarkHaxers2- Forumember
- Posts : 409
Reputation : -17
Language : English
Location : Modesto,Cali
Re: How Can I Make A Navigation Bar on My Website
Add the HTML to overall header.
- Code:
<ul class="topnav">
<li><a href="#">Home</a></li>
<li>
<a href="#">Tutorials</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li>
<a href="#">Resources</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<!-- BEGIN switch_user_logged_in -->
<li><a href="/groups">Usergroups</a></li>
<li><a href="/profile?mode=editprofile">Profile</a></li>
<li><a href="/privmsg?folder=inbox" class="p-m">Mailbox</a></li>
<li><a href="/login?logout">Logout</a></li>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<li><a href="/register">Register</a></li>
<li><a href="/login">Login</a></li>
<!-- END switch_user_logged_out -->
</ul>
CSS to AP >> Display >> CSS
- Code:
#pun-head #pun-navlinks {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 842px;
background: #222;
font-size: 1.0em;
background: url('http://www.sohtanaka.com/web-design/examples/drop-down-menu/topnav_bg.gif') repeat-x;
}
ul.topnav {
background: url("http://www.sohtanaka.com/web-design/examples/drop-down-menu/topnav_bg.gif") repeat-x scroll 0 0 transparent;
float: left;
font-size: 1.2em;
list-style: none outside none;
margin: 0;
padding: 0 20px;
width: 920px;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url('http://www.sohtanaka.com/web-design/examples/drop-down-menu/topnav_hover.gif') no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url('http://www.sohtanaka.com/web-design/examples/drop-down-menu/subnav_btn.gif') no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url('http://www.sohtanaka.com/web-design/examples/drop-down-menu/dropdown_linkbg.gif') no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url('http://www.sohtanaka.com/web-design/examples/drop-down-menu/dropdown_linkbg.gif') no-repeat 10px center;
}
That's all.
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: How Can I Make A Navigation Bar on My Website
the Drop Down menus I Don't See Them On My Website
Mr DarkHaxers2- Forumember
- Posts : 409
Reputation : -17
Language : English
Location : Modesto,Cali
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Mr DarkHaxers2- Forumember
- Posts : 409
Reputation : -17
Language : English
Location : Modesto,Cali
Re: How Can I Make A Navigation Bar on My Website
i just love how people flip flop on things,
here i go and explain all above and now you say you want a drop down menu.
Why dint you say he to begin with? We are not mind readers... lol
here i go and explain all above and now you say you want a drop down menu.
Why dint you say he to begin with? We are not mind readers... lol
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: How Can I Make A Navigation Bar on My Website
I got that my forum.
You can use Punbb or Phpbb2.
Replace
It show Register and login show to guest
and
Profile , Mailbox and logout show to member
You can use Punbb or Phpbb2.
Replace
- Code:
<ul class="clearfix">
<li>{GENERATED_NAV_BAR}</li>
</ul>
- Code:
<ul class="topnav">
<li><a href="forum">Home</a></li>
<li>
<a href="faq">Faq</a>
<ul class="subnav">
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
</ul>
</li>
<li>
<a href="memberlist">Memberlist</a>
<ul class="subnav">
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
</ul>
</li>
<!-- BEGIN switch_user_logged_in -->
<li><a href="/groups">Usergroups</a></li>
<li><a href="/profile?mode=editprofile">Profile</a></li>
<li><a href="/privmsg?folder=inbox">Mailbox</a></li>
<li><a href="/login?logout">Logout</a></li>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<li><a href="/register">Register</a></li>
<li><a href="/login">Login</a></li>
<!-- END switch_user_logged_out -->
</ul>
It show Register and login show to guest
and
Profile , Mailbox and logout show to member
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum