vForums Support > Programming & Coding :: Code Requests & Support :: > Rebuilding Navigation Menu
Rebuilding Navigation Menu - Posted By dog199200 (dog199200) on 21st Aug 09 at 10:12am
This may seem like a bit of an odd request, but can i please get a code that will allow me to remove the current navigation menu and rebuild it with my own which is based off of CSS and HTML. I'm asking cause i have a forum that i would really like the nav to match that of the website.
Re: Rebuilding Navigation Menu - Posted By dog199200 (dog199200) on 3rd Sep 09 at 12:09am
bump
Re: Rebuilding Navigation Menu - Posted By Ross (admin) on 3rd Sep 09 at 10:36pm
Hi Dwight,

The basic principal of this would be to create an array of the menu items, hide the current menu and then have them re-written:

<script type="text/javascript">
<!--

var menu = get('menu_buttons', ID);
/* Build an array of the menu links */
var menu_items = new Array(); m = 0;
var menu_items_a = get('a', TAG, menu);
for(a=0; a<menu_items_a.length; a++) {
link_name = (menu_items_a[a].firstChild && menu_items_a[a].firstChild.alt)? menu_items_a[a].firstChild.alt : menu_items_a[a].innerHTML;
menu_items[m++] = new Array(menu_items_a[a].href, link_name);
}
/* Hide the current menu */
menu.parentNode.style.display = 'none';

//-->
</script>


And then to write out the new menu:

<script type="text/javascript">
<!--

for(a=0; a<menu_items.length; a++) {
/*
menu_items[a][0] = Link URL
menu_items[a][1] = Link Display Text
*/
document.write('<a href="'+ menu_items[a][0] +'">'+ menu_items[a][1] +'</a><br />');
}

-->
</script>
Re: Rebuilding Navigation Menu - Posted By dog199200 (dog199200) on 4th Sep 09 at 3:53am
That world work ion the idea of rebuilding it, but the problem is that i'd really like to mimic the website nav menu, kaking it all seem more seamless. And i'm not sure how to get it so that it will not call the old nav menu, but one that I setup via Div tags and css. As for the div and css, i can just copy the exact same setup from the website, and put then in the global header and footers and the css area. That way i should be able to get the dropdown system as well. Sadly I don't know the javascript functions for the logout, but i guess I can call the websites logout link so that way when logging out they get redirected to the main website.
Re: Rebuilding Navigation Menu - Posted By Dreg[Bot] (dregondrahl) on 4th Sep 09 at 10:47am
link to the concept or something ? Then a more specific code can be written =]
Re: Rebuilding Navigation Menu - Posted By dog199200 (dog199200) on 4th Sep 09 at 11:49am
Http://www.divineshadowsonline.com I need the navigation menu on there mimics, drop down and all please {Smile} but like i said, if something can be calling the nav from div codes, then i think the rest can be done by using css and some minor java coding.

P.S. Would it be best if I posted the Div code for all the links? Some of the links are hidden via the API and can only be seen if the users is logged in or staff.


Edit: I Figured I should add the nav information just in case.


