Hi there.
I've been trying to add a drop down menu to my "test" forum. The menu is a "pure css" menu, meaning it doesn't need any java scripts to make it work. I got the menu from
Here but if you look here at my
Test forum, you'll see how it looks!
I believe I've done the editing (according to the instructions at the menu website) properly, but I can't figure out why the menu isn't looking like it should be.
I did add the menu coding/text to the index template, here's what's showing in that template...
<html>
<head>
<div class="menu">
<ul>
<li><a href="./menu/index.html">DEMOS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text around images</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click with no borders<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="./menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="drop" href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li>
<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="./boxes/index.html">BOXES<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="spies.html" title="a coded list of spies">a coded list of spies</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging unordered list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="./mozilla/index.html">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">I can build a rainbow with transparent borders</a></li>
<li><a href="../mozilla/snooker.html" title="Snooker cue">a snooker cue using border art</a></li>
<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="./ie/index.html">EXPLORER<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../ie/exampleone.html" title="Example one">the first example for Internet Explorer</a></li>
<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a href="../ie/exampletwo.html" title="Vertical align">vertically aligning text</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="./opacity/index.html">OPACITY<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../opacity/colours.html" title="colour wheel">a colour wheel using opaque colours</a></li>
<li><a href="../opacity/picturemenu.html" title="a menu using opacity">a menu using opacity</a></li>
<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
<li><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="left">
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
</head>
<body>
{$header}
{$forums}
{$boardstats}
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="trow1">
<table width="100%">
<tr>
<td>
<img src="{$theme['imgdir']}/on.gif" alt="{$lang->new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /> <span class="smalltext">{$lang->new_posts}</span><br />
<img src="{$theme['imgdir']}/off.gif" alt="{$lang->no_new_posts}" style="vertical-align: middle; padding-bottom: 4px;" /> <span class="smalltext">{$lang->no_new_posts}</span><br />
<img src="{$theme['imgdir']}/offlock.gif" alt="{$lang->forum_locked}" style="vertical-align: middle;" /> <span class="smalltext">{$lang->forum_locked}</span>
</td>
<td style="vertical-align: top; text-align: right;"><span class="smalltext">{$logoutlink}<a href="misc.php?action=markread">{$lang->markread}</a> | <a href="showteam.php">{$lang->forumteam}</a> | <a href="stats.php">{$lang->forumstats}</a></span>
{$loginform}
</td>
</tr>
</table>
</td>
</tr>
</table>
{$footer}
</body>
</html>
I was wondering if anyone can maybe tell me what I'm doing wrong?
Thanks for the reply.
So I'm now guessing that I'll need to find a drop down menu that does have a java script code.
(2008-06-16, 03:11 PM)flash.tato Wrote: [ -> ]Instead of using external JavaScript code, you could make use of MooTools library present in MyBB: http://dev.visualdrugs.net/mootools/dropdown_menu.html
Regards
Problem with that is that it is not to IE 6 friendly. Unsure about 7 as i havent tested in that yet. In either case the one i posted works in ALL browsers. IE 6, 7, FF, etc.
MooTools is compatible with IE6
I tested under FF and IE7.
Thanks for the replies, guys.
That works fine in IE for me too, but where do I get the MooTools info, since I've never heard of it
(2008-06-16, 08:00 PM)flash.tato Wrote: [ -> ]MooTools is compatible with IE6
I tested under FF and IE7.
Hmmm??? Problem is with the dropdown on the left. The links in it opens to a new list on the right when you hover over it which when i tried to go and click one of those on the right it would close before i could.
Didnt have the issue on FF though. The rest of them work fine.
Allrighty, I've created a menu using the one suggested above from Dynamic Drive. I've added the coding that's needed in the header of the "default" theme, but for some reason the menus aren't showing. Here's what's in the header now with the menu script/text showing, the url paths to the .js files are correct...
<a name="top" id="top"></a>
<div id="container">
<div id="header">
<center><SCRIPT language=JavaScript src="http://http://www.daves-pub.com/forums/index.php/jscripts/newmenu_array.js" type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript src="http://http://www.daves-pub.com/forums/index.php/jscripts/mmenu.js" type=text/javascript></SCRIPT></center>
<div class="borderwrap">
<div id="logostrip"><div style="background-color: #8B4513;color:#ffffff;border:1px solid #ff9900;padding:4px;float:right;margin:50px 100px;text-align:center;"><b>Welcome To Dave's Pub!</b><br />Please Don't Crowd The Bar, Just Get Yourself A Beer,<br />
Some Peanuts, Crisps, Or Pork Scratchings,<br />
And Have A Chat With All Who Is Here</div>
<div class="logo" style="text-align:left;padding-top:5px; padding-left:60px;"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" /></a>
</div>
</div>
<div style-"float:right;" class="menu">
<ul>
<li><a href="{$mybb->settings['bburl']}/portal.php"><img src="{$theme['imgdir']}/toplinks/portal.gif" alt="" />Portal</a></li>
<li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/search.gif" alt="" />{$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/memberlist.gif" alt="" />{$lang->toplinks_memberlist}</a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/calendar.gif" alt="" />{$lang->toplinks_calendar}</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/toplinks/help.gif" alt="" />{$lang->toplinks_help}</a></li>
<li><a href="{$mybb->settings['bburl']}/games.php"><img src="http://www.daves-pub.com/forums/images/daves_pub/toplinks/games.png">{$lang->gamesection}</a></li>
</ul>
</div>
<hr class="hidden" />
<div id="panel">
{$welcomeblock}
</div>
</div>
<hr class="hidden" />
<br class="clear" />
<div id="content">
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
<navigation>
<br class="clear" />
In the link of my signature here, you should see the forum them (default) that the menus should be showing.
Any help would be muchly appreciated.
(2008-07-01, 02:20 AM)lufbra Wrote: [ -> ]Allrighty, I've created a menu using the one suggested above from Dynamic Drive. I've added the coding that's needed in the header of the "default" theme, but for some reason the menus aren't showing. Here's what's in the header now with the menu script/text showing, the url paths to the .js files are correct...
Whoops. Your missing a bit of the code.
Here is mine. A few other changes though because of the theme. CODE ITSELF i have Bolded. Also i changed the colors ( text and background ) on the menus.
Quote:<a name="top" id="top"></a>
<table cellpadding='0' width='96%' align='center' style='border-left: 1px solid #000000; border-right: 1px solid #000000; border-collapse: collapse'><tr><td background="{$theme['imgdir']}/logobg.png" align='left'><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" /></a></td></tr></table>
<div id="container">
<div id="header"><style type="text/css">
#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}
#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}
#dropmenudiv a:hover{ /*hover background color*/
background-color: #E4EAF2;
text-color: black;
}
</style>
<script type="text/javascript">
/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://www.stormvista.com/index.php?case=gold"target="_blank">Stormvista Gold</a>'
menu1[1]='<a href="http://www.stormvista6.com/stormvista_model_page_free.htm"target="_blank">SV Free models</a>'
menu1[2]='<a href="http://www.nco.ncep.noaa.gov/pmb/nwprod/analysis/"target="_blank">NCEP Models</a>'
menu1[3]='<a href=""></a>'
//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://www.spc.noaa.gov/"target="_blank">SPC</a>'
menu2[1]='<a href="http://www.nhc.noaa.gov/"target="_blank">NHC</a>'
menu2[2]='<a href="http://www.uswxforums.com/index.php?option=com_wrapper&view=wrapper&Itemid=61"target="_blank">Local Forecast</a>'
menu2[3]='<a href="http://www.uswxforums.com/bb/usermap.php">Member Map</a>'
var menuwidth='165px' //default menu width
var menubgcolor='#2A79C2' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?
/////No further editting needed
var ie4=document.all
var ns6=document.getElementById&&!document.all
if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}
function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}
function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)
if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}
return clickreturnvalue()
}
function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}
function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}
function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}
function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}
function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}
if (hidemenu_onclick=="yes")
document.onclick=hidemenu
</script>
<table cellpadding='5' width='100%' align='center' style='border-left: 0px solid #000000; border-right: 0px solid #000000; border-collapse: collapse'><tr><td class='underlogo''><a href="{$mybb->settings['bburl']}/search.php">
Feel free to use that if you like. You will have to change the links though.
Link to see it in action.
http://www.uswxforums.com/bb/index.php
Models and Weather are both dropdowns. One using mouse over and the other is click to open.