Jump to content

Help With Navigation Bars... Plz


Dreffel
 Share

Recommended Posts

Hey...I just have a question out of interest's sake... It about the navigation bars, or I hope that's what it's called... :) The bars normally on the top of the page, eg; home, downloads, contact details, etc... (see attachment for pic)Like the facebook bar, that takes you between menus or pages. How is it done? Is there different ways to do this? I can think of this way, but don't think it is the way it should be done...Create the bar as you want it, with all the text, as a image and then just specify which click areas will take you to what areas...OR how should it be done?? Is there any easier ways to do it?Hope this all makes sense.... lol..

post-30543-1245955216_thumb.png

Link to comment
Share on other sites

They are still "standalone hyperlinks" - just within a single division with background images etc.The actual code is:

	<div class="clearfix" id="fb_menubar">	  <div id="fb_menubar_core">		<ul class="fb_menu_list">		  <li id="fb_menubar_logo" class="fb_menu">			<a title="Go to Facebook Home" href=			"http://www.facebook.com/home.php?ref=logo"></a>		  </li>		  <li id="fb_menu_home" class="fb_menu">			<div class="fb_menu_title">			  <a accesskey="1" href=			  "http://www.facebook.com/home.php?ref=home">Home</a>			</div>		  </li>		  <li id="fb_menu_profile" class="fb_menu">			<div class="fb_menu_title">			  <a accesskey="2" href=			  "http://www.facebook.com/Username?ref=profile">Profile</a>			</div>		  </li>		  <li id="fb_menu_friends" class="fb_menu">			<div class="fb_menu_title">			  <a accesskey="3" href=			  "http://www.facebook.com/friends/?ref=tn">Friends</a>			</div>			<div id="fb_menu_friends_dropdown" class=			"fb_menu_dropdown hidden_elem">			  <div class="fb_menu_item">				<a href=				"http://www.facebook.com/friends/?added&ref=tn">Recently				Added</a>			  </div>			  <div class="fb_menu_item">				<a href=				"http://www.facebook.com/friends/?filter=afp&ref=tn">All				Friends</a>			  </div>			  <div class="fb_menu_separator">			  <div class="fb_menu_item">				<a href="http://www.facebook.com/invite.php?ref=tn">Invite				Friends</a>			  </div>			  <div class="fb_menu_item">				<a href=				"http://www.facebook.com/find-friends/?ref=friends">Find				Friends</a>			  </div>			</div>		  </li>		  <li id="fb_menu_inbox" class="fb_menu">			<div class="fb_menu_title">			  <a accesskey="4" id="nav_inbox" href=			  "http://www.facebook.com/inbox/?ref=mb" name=			  "nav_inbox">Inbox<span style="display: none;" class=			  "fb_menu_count_holder" id=			  "fb_menu_inbox_unread_count_holder"><span class="tl"><span class=			  "tr"><span class="br"><span id="fb_menu_inbox_unread_count"			  class="bl">0</span></span></span></span></span></a>			</div>			<div id="fb_menu_inbox_dropdown" class=			"fb_menu_dropdown hidden_elem">			  <div class="fb_menu_item">				<a id="menu_item_goto_inbox" href=				"http://www.facebook.com/inbox/?drop&ref=mb" name=				"menu_item_goto_inbox">View Message Inbox <span style=				"display: none;" id=				"menu_item_goto_inbox_count_wrapper">(<span id=				"menu_item_goto_inbox_count">0</span>)</span></a>			  </div>			  <div class="fb_menu_item">				<a href=				"http://www.facebook.com/inbox/?compose&ref=mb">Compose New				Message</a>			  </div>			</div>		  </li>		</ul>	  </div>	  <div id="fb_menubar_aux">		<ul class="fb_menu_list">		  <li class="fb_menu fbm_last">			<div class="clearfix" id="universal_search">			  <form onsubmit=			  'return wait_for_load(this, event, function() { search_gen_sid("1549371060"); return search_validate("q"); });'			  id="universal_search_form" name="universal_search_form" action=			  "http://www.facebook.com/s.php?ref=search" method="get">				<div id="universal_search_input">				  <input type="text" onfocus=				  'return wait_for_load(this, event, function() { var typeahead_source_instance1 = new search_friend_source("1549371060-1245564106-3&u=1549371060");typeahead_source_instance1.text_nomatch;typeahead_source_instance1.udata={"u":1549371060,"src":"search_friend_source","abt":"A"};typeahead_source_instance1.search_limit=5;typeahead_source_instance1.history=new UserHistory("1549371060");new search_typeaheadpro(this, typeahead_source_instance1,{onselect:search_typeahead_onselect,onsubmit:search_typeahead_onsubmit,udata:{"u":1549371060,"src":"search_friend_source","abt":"A"},max_results:5,enableSearchResults:0});this.onfocus(); });'				  autocomplete="off" size="25" maxlength="100" class=				  "inputtext typeahead_placeholder DOMControl_placeholder"				  placeholder="Search" title="Search" value="" tabindex="1"				  results="0" name="q" id="q">				</div>				<div id="universal_search_submit">				  <a title="Search Facebook" class="qsearch_button" onclick=				  'return wait_for_load(this, event, function() { search_gen_sid("1549371060"); search_validate("q") && $("universal_search_form").submit(); return false; });'>				  </a>				</div><input type="hidden" value="q" name="init" id=				"init"><input type="hidden" value="0" name="sid" id="sid">			  </form>			</div>		  </li>		  <li id="fb_menu_logout" class="fb_menu">			<div class="fb_menu_title">			  <a href=			  "http://www.facebook.com/logout.php?h=c1c53f9041aa65df8ae04ffce8fad849&r=id_4a44aca51ff4e3f93323109&ref=mb">			  Logout</a>			</div>		  </li>		  <li id="fb_menu_settings" class="fb_menu">			<div class="fb_menu_title">			  <a href=			  "http://www.facebook.com/editaccount.php?ref=mb">Settings</a>			</div>		  </li>		  <li id="fb_menu_account" class="fb_menu">			<div class="fb_menu_title">			  <a href="http://www.facebook.com/Username?ref=name">Name</a>			</div>		  </li>		</ul>	  </div>	</div>

Link to comment
Share on other sites

To simplify it:Put them in a list:

<ul id="menu">  <li><a href="">Link</a></li>  <li><a href="">Link</a></li>  <li><a href="">Link</a></li></ul>

Display the links as a block to give them a larger clicking area and lay out the list as desired with CSS.

ul#menu {  background-color: blue;  color: white;  overflow: auto;}ul#menu li { float: left; }ul#menu a {  display: block;  padding: 5px;}

Edited by Ingolme
Link to comment
Share on other sites

Thanx Ingolme.... That helped a lot! Just 1 last thing. When I use that exact code, what must I change so the hyperlinks are not underlined?I think the <ul> is the subject here, but to what will I change it so the results end up the same without the underline? :)

Link to comment
Share on other sites

Thanx Ingolme.... That helped a lot! Just 1 last thing. When I use that exact code, what must I change so the hyperlinks are not underlined?I think the <ul> is the subject here, but to what will I change it so the results end up the same without the underline? :)
Please read the W3Schools HTML tutorial and CSS tutorial. All the answers are there.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...