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.

How Can I Make A Navigation Bar on My Website

View previous topic View next topic Go down

In progress How Can I Make A Navigation Bar on My Website

Post by Mr DarkHaxers2 on September 12th 2011, 4:57 am

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.

Mr DarkHaxers2
Forumember

Male Posts : 409
Reputation : -17
Language : English
Location : Modesto,Cali

Back to top Go down

In progress Re: How Can I Make A Navigation Bar on My Website

Post by Nera. on September 12th 2011, 8:11 am

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.




Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: How Can I Make A Navigation Bar on My Website

Post by kirk on September 12th 2011, 9:23 pm

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?

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

In progress Re: How Can I Make A Navigation Bar on My Website

Post by Mr DarkHaxers2 on September 12th 2011, 10:30 pm

@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

Male Posts : 409
Reputation : -17
Language : English
Location : Modesto,Cali

Back to top Go down

In progress Re: How Can I Make A Navigation Bar on My Website

Post by kirk on September 12th 2011, 10:34 pm

Oh gee thanx..lol
And which one of the two things i asked above would that be?? fufufu

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

In progress Re: How Can I Make A Navigation Bar on My Website

Post by Mr DarkHaxers2 on September 13th 2011, 12:21 am

@kirk wrote:Oh gee thanx..lol
And which one of the two things i asked above would that be?? fufufu



you could always remove the whole nav bar and add your own custom one if you wanted to as well.

Mr DarkHaxers2
Forumember

Male Posts : 409
Reputation : -17
Language : English
Location : Modesto,Cali

Back to top Go down

In progress Re: How Can I Make A Navigation Bar on My Website

Post by Mr DarkHaxers2 on September 15th 2011, 4:04 am

Hello I Want To Do this Can Someone Help Me Please

Mr DarkHaxers2
Forumember

Male Posts : 409
Reputation : -17
Language : English
Location : Modesto,Cali

Back to top Go down

In progress Re: How Can I Make A Navigation Bar on My Website

Post by kirk on September 15th 2011, 5:39 am

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.

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

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

In progress Re: How Can I Make A Navigation Bar on My Website

Post by Mr DarkHaxers2 on September 18th 2011, 4:00 am

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

Male Posts : 409
Reputation : -17
Language : English
Location : Modesto,Cali

Back to top Go down

In progress Re: How Can I Make A Navigation Bar on My Website

Post by kirk on September 19th 2011, 7:33 pm

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.



kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

In progress Re: How Can I Make A Navigation Bar on My Website

Post by Mr DarkHaxers2 on September 20th 2011, 9:38 pm

I Want this Navigation Bar Go To That Link I Want That Navigation Bar

GO HERE

Mr DarkHaxers2
Forumember

Male Posts : 409
Reputation : -17
Language : English
Location : Modesto,Cali

Back to top Go down

In progress Re: How Can I Make A Navigation Bar on My Website

Post by Destructo on September 20th 2011, 9:41 pm

That looks a bit complicated, I would just replace the pictures if I were you.

Destructo
Forumember

Posts : 52
Reputation : 1
Language : English!_

Back to top Go down

In progress Re: How Can I Make A Navigation Bar on My Website

Post by Mr DarkHaxers2 on September 20th 2011, 9:44 pm


Mr DarkHaxers2
Forumember

Male Posts : 409
Reputation : -17
Language : English
Location : Modesto,Cali

Back to top Go down

In progress Re: How Can I Make A Navigation Bar on My Website

Post by Nera. on September 20th 2011, 10:03 pm



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

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: How Can I Make A Navigation Bar on My Website

Post by Mr DarkHaxers2 on September 20th 2011, 10:26 pm

the Drop Down menus I Don't See Them On My Website

Mr DarkHaxers2
Forumember

Male Posts : 409
Reputation : -17
Language : English
Location : Modesto,Cali

Back to top Go down

In progress Re: How Can I Make A Navigation Bar on My Website

Post by Nera. on September 20th 2011, 10:34 pm


Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

In progress Re: How Can I Make A Navigation Bar on My Website

Post by Mr DarkHaxers2 on September 20th 2011, 10:42 pm

ok

Mr DarkHaxers2
Forumember

Male Posts : 409
Reputation : -17
Language : English
Location : Modesto,Cali

Back to top Go down

In progress Re: How Can I Make A Navigation Bar on My Website

Post by kirk on September 21st 2011, 4:15 am

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 fufufu

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

In progress Re: How Can I Make A Navigation Bar on My Website

Post by shadowz au on September 21st 2011, 8:49 am

I got that my forum.
You can use Punbb or Phpbb2.

Replace
Code:
<ul class="clearfix">
  <li>{GENERATED_NAV_BAR}</li>
  </ul>
With this
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

shadowz au
Forumember

Male Posts : 280
Reputation : 30
Language : Australia
Location : Sydney

http://tommyzserver.forummotion.com

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