-Navigation Links-
Code:
Select All
 
  1. <div class="nav">
  2.                     <ul class="artmenu">
  3.                         <li><a href="http://divineshadowsonline.com/index.php"><span><span>Home</span></span></a></li>
  4.  
  5.                         <li><a href="http://forum.divineshadowsonline.com"><span><span>Forum</span></span></a>
  6.                             <ul>
  7.                                 <?php if($logged_in) { ?>
  8.                                 <li><a href="http://forum.divineshadowsonline.com/action/search"><span><span>Search</span></span></a></li>
  9.                                 <li><a href="http://forum.divineshadowsonline.com/action/view_profile"><span><span>Profile</span></span></a></li>
  10.                                 <li><a href="http://forum.divineshadowsonline.com/action/members"><span><span>Members List</span></span></a></li>
  11.                                 <?php } ?>
  12.  
  13.                                 <?php if($logged_in && $user_info['group'] == "group1 group4" OR $user_info['group'] == "group1" OR $user_info['group'] == "group1 group3") { ?>
  14.                                 <li><a href="http://forum.divineshadowsonline.com/action/admin"><span><span>Admin Panel</span></span></a></li>
  15.                                 <li><a href="http://forum.divineshadowsonline.com/action/register"><span><span>Register User</span></span></a></li>
  16.                                 <?php } ?>
  17.  
  18.                             </ul>
  19.                         </li>
  20.  
  21.              <?php if($logged_in && $user_info['group'] == "group1 group4" OR $user_info['group'] == "group1" OR $user_info['group'] == "group1 group3") { ?>
  22.                         <li><a href="http://www.store.divineshadowsonline.com"><span><span>Store</span></span></a></li>
  23.              <?php } ?>
  24.  
  25.                         <li><a href="#"><span><span>Game Information</span></span></a>
  26.                             <ul>
  27.                                 <li><a href="http://divineshadowsonline.com/plot.php"><span><span>Story Line</span></span></a></li>
  28.                                 <li><a href="http://divineshadowsonline.com/rules.php"><span><span>Rules</span></span></a></li>
  29.                                 <li><a href="http://divineshadowsonline.com/characterinfo.php"><span><span>Character Information</span></span></a></li>
  30.                                 <li><a href="http://divineshadowsonline.com/getting-started.php"><span><span>Getting Started</span></span></a></li>
  31.                             </ul>
  32.                         </li>
  33.  
  34.                         <li><a href="#"><span><span>Downloads</span></span></a>
  35.                             <ul>
  36.                                 <?php if($logged_in) { ?>
  37.                                 <li><a href="http://divineshadowsonline.com/client.php"><span><span>Client Download</span></span></a></li>
  38.                                 <?php } ?>
  39.                                 <li><a href="http://divineshadowsonline.com/wallpaper.php"><span><span>Wallpaper</span></span></a></li>
  40.                                 <li><a href="http://divineshadowsonline.com/multimedia.php"><span><span>Multi-Media</span></span></a></li>
  41.                                 <li><a href="http://divineshadowsonline.com/screenshots.php"><span><span>Screenshots</span></span></a></li>
  42.                             </ul>
  43.                         </li>
  44.  
  45.                         <li><a href="#"><span><span>Support</span></span></a>
  46.                             <ul>
  47.                                 <li><a href="http://divineshadowsonline.com/contact.php"><span><span>Contact</span></span></a></li>
  48.                                 <li><a href="http://divineshadowsonline.com/faq.php"><span><span>FAQ</span></span></a></li>
  49.                                 <li><a href="http://divineshadowsonline.com/privacy-policy.php"><span><span>Privacy Policy</span></span></a></li>
  50.                                 <li><a href="http://divineshadowsonline.com/tou.php"><span><span>Terms Of Use</span></span></a></li>
  51.                             </ul>
  52.                         </li>
  53.                     </ul>
  54.                     <div class="l">
  55.                     </div>
  56.                     <div class="r">
  57.                         <div>
  58.                         </div>
  59.                     </div>
  60.                 </div>
 

-CSS-
Code:
Select All
 
  1. /* begin Menu */
  2. /* menu structure */
  3.  
  4. .artmenu a, .artmenu a:link, .artmenu a:visited, .artmenu a:hover
  5. {
  6.   text-align:left;
  7.   text-decoration:none;
  8.   outline:none;
  9.   letter-spacing:normal;
  10.   word-spacing:normal;
  11. }
  12.  
  13. .artmenu, .artmenu ul
  14. {
  15.   margin: 0;
  16.   padding: 0;
  17.   border: 0;
  18.   list-style-type: none;
  19.   display: block;
  20. }
  21.  
  22. .artmenu li
  23. {
  24.   margin: 0;
  25.   padding: 0;
  26.   border: 0;
  27.   display: block;
  28.   float: left;
  29.   position: relative;
  30.   z-index: 5;
  31.   background:none;
  32. }
  33.  
  34. .artmenu li:hover
  35. {
  36.   z-index: 10000;
  37.   white-space: normal;
  38. }
  39.  
  40. .artmenu li li
  41. {
  42.   float: none;
  43. }
  44.  
  45. .artmenu ul
  46. {
  47.   visibility: hidden;
  48.   position: absolute;
  49.   z-index: 10;
  50.   left: 0;
  51.   top: 0;
  52.   background:none;
  53. }
  54.  
  55. .artmenu li:hover>ul
  56. {
  57.   visibility: visible;
  58.   top: 100%;
  59. }
  60.  
  61. .artmenu li li:hover>ul
  62. {
  63.   top: 0;
  64.   left: 100%;
  65. }
  66.  
  67. .artmenu:after, .artmenu ul:after
  68. {
  69.   content: ".";
  70.   height: 0;
  71.   display: block;
  72.   visibility: hidden;
  73.   overflow: hidden;
  74.   clear: both;
  75. }
  76. .artmenu, .artmenu ul
  77. {
  78.   min-height: 0;
  79. }
  80.  
  81. .artmenu ul
  82. {
  83.   background-image: url(../images/spacer.gif);
  84.   padding: 10px 30px 30px 30px;
  85.   margin: -10px 0 0 -30px;
  86. }
  87.  
  88. .artmenu ul ul
  89. {
  90.   padding: 30px 30px 30px 10px;
  91.   margin: -30px 0 0 -10px;
  92. }
  93.  
  94.  
  95. /* menu structure */
  96. .nav {
  97.   position: relative;
  98.   margin: 0  auto;
  99.   width: 888px;
  100.   height: 28px;
  101.   z-index: 100;
  102. }
  103. .artmenu {
  104.   padding: 0px 0px 0px 0px;
  105. }
  106. .nav .l, .nav .r, .nav .r div {
  107.   top: 0;
  108.   position: absolute;
  109.   z-index: -1;
  110.   overflow: hidden;
  111.   height: 28px;
  112. }
  113. .nav .l {
  114.   left: 0;
  115.   right: 0px;
  116. }
  117. .nav .r {
  118.   right: 0;
  119.   width: 0px;
  120. }
  121. .nav .r div {
  122.   width: 888px;
  123.   right: 0;
  124. }
  125. .nav .l, .nav .r div {
  126.   background-position: left top;
  127.   background-repeat: repeat;
  128.   background-image: url('../images/nav.png');
  129. }
  130. /* end Menu */
  131.  
  132.  
  133. /* begin MenuItem */
  134. .artmenu ul li {
  135.   clear: both;
  136. }
  137. .artmenu a , .artmenu a span {
  138.   height: 28px;
  139.   display: block;
  140. }
  141. .artmenu a {
  142.   cursor: pointer;
  143.   text-decoration: none;
  144.   margin-right: 0px;
  145.   margin-left: 0px;
  146.  
  147. }
  148. .artmenu a span span {
  149.   font-family: Georgia, "Times New Roman", Times, Serif;
  150.   font-size: 13px;
  151.   font-style: normal;
  152.   font-weight: normal;
  153.   color: #FFFFFF;
  154.   padding: 0 12px;
  155.   margin: 0 0px;
  156.   line-height: 28px;
  157.   text-align: center;
  158.   background-image: url('../images/nav.png');
  159.   background-position: left top;
  160.   background-repeat: repeat-x;
  161.  
  162. }
  163. .artmenu a:hover span span {
  164.   color: #31507F;
  165.   background-position: left -28px;
  166. }
  167. .artmenu li:hover a span span {
  168.   color: #31507F;
  169.   background-position: left -28px;
  170. }
  171. .artmenu a.active span span {
  172.   color: #31507F;
  173.   background-position: left -56px;
  174. }
  175. /* end MenuItem */
  176.  
  177.  
  178. /* begin MenuSeparator */
  179. .nav .separator {
  180.   display: block;
  181.   width: 1px;
  182.   height: 28px;
  183.   background-image: url('../images/item-separator.png');
  184. }
  185. /* end MenuSeparator */
  186.  
  187.  
  188. /* begin MenuSubItem */
  189. .artmenu ul a {
  190.   display:block;
  191.   text-align: center;
  192.   white-space: nowrap;
  193.   height: 28px;
  194.   width: 206px;
  195.   overflow:hidden;
  196.   line-height: 28px;
  197.   margin-right: auto;
  198.   background-image: url('../images/nav.png');
  199.   background-color: #05080D;
  200.   background-position: left top;
  201.   background-repeat: repeat-x;
  202.   border-width: 1px;
  203.   border-style: solid;
  204.   border-color: #000000;
  205. }
  206. .nav ul.artmenu ul span, .nav ul.artmenu ul span span {
  207.   display: inline;
  208.   float: none;
  209.   margin: inherit;
  210.   padding: inherit;
  211.   background-image: none;
  212.   text-align: inherit;
  213.   text-decoration: inherit;
  214. }
  215. .artmenu ul a, .artmenu ul a:link, .artmenu ul a:visited, .artmenu ul a:hover, .artmenu ul a:active, .nav ul.artmenu ul span, .nav ul.artmenu ul span span {
  216.   text-align: left;
  217.   text-indent: 12px;
  218.   text-decoration: none;
  219.   line-height: 28px;
  220.   color: #FFFFFF;
  221.   font-family: Georgia, "Times New Roman", Times, Serif;
  222.   font-size: 13px;
  223.   font-style: normal;
  224.   font-weight: normal;
  225. }
  226. .artmenu ul ul a {
  227.   margin-left: auto;
  228. }
  229. .artmenu ul li a:hover {
  230.   color: #31507F;
  231.   border-color: #444444;
  232.   background-position: 0 -28px;
  233. }
  234. .artmenu ul li:hover>a {
  235.   color: #31507F;
  236.   border-color: #444444;
  237.   background-position: 0 -28px;
  238. }
  239. .nav .artmenu ul li a:hover span, .nav .artmenu ul li a:hover span span {
  240.   color: #31507F;
  241. }
  242. .nav .artmenu ul li:hover>a span, .nav .artmenu ul li:hover>a span span {
  243.   color: #31507F;
  244. }
  245. /* end MenuSubItem */
 


