Go Back   vb.org Archive > vBulletin 3 Discussion > vB3 Design and Graphics Discussions
  #1  
Old 09-08-2009, 02:50 PM
NoKSouLz NoKSouLz is offline
 
Join Date: Feb 2008
Posts: 60
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default Adding Javascript Dropdown Menu to vBulletin

Hey, im trying to add a javascript dropdown menu to my forum, but can't seem to get the dropdowns to work.

Ill try to explain:

I downloaded a freeware javascript menu from this site:
http://www.leigeber.com/2008/11/drop-down-menu/

If you have the time please look at that so you know what im talking about.

Ok, so ive uploaded all the correct files, and manually edited the dropdowns to suit my site. However, the dropdowns wont work and i have no clue if it is wrong paths or just the right codes in the wrong place.

This is the css:
Quote:
body {margin:25px; font:11px Verdana,Arial; background:#eee}
ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#F9B600; text-decoration:none}
ul.menu li {position:relative; float:left; margin-right:2px}
ul.menu ul {position:absolute; top:26px; left:0; background:#0A0A0A; display:none; opacity:0; list-style:none}
ul.menu ul li {position:relative; border:0px solid #aaa; border-top:none; width:168px; margin:0}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#0A0A0A}
ul.menu ul li a:hover {background-color:#050505}
ul.menu ul ul {left:168px; top:-1px}
ul.menu .menulink {border:0px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(http://www.eurolivegaming.com/euro/spacer.gif); width:130px}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(http://www.eurolivegaming.com/euro/spacer.gif)}
ul.menu .sub {background:#0A0A0A url(images/arrow.gif) 156px 8px no-repeat}
ul.menu .topline {border-top:0px solid #aaa}
This file is called style.css and is located in the forum/ folder

This is the index code:
Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Dropdown Menu Demo</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<ul class="menu" id="menu">
<li><a href="#" class="menulink">EuroLive</a>
<ul>
<li><a href="#"><img src="http://img513.imageshack.us/img513/7024/arrowk.png" border="0"> About Us</a></li>
<li>
<a href="#" class="sub"><img src="http://img513.imageshack.us/img513/7024/arrowk.png" border="0"> Features</a>
<ul>
<li class="topline"><a href="#">Arcade</a></li>
<li><a href="#">Activity</a></li>
<li><a href="#">Calendar</a></li>
</ul>
</li>
<li>
<a href="#" class="sub"><img src="http://img513.imageshack.us/img513/7024/arrowk.png" border="0"> Content</a>
<ul>
<li class="topline"><a href="#">Articles</a></li>
<li><a href="#">Interviews</a></li>
<li><a href="#">Community Top 10</a></li>
<li><a href="#">Gears of War Recaps</a></li>
</ul>
</li>
<li>
<a href="#" class="sub"><img src="http://img513.imageshack.us/img513/7024/arrowk.png" border="0"> Affiliates</a>
<ul>
<li class="topline"><a href="#">Major League Gaming </a></li>
<li><a href="#">GameBattles</a></li>
<li>
<a href="#">Decerto eSports </a>

</li>
<li><a href="#">Consoles.net</a></li>
</li>
<li><a href="#">ESGN LAN</a></li>
</ul>
</li>
<li>
<a href="#" class="sub"><img src="http://img513.imageshack.us/img513/7024/arrowk.png" border="0"> Partners</a>
<ul>
<li>
<a href="#" class="sub">Infused Hosting</a>
<ul>
<li class="topline"><a href="#">Website</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Plans</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><img src="http://img513.imageshack.us/img513/7024/arrowk.png" border="0"> Contact</a></li>
</ul>
</li>
<li><a href="#" class="menulink">&nbsp;&nbsp;&nbsp;Forum</a>
<ul>
<li><a href="#"><img src="http://img513.imageshack.us/img513/7024/arrowk.png" border="0"> Forums Frontpage</a></li>
<li><a href="#"><img src="http://img513.imageshack.us/img513/7024/arrowk.png" border="0"> New Users Lounge</a></li>
<li><a href="#"><img src="http://img513.imageshack.us/img513/7024/arrowk.png" border="0"> Site Suggestions</a></li>
<li><a href="#"><img src="http://img513.imageshack.us/img513/7024/arrowk.png" border="0"> Moderating Staff</a></li>
<li><a href="#"><img src="http://img513.imageshack.us/img513/7024/arrowk.png" border="0"> Forum Rules</a></li>
<li>
<a href="#" class="sub"><img src="http://img3.imageshack.us/img3/2767/92404088.png" border="0"> Account Options</a>
<ul>
<li class="topline"><a href="#">Edit Profile</a></li>
<li><a href="#">Edit Signature</a></li>
<li><a href="#">Edit Avatar</a></li>
<li><a href="#">Edit Arcade Options</a></li>
<li><a href="#">Request Username</a></li>

</ul>
</li>
<li>
<a href="#" class="sub"><img src="http://img3.imageshack.us/img3/2767/92404088.png" border="0"> Private Messages</a>
<ul>
<li class="topline"><a href="#">Inbox</a></li>
<li><a href="#">Sent Items</a></li>
<li><a href="#">Compose Message</a></li>
<li><a href="#">Track Messages</a></li>
<li><a href="#">Edit Folders</a></li>

</ul>
</li>
<li><a href="#"><img src="http://img515.imageshack.us/img515/6719/blackicons145.png" border="0"> Today's Posts</a></li>
<li><a href="#"><img src="http://img515.imageshack.us/img515/6719/blackicons145.png" border="0"> New Posts</a></li>
<li><a href="#"><img src="http://img515.imageshack.us/img515/6719/blackicons145.png" border="0"> Who's Online</a></li>
<li><a href="#"><img src="http://img515.imageshack.us/img515/6719/blackicons145.png" border="0"> Subscribed Threads</a></li>
<li><a href="#"><img src="http://img515.imageshack.us/img515/6719/blackicons145.png" border="0"> Mark Forums Read</a></li>
<li><a href="#"><img src="http://img515.imageshack.us/img515/6719/blackicons145.png" border="0"> View Forum Leaders</a></li>
<li><a href="#"><img src="http://img515.imageshack.us/img515/6719/blackicons145.png" border="0"> Forum Archive</a></li>
</ul>
</li>
<li>
<a href="#" class="menulink">Pro Teams</a>
<ul>
<li><a href="#">All Teams</a></li>
<li>
<a href="#" class="sub">Gears of War 1</a>
<ul>
<li class="topline"><a href="#">Team Dignitas</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="menulink">&nbsp;&nbsp;&nbsp;Media</a>
<ul>
<li><a href="#"><img src="http://img513.imageshack.us/img513/7024/arrowk.png" border="0"> Recently Added</a></li>
<li>
<a href="#" class="sub"><img src="http://img513.imageshack.us/img513/7024/arrowk.png" border="0"> Videos</a>
<ul>
<li class="topline">
<a href="#" class="sub">Community Top 10</a>
<ul>
<li class="topline"><a href="#">Week #1</a></li>
</ul>
</li><li><a href="#">Tournament Footage</a></li><li><a href="#">Scrim Footage</a></li>
</ul>
</li>
<li><a href="#"><img src="http://img513.imageshack.us/img513/7024/arrowk.png" border="0"> Gallery</a></li>
<li><a href="#"><img src="http://img513.imageshack.us/img513/7024/arrowk.png" border="0"> Audio</a></li>
</ul>
</li>
<li><a href="#" class="menulink">Search</a></li>
<li>
<a href="#" class="menulink">Help</a>
<ul>
<li>
<a href="#" class="sub"><img src="http://img513.imageshack.us/img513/7024/arrowk.png" border="0"> Information</a>
<ul>
<li class="topline"><a href="#">About Us</a></li>
<li><a href="#">Moderating Staff</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Forum Rules</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Advertise on EuroLive</a></li>
<li><a href="#">RSS Feeds</a></li>
<li><a href="#">Contact Us</a></li>

</ul>
</li>
<li>
<a href="#" class="sub"><img src="http://img513.imageshack.us/img513/7024/arrowk.png" border="0"> Staff Resources</a>
<ul>
<li class="topline"><a href="#">Guide: Article Setup</a></li>
<li><a href="#">Guide: Update Slideshow</a></li>
<li><a href="#">News Directory</a></li>
<li><a href="#">Staff Images</a></li>
<li><a href="#">Signature Images</a></li>
<li><a href="#">EuroLive Images</a></li>

</ul>
</li>
<li>
<a href="#" class="sub"><img src="http://img513.imageshack.us/img513/7024/arrowk.png" border="0"> Forum FAQ's</a>
<ul>
<li class="topline"><a href="#">Posting FAQ</a></li>
<li><a href="#">Forum FAQ</a></li>
<li><a href="#">Profile FAQ</a></li>

</ul>
</li>
</ul>
</li>
</ul>
<div id="text" style="float:left; clear:left; width:650px; margin-top:10px">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sollicitudin. Fusce varius pellentesque ligula. Proin condimentum purus a nunc tempor pellentesque. Proin ac pede in leo tincidunt varius. Ut sed nibh. Praesent adipiscing, sapien sit amet sagittis convallis, dolor neque venenatis diam, at feugiat lacus quam vel pede. Mauris vel enim. Nunc nunc nibh, bibendum ornare, mattis ac, elementum at, mi. Mauris orci massa, vehicula ut, elementum nec, bibendum pretium, elit.
</div>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
</body>
</html>
This is the example index.php that i edited with my own links. How do i embed this code correctly into my site?

Any help would be greatly appreciated<3
Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:40 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.03646 seconds
  • Memory Usage 2,194KB
  • Queries Executed 11 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)ad_showthread_firstpost
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)navbar
  • (3)navbar_link
  • (120)option
  • (1)post_thanks_box
  • (1)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit_info
  • (1)postbit
  • (1)postbit_onlinestatus
  • (1)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete