vForums Support :: Programming & Coding :: Code Requests & Support :: Rebuilding Navigation Menu - View Topic (Page 1 of 2)
| |
| dog199200 Guest | Rebuilding Navigation Menu (21st Aug 09 at 10:12am UTC) Resolved | | 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. | |
| dog199200 Guest | Re: Rebuilding Navigation Menu (3rd Sep 09 at 12:09am UTC) | | bump | |
| Ross Administrator
Posts: 3,709 Status: Offline Gender: Male Age: 8 1⁄1 Joined:
Additional Groups: Support Team
pmwwwgtalkvForum | Re: Rebuilding Navigation Menu (3rd Sep 09 at 10:36pm UTC) | | 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> | |
|
| dog199200 Guest | Re: Rebuilding Navigation Menu (4th Sep 09 at 3:53am UTC) | | 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. | |
| Dreg[Bot] Moderator
Broken Posts: 415 Status: Offline Gender: Male Age: 37 Joined:
Additional Groups: Coding Team
pmYesh im sneaky! | Re: Rebuilding Navigation Menu (4th Sep 09 at 10:47am UTC) | | link to the concept or something ? Then a more specific code can be written =] | |
Now obsession rules my mind This commotion makes me blind Searching out who ever runs Or has stolen away my life
But i've already said
Don't ever back down Don't ever turn around My end has come So now I come for you.... |
| dog199200 Guest | Re: Rebuilding Navigation Menu (4th Sep 09 at 11:49am UTC) | | Http://www.divineshadowsonline.com I need the navigation menu on there mimics, drop down and all please 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: - <div class="nav">
- <ul class="artmenu">
- <li><a href="http://divineshadowsonline.com/index.php"><span><span>Home</span></span></a></li>
-
- <li><a href="http://forum.divineshadowsonline.com"><span><span>Forum</span></span></a>
- <ul>
- <?php if($logged_in) { ?>
- <li><a href="http://forum.divineshadowsonline.com/action/search"><span><span>Search</span></span></a></li>
- <li><a href="http://forum.divineshadowsonline.com/action/view_profile"><span><span>Profile</span></span></a></li>
- <li><a href="http://forum.divineshadowsonline.com/action/members"><span><span>Members List</span></span></a></li>
- <?php } ?>
-
- <?php if($logged_in && $user_info['group'] == "group1 group4" OR $user_info['group'] == "group1" OR $user_info['group'] == "group1 group3") { ?>
- <li><a href="http://forum.divineshadowsonline.com/action/admin"><span><span>Admin Panel</span></span></a></li>
- <li><a href="http://forum.divineshadowsonline.com/action/register"><span><span>Register User</span></span></a></li>
- <?php } ?>
-
- </ul>
- </li>
-
- <?php if($logged_in && $user_info['group'] == "group1 group4" OR $user_info['group'] == "group1" OR $user_info['group'] == "group1 group3") { ?>
- <li><a href="http://www.store.divineshadowsonline.com"><span><span>Store</span></span></a></li>
- <?php } ?>
-
- <li><a href="#"><span><span>Game Information</span></span></a>
- <ul>
- <li><a href="http://divineshadowsonline.com/plot.php"><span><span>Story Line</span></span></a></li>
- <li><a href="http://divineshadowsonline.com/rules.php"><span><span>Rules</span></span></a></li>
- <li><a href="http://divineshadowsonline.com/characterinfo.php"><span><span>Character Information</span></span></a></li>
- <li><a href="http://divineshadowsonline.com/getting-started.php"><span><span>Getting Started</span></span></a></li>
- </ul>
- </li>
-
- <li><a href="#"><span><span>Downloads</span></span></a>
- <ul>
- <?php if($logged_in) { ?>
- <li><a href="http://divineshadowsonline.com/client.php"><span><span>Client Download</span></span></a></li>
- <?php } ?>
- <li><a href="http://divineshadowsonline.com/wallpaper.php"><span><span>Wallpaper</span></span></a></li>
- <li><a href="http://divineshadowsonline.com/multimedia.php"><span><span>Multi-Media</span></span></a></li>
- <li><a href="http://divineshadowsonline.com/screenshots.php"><span><span>Screenshots</span></span></a></li>
- </ul>
- </li>
-
- <li><a href="#"><span><span>Support</span></span></a>
- <ul>
- <li><a href="http://divineshadowsonline.com/contact.php"><span><span>Contact</span></span></a></li>
- <li><a href="http://divineshadowsonline.com/faq.php"><span><span>FAQ</span></span></a></li>
- <li><a href="http://divineshadowsonline.com/privacy-policy.php"><span><span>Privacy Policy</span></span></a></li>
- <li><a href="http://divineshadowsonline.com/tou.php"><span><span>Terms Of Use</span></span></a></li>
- </ul>
- </li>
- </ul>
- <div class="l">
- </div>
- <div class="r">
- <div>
- </div>
- </div>
- </div>
-CSS-
Code: - /* begin Menu */
- /* menu structure */
-
- .artmenu a, .artmenu a:link, .artmenu a:visited, .artmenu a:hover
- {
- text-align:left;
- text-decoration:none;
- outline:none;
- letter-spacing:normal;
- word-spacing:normal;
- }
-
- .artmenu, .artmenu ul
- {
- margin: 0;
- padding: 0;
- border: 0;
- list-style-type: none;
- display: block;
- }
-
- .artmenu li
- {
- margin: 0;
- padding: 0;
- border: 0;
- display: block;
- float: left;
- position: relative;
- z-index: 5;
- background:none;
- }
-
- .artmenu li:hover
- {
- z-index: 10000;
- white-space: normal;
- }
-
- .artmenu li li
- {
- float: none;
- }
-
- .artmenu ul
- {
- visibility: hidden;
- position: absolute;
- z-index: 10;
- left: 0;
- top: 0;
- background:none;
- }
-
- .artmenu li:hover>ul
- {
- visibility: visible;
- top: 100%;
- }
-
- .artmenu li li:hover>ul
- {
- top: 0;
- left: 100%;
- }
-
- .artmenu:after, .artmenu ul:after
- {
- content: ".";
- height: 0;
- display: block;
- visibility: hidden;
- overflow: hidden;
- clear: both;
- }
- .artmenu, .artmenu ul
- {
- min-height: 0;
- }
-
- .artmenu ul
- {
- background-image: url(../images/spacer.gif);
- padding: 10px 30px 30px 30px;
- margin: -10px 0 0 -30px;
- }
-
- .artmenu ul ul
- {
- padding: 30px 30px 30px 10px;
- margin: -30px 0 0 -10px;
- }
-
-
- /* menu structure */
- .nav {
- position: relative;
- margin: 0 auto;
- width: 888px;
- height: 28px;
- z-index: 100;
- }
- .artmenu {
- padding: 0px 0px 0px 0px;
- }
- .nav .l, .nav .r, .nav .r div {
- top: 0;
- position: absolute;
- z-index: -1;
- overflow: hidden;
- height: 28px;
- }
- .nav .l {
- left: 0;
- right: 0px;
- }
- .nav .r {
- right: 0;
- width: 0px;
- }
- .nav .r div {
- width: 888px;
- right: 0;
- }
- .nav .l, .nav .r div {
- background-position: left top;
- background-repeat: repeat;
- background-image: url('../images/nav.png');
- }
- /* end Menu */
-
-
- /* begin MenuItem */
- .artmenu ul li {
- clear: both;
- }
- .artmenu a , .artmenu a span {
- height: 28px;
- display: block;
- }
- .artmenu a {
- cursor: pointer;
- text-decoration: none;
- margin-right: 0px;
- margin-left: 0px;
-
- }
- .artmenu a span span {
- font-family: Georgia, "Times New Roman", Times, Serif;
- font-size: 13px;
- font-style: normal;
- font-weight: normal;
- color: #FFFFFF;
- padding: 0 12px;
- margin: 0 0px;
- line-height: 28px;
- text-align: center;
- background-image: url('../images/nav.png');
- background-position: left top;
- background-repeat: repeat-x;
-
- }
- .artmenu a:hover span span {
- color: #31507F;
- background-position: left -28px;
- }
- .artmenu li:hover a span span {
- color: #31507F;
- background-position: left -28px;
- }
- .artmenu a.active span span {
- color: #31507F;
- background-position: left -56px;
- }
- /* end MenuItem */
-
-
- /* begin MenuSeparator */
- .nav .separator {
- display: block;
- width: 1px;
- height: 28px;
- background-image: url('../images/item-separator.png');
- }
- /* end MenuSeparator */
-
-
- /* begin MenuSubItem */
- .artmenu ul a {
- display:block;
- text-align: center;
- white-space: nowrap;
- height: 28px;
- width: 206px;
- overflow:hidden;
- line-height: 28px;
- margin-right: auto;
- background-image: url('../images/nav.png');
- background-color: #05080D;
- background-position: left top;
- background-repeat: repeat-x;
- border-width: 1px;
- border-style: solid;
- border-color: #000000;
- }
- .nav ul.artmenu ul span, .nav ul.artmenu ul span span {
- display: inline;
- float: none;
- margin: inherit;
- padding: inherit;
- background-image: none;
- text-align: inherit;
- text-decoration: inherit;
- }
- .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 {
- text-align: left;
- text-indent: 12px;
- text-decoration: none;
- line-height: 28px;
- color: #FFFFFF;
- font-family: Georgia, "Times New Roman", Times, Serif;
- font-size: 13px;
- font-style: normal;
- font-weight: normal;
- }
- .artmenu ul ul a {
- margin-left: auto;
- }
- .artmenu ul li a:hover {
- color: #31507F;
- border-color: #444444;
- background-position: 0 -28px;
- }
- .artmenu ul li:hover>a {
- color: #31507F;
- border-color: #444444;
- background-position: 0 -28px;
- }
- .nav .artmenu ul li a:hover span, .nav .artmenu ul li a:hover span span {
- color: #31507F;
- }
- .nav .artmenu ul li:hover>a span, .nav .artmenu ul li:hover>a span span {
- color: #31507F;
- }
- /* end MenuSubItem */
And if your wondering, I probably could clean up the CSS a bit, just haven't got around to it yet. | |
| dog199200 Guest | Re: Rebuilding Navigation Menu (6th Sep 09 at 1:22am UTC) | | any luck on this? | |
| Dreg[Bot] Moderator
Broken Posts: 415 Status: Offline Gender: Male Age: 37 Joined:
Additional Groups: Coding Team
pmYesh im sneaky! | Re: Rebuilding Navigation Menu (7th Sep 09 at 10:01am UTC) | | 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 ? | |
Now obsession rules my mind This commotion makes me blind Searching out who ever runs Or has stolen away my life
But i've already said
Don't ever back down Don't ever turn around My end has come So now I come for you.... |
| dog199200 Guest | Re: Rebuilding Navigation Menu (7th Sep 09 at 8:56pm UTC) | | 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. | |
| Dreg[Bot] Moderator
Broken Posts: 415 Status: Offline Gender: Male Age: 37 Joined:
Additional Groups: Coding Team
pmYesh im sneaky! | Re: Rebuilding Navigation Menu (7th Sep 09 at 9:27pm UTC) | | 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. | |
Now obsession rules my mind This commotion makes me blind Searching out who ever runs Or has stolen away my life
But i've already said
Don't ever back down Don't ever turn around My end has come So now I come for you.... |
| dog199200 Guest | Re: Rebuilding Navigation Menu (7th Sep 09 at 11:23pm UTC) | | 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: - <script type="text/javascript">
- <!--
- if(vf_username != 'guest'){
-
- }
- //-->
- </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? | |
| Dreg[Bot] Moderator
Broken Posts: 415 Status: Offline Gender: Male Age: 37 Joined:
Additional Groups: Coding Team
pmYesh im sneaky! | Re: Rebuilding Navigation Menu (8th Sep 09 at 11:51am UTC) | | 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 | |
Now obsession rules my mind This commotion makes me blind Searching out who ever runs Or has stolen away my life
But i've already said
Don't ever back down Don't ever turn around My end has come So now I come for you.... |
| dog199200 Guest | Re: Rebuilding Navigation Menu (8th Sep 09 at 6:19pm UTC) | | 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: - <script type="text/javascript">
- <!--
- if(vf_username == 'group1'){
- document.write('<li><a href="/action/admin"><span><span>Admin Panel</span></span></a></li>');
- }
- //-->
- </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: - <?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: - <script type="text/javascript">
- var a = "group1";
-
- if(rank.match(a)){
- document.write("<li><a href=/action/admin><span><span>Admin Panel</span></span></a></li>");
- }
- </script>
| |
| Dreg[Bot] Moderator
Broken Posts: 415 Status: Offline Gender: Male Age: 37 Joined:
Additional Groups: Coding Team
pmYesh im sneaky! | Re: Rebuilding Navigation Menu (9th Sep 09 at 6:33pm UTC) | | haha still thinking Pb ? on vf its just the group numbernot "group1" also tried looping the groups array?
var vf_usergroup = Array('3', '4');
| |
Now obsession rules my mind This commotion makes me blind Searching out who ever runs Or has stolen away my life
But i've already said
Don't ever back down Don't ever turn around My end has come So now I come for you.... |
| dog199200 Guest | Re: Rebuilding Navigation Menu (9th Sep 09 at 8:48pm UTC) | | no i was more thinking for the API cause it is group1 for admin, group2 for mod, and so on and so forth
anyways i can't get it to work, here is what i've tried so far:
Code: - <script type="text/javascript">
- var vf_usergroup = Array('1');
-
- if(rank.match(vf_usergroup)){
- document.write('<li><a href="/action/admin"><span><span>Admin Panel</span></span></a></li>');
- }
- </script>
Code: - <script type="text/javascript">
- <!--
- if(vf_usergroup == 'group1'){
- document.write('<li><a href=/action/register><span><span>Register User</span></span></a></li>');
- }
- //-->
- </script>
Code: - <script type="text/javascript">
- <!--
- if(vf_usergroup == '1'){
- document.write('<li><a href=/action/register><span><span>Register User</span></span></a></li>');
- }
- //-->
- </script>
| |
| |
| |
|