And if your wondering, I probably could clean up the CSS a bit, just haven't got around to it yet.
Re: Rebuilding Navigation Menu - Posted By dog199200 (dog199200) on 6th Sep 09 at 1:22am
any luck on this?
Re: Rebuilding Navigation Menu - Posted By Dreg[Bot] (dregondrahl) on 7th Sep 09 at 10:01am
its doable, anything you want with a dropdown? or just buttons?

http://testrahl.vforums.co.uk/

where do you want the forum buttons added to ?
Re: Rebuilding Navigation Menu - Posted By dog199200 (dog199200) on 7th Sep 09 at 8:56pm
well ok i notice a few errors, the links atre still trying to direct to links on the forum for the most part, but i think i can manage to fix that. Also look at the code i posted above. It will have all the needed links for the nav, because some of then are hidden either do to group or do to needing to be logged in. like for example, when logged out to get to the forum it should just be forum, but when logged links to the search, profile, members list , as well as logout should be added (in that order). Also if the user rank is group1 or of the administrator group, they then have access to register and admin panel. Oh and under the downloads please add this page <a href="http://divineshadowsonline.com/client.php">Client Download</a>, its only suppose to be shown in the drop down when the user is logged in. I think thats all, but i'm not sure. Also for the logout, don't use the forums logout system use the page for the website which should be logout.php, that ways the cross domain problems with the login Cookie no longer exists.

Anyways, other then missing logged in or staff links it looks good. Oh also the shop needs to be added as well, thatlionk for that is http://www.store.divineshadowsonline.com and is title Store. Its its own link Between Forum and game Information. Again its another link thats to only been seen if logged in.

Anyways thank you for doing this, just added the missing links and from what i see from your test foruk it looks great, i think i can manage to fix the links myself considering all but like 5 of then direct off the forum.
Re: Rebuilding Navigation Menu - Posted By Dreg[Bot] (dregondrahl) on 7th Sep 09 at 9:27pm
okay so you can do it, or you need help? i just took the menu from your coding and CSS too. anything you put in the div is what will appear. So tell me exactly what you need help with once your done adding/modifying any links.
Re: Rebuilding Navigation Menu - Posted By dog199200 (dog199200) on 7th Sep 09 at 11:23pm
I can do it I just need an idea on how to set it so it check if the user is logged in and if the user is of the admin rank. My JS skills weren't that great to begin with, but now that i've been doing a lot more php coding, my JS skills are even worse.

Edit: But yea i seen how you did it, i looked at the source on the test forum and got the code and have it setup on the forum right now, well i have what you had setup.


Edit 2: OK I know for the login check its

Code:
Select All
 
  1. <script type="text/javascript">
  2. <!--
  3. if(vf_username != 'guest'){
  4.  
  5. }
  6. //-->
  7. </script>
 


but I'm not sure how i can call the innerHTML in order to to add the links since the innerHTML ain't working without a variable, and I don't see a reason for needing to assign a variable.

and wouldn't the username just have to be changed to group1 for the same effect but checking to see if the user is an admin?
Re: Rebuilding Navigation Menu - Posted By Dreg[Bot] (dregondrahl) on 8th Sep 09 at 11:51am
yes you do the group the same way, except remember its an array.
I don't get what you mean by "call the innerHTML"

if your checking for things and adding different links just add the JS into the html part and use document.write to add the things you want based on logged in or not or admin
Re: Rebuilding Navigation Menu - Posted By dog199200 (dog199200) on 8th Sep 09 at 6:19pm
hmm ok, and what i meant by calling the innerHTMl, i'm used to rewriting arrays, not making or calling them, i'm used to using innerHTML instead of document.write, but I got most of it to work. I can't get the rank check to work at all. The code keeps acting as if its broken.

Code:
Select All
 
  1. <script type="text/javascript">
  2. <!--
  3. if(vf_username == 'group1'){
  4. document.write('<li><a href="/action/admin"><span><span>Admin Panel</span></span></a></li>');
  5. }
  6. //-->
  7. </script>
 


I don't have to do anything likr I had to do in the php version so i?

Php Version of Group Check:
Code:
Select All
 
  1. <?php if($logged_in && $user_info['group'] == "group1 group4" OR $user_info['group'] == "group1" OR $user_info['group'] == "group1 group3") { ?>
 



Edit: I've even tried using this and it still wont work:

Code:
Select All
 
  1. <script type="text/javascript">
  2. var a = "group1";
  3.  
  4. if(rank.match(a)){
  5. document.write("<li><a href=/action/admin><span><span>Admin Panel</span></span></a></li>");
  6. }
  7. </script>
 


Re: Rebuilding Navigation Menu - Posted By Dreg[Bot] (dregondrahl) on 9th Sep 09 at 6:33pm
haha still thinking Pb {Tongue Out} ? on vf its just the group numbernot "group1"
also tried looping the groups array?

var vf_usergroup = Array('3', '4');
Re: Rebuilding Navigation Menu - Posted By dog199200 (dog199200) on 9th Sep 09 at 8:48pm
{Tongue Out} no i was more thinking for the API cause it is group1 for admin, group2 for mod, and so on and so forth {Tongue Out}

anyways i can't get it to work, here is what i've tried so far:

Code:
Select All
 
  1. <script type="text/javascript">
  2. var vf_usergroup = Array('1');
  3.  
  4. if(rank.match(vf_usergroup)){
  5. document.write('<li><a href="/action/admin"><span><span>Admin Panel</span></span></a></li>');
  6. }
  7. </script>
 


Code:
Select All
 
  1. <script type="text/javascript">
  2. <!--
  3. if(vf_usergroup == 'group1'){
  4. document.write('<li><a href=/action/register><span><span>Register User</span></span></a></li>');
  5. }
  6. //-->
  7. </script>
 


Code:
Select All
 
  1. <script type="text/javascript">
  2. <!--
  3. if(vf_usergroup == '1'){
  4. document.write('<li><a href=/action/register><span><span>Register User</span></span></a></li>');
  5. }
  6. //-->
  7. </script>
 
Re: Rebuilding Navigation Menu - Posted By Dreg[Bot] (dregondrahl) on 10th Sep 09 at 4:32pm
You use a Loop =]

Code:
Select All
 
  1. <script type="text/javascript">
  2. <!--
  3.  
  4. for(var i = 0; i < vf_usergroup.length; i ++)
  5. {
  6.     if(vf_usergroup[i] == '1')
  7.     {
  8.         document.write('MMOOO');
  9.     }
  10. }
  11.  
  12. //-->
  13. </script>
 


Re: Rebuilding Navigation Menu - Posted By dog199200 (dog199200) on 10th Sep 09 at 5:18pm
doesn't work.
Re: Rebuilding Navigation Menu - Posted By Dreg[Bot] (dregondrahl) on 10th Sep 09 at 8:02pm
works for me, be a little more specific {Tongue Out} (its even on the test forum)
Re: Rebuilding Navigation Menu - Posted By dog199200 (dog199200) on 10th Sep 09 at 10:21pm
by it doesn't work as in its not doing anything at all. I even tired leaving the MMOOO in and seeing it that would work and it doesn't. try this on the test forum and see if it works please:

Code:
Select All
 
  1. <script type="text/javascript">
  2. for(var i = 0; i < vf_usergroup.length; i ++)
  3. {
  4. if(vf_usergroup[i] == '1')
  5. {
  6. document.write('<li><a href=/action/admin><span><span>Admin Panel</span></span></a></li><li><a href=/action/register><span><span>Register User</span></span></a></li>');
  7. }
  8. }
  9. </script>
 




Edit: It seems as if defining events via group isn't working at all on my forum.
Re: Rebuilding Navigation Menu - Posted By Dreg[Bot] (dregondrahl) on 11th Sep 09 at 1:35am
Okay i updated the codes, try them now =] Found a small bug since multiple groups.
Re: Rebuilding Navigation Menu - Posted By dog199200 (dog199200) on 11th Sep 09 at 2:23am
ok it works now, thank you {Smile}
Re: Rebuilding Navigation Menu - Posted By Dreg[Bot] (dregondrahl) on 11th Sep 09 at 8:00am
NO prob =]