Drop down menu in Qbar

[maddocks]

Hi,

would it be possible to add a drop down menu in the qbar to replace the Forums link. I want a drop down menu showing all the forums. I just want the forums link to be part of the menu bar. I tried editing def_qbars.php and i tried to include a drop down menu file to no luck. Any ideas?

Maddocks

[Drop-Forged]

I think the easiest way would be to make a block with the dropdown menu in it..

[sanji]

This would be really a nice stuff to have on the forum... I do not know have to make that work, unfortunately...

sanji

[maddocks]

Hi,

i have now incorporated a full drop down menu. What do you think?

http://www.pchwforum.com

Maddocks

[Teelk]

Looks great maddocks. But, when viewing with firefox the top menu is off the page to the right.

[obiku]

Nice job, how about sharing???

[maddocks]

hi, could someone please post a screenshot of this, thanks

[obiku]

You can make a screenshot yourself, place it on your own site, and then use [ img ] and [ /img ] to point at that image

Look at the explanation of the BBCODE

[thatjoeguy]

I think he means for someone who is having the problem with the top menu going off the screen to post a pic, as he is probably not having that error.

Look here, maddocks - [url=http]Screenshot[/url].

Sorry it's so flippin' big. I'm at work and have limited tools. I'm running at 1280x1024.

[maddocks]

Hi,

is that better in firefox? it worked flawlessly for me with a resolution of 1280x800. Basically i had a div tag with a float of none and a span with a float:none. So i deleted the div and i deleted the float in the span, and hey presto, fully working in ie and mozilla! Thanks for telling me!

BTW, here is my code, the menu is from http://www.brainjar.com and the logo is flash.

Line number On/Off | Expand/Contract | Select all

    <DOCTYPE><mod>= 0) {     this.isOP = true;     this.version = parseFloat(ua.substr(i + s.length));     return;   }     s = "Netscape6/";   if ((i = ua.indexOf(s)) >= 0) {     this.isNS = true;     this.version = parseFloat(ua.substr(i + s.length));     return;   }     // Treat any other "Gecko" browser as Netscape 6.1.     s = "Gecko";   if ((i = ua.indexOf(s)) >= 0) {     this.isNS = true;     this.version = 6.1;     return;   }     s = "MSIE";   if ((i = ua.indexOf(s))) {     this.isIE = true;     this.version = parseFloat(ua.substr(i + s.length));     return;   }}  var browser = new Browser();  //----------------------------------------------------------------------------// Code for handling the menu bar and active button.//----------------------------------------------------------------------------  var activeButton = null;  /* [MODIFIED] This code commented out, not needed for activate/deactivate    on mouseover.  // Capture mouse clicks on the page so any active button can be// deactivated.  if (browser.isIE)   document.onmousedown = pageMousedown;else   document.addEventListener("mousedown", pageMousedown, true);  function pageMousedown(event) {     var el;     // If there is no active button, exit.     if (activeButton == null)     return;     // Find the element that was clicked on.     if (browser.isIE)     el = window.event.srcElement;   else     el = (event.target.tagName ? event.target : event.target.parentNode);     // If the active button was clicked on, exit.     if (el == activeButton)     return;     // If the element is not part of a menu, reset and clear the active   // button.     if (getContainerWith(el, "DIV", "menu") == null) {     resetButton(activeButton);     activeButton = null;   }}  [END MODIFIED] */  function buttonClick(event, menuId) {     var button;     // Get the target button element.     if (browser.isIE)     button = window.event.srcElement;   else     button = event.currentTarget;     // Blur focus from the link to remove that annoying outline.     button.blur();     // Associate the named menu to this button if not already done.   // Additionally, initialize menu display.     if (button.menu == null) {     button.menu = document.getElementById(menuId);     if (button.menu.isInitialized == null)       menuInit(button.menu);   }     // [MODIFIED] Added for activate/deactivate on mouseover.     // Set mouseout event handler for the button, if not already done.     if (button.onmouseout == null)     button.onmouseout = buttonOrMenuMouseout;     // Exit if this button is the currently active one.     if (button == activeButton)     return false;     // [END MODIFIED]     // Reset the currently active button, if any.     if (activeButton != null)     resetButton(activeButton);     // Activate this button, unless it was the currently active one.     if (button != activeButton) {     depressButton(button);     activeButton = button;   }   else     activeButton = null;     return false;}  function buttonMouseover(event, menuId) {     var button;     // [MODIFIED] Added for activate/deactivate on mouseover.     // Activates this button's menu if no other is currently active.     if (activeButton == null) {     buttonClick(event, menuId);     return;   }     // [END MODIFIED]     // Find the target button element.     if (browser.isIE)     button = window.event.srcElement;   else     button = event.currentTarget;     // If any other button menu is active, make this one active instead.     if (activeButton != null && activeButton != button)     buttonClick(event, menuId);}  function depressButton(button) {     var x, y;     // Update the button's style class to make it look like it's   // depressed.     button.className += " menuButtonActive";     // [MODIFIED] Added for activate/deactivate on mouseover.     // Set mouseout event handler for the button, if not already done.     if (button.onmouseout == null)     button.onmouseout = buttonOrMenuMouseout;   if (button.menu.onmouseout == null)     button.menu.onmouseout = buttonOrMenuMouseout;     // [END MODIFIED]     // Position the associated drop down menu under the button and   // show it.     x = getPageOffsetLeft(button);   y = getPageOffsetTop(button) + button.offsetHeight;     // For IE, adjust position.     if (browser.isIE) {     x += button.offsetParent.clientLeft;     y += button.offsetParent.clientTop;   }     button.menu.style.left = x + "px";   button.menu.style.top  = y + "px";   button.menu.style.visibility = "visible";     // For IE; size, position and show the menu's IFRAME as well.     if (button.menu.iframeEl != null)   {     button.menu.iframeEl.style.left = button.menu.style.left;     button.menu.iframeEl.style.top  = button.menu.style.top;     button.menu.iframeEl.style.width  = button.menu.offsetWidth + "px";     button.menu.iframeEl.style.height = button.menu.offsetHeight + "px";     button.menu.iframeEl.style.display = "";   }}  function resetButton(button) {     // Restore the button's style class.     removeClassName(button, "menuButtonActive");     // Hide the button's menu, first closing any sub menus.     if (button.menu != null) {     closeSubMenu(button.menu);     button.menu.style.visibility = "hidden";       // For IE, hide menu's IFRAME as well.       if (button.menu.iframeEl != null)       button.menu.iframeEl.style.display = "none";   }}  //----------------------------------------------------------------------------// Code to handle the menus and sub menus.//----------------------------------------------------------------------------  function menuMouseover(event) {     var menu;     // Find the target menu element.     if (browser.isIE)     menu = getContainerWith(window.event.srcElement, "DIV", "menu");   else     menu = event.currentTarget;     // Close any active sub menu.     if (menu.activeItem != null)     closeSubMenu(menu);}  function menuItemMouseover(event, menuId) {     var item, menu, x, y;     // Find the target item element and its parent menu element.     if (browser.isIE)     item = getContainerWith(window.event.srcElement, "A", "menuItem");   else     item = event.currentTarget;   menu = getContainerWith(item, "DIV", "menu");     // Close any active sub menu and mark this one as active.     if (menu.activeItem != null)     closeSubMenu(menu);   menu.activeItem = item;     // Highlight the item element.     item.className += " menuItemHighlight";     // Initialize the sub menu, if not already done.     if (item.subMenu == null) {     item.subMenu = document.getElementById(menuId);     if (item.subMenu.isInitialized == null)       menuInit(item.subMenu);   }     // [MODIFIED] Added for activate/deactivate on mouseover.     // Set mouseout event handler for the sub menu, if not already done.     if (item.subMenu.onmouseout == null)     item.subMenu.onmouseout = buttonOrMenuMouseout;     // [END MODIFIED]     // Get position for submenu based on the menu item.     x = getPageOffsetLeft(item) + item.offsetWidth;   y = getPageOffsetTop(item);     // Adjust position to fit in view.     var maxX, maxY;     if (browser.isIE) {     maxX = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) +       (document.documentElement.clientWidth != 0 ? document.documentElement.clientWidth : document.body.clientWidth);     maxY = Math.max(document.documentElement.scrollTop, document.body.scrollTop) +       (document.documentElement.clientHeight != 0 ? document.documentElement.clientHeight : document.body.clientHeight);   }   if (browser.isOP) {     maxX = document.documentElement.scrollLeft + window.innerWidth;     maxY = document.documentElement.scrollTop  + window.innerHeight;   }   if (browser.isNS) {     maxX = window.scrollX + window.innerWidth;     maxY = window.scrollY + window.innerHeight;   }   maxX -= item.subMenu.offsetWidth;   maxY -= item.subMenu.offsetHeight;     if (x > maxX)     x = Math.max(0, x - item.offsetWidth - item.subMenu.offsetWidth       + (menu.offsetWidth - item.offsetWidth));   y = Math.max(0, Math.min(y, maxY));     // Position and show the sub menu.     item.subMenu.style.left       = x + "px";   item.subMenu.style.top        = y + "px";   item.subMenu.style.visibility = "visible";     // For IE; size, position and display the menu's IFRAME as well.     if (item.subMenu.iframeEl != null)   {     item.subMenu.iframeEl.style.left    = item.subMenu.style.left;     item.subMenu.iframeEl.style.top     = item.subMenu.style.top;     item.subMenu.iframeEl.style.width   = item.subMenu.offsetWidth + "px";     item.subMenu.iframeEl.style.height  = item.subMenu.offsetHeight + "px";     item.subMenu.iframeEl.style.display = "";   }     // Stop the event from bubbling.     if (browser.isIE)     window.event.cancelBubble = true;   else     event.stopPropagation();}  function closeSubMenu(menu) {     if (menu == null || menu.activeItem == null)     return;     // Recursively close any sub menus.     if (menu.activeItem.subMenu != null) {     closeSubMenu(menu.activeItem.subMenu);     menu.activeItem.subMenu.style.visibility = "hidden";       // For IE, hide the sub menu's IFRAME as well.       if (menu.activeItem.subMenu.iframeEl != null)       menu.activeItem.subMenu.iframeEl.style.display = "none";       menu.activeItem.subMenu = null;   }     // Deactivate the active menu item.     removeClassName(menu.activeItem, "menuItemHighlight");   menu.activeItem = null;}  // [MODIFIED] Added for activate/deactivate on mouseover. Handler for mouseout// event on buttons and menus.  function buttonOrMenuMouseout(event) {     var el;     // If there is no active button, exit.     if (activeButton == null)     return;     // Find the element the mouse is moving to.     if (browser.isIE)     el = window.event.toElement;   else if (event.relatedTarget != null)       el = (event.relatedTarget.tagName ? event.relatedTarget : event.relatedTarget.parentNode);     // If the element is not part of a menu, reset the active button.     if (getContainerWith(el, "DIV", "menu") == null) {     resetButton(activeButton);     activeButton = null;   }}  // [END MODIFIED]  //----------------------------------------------------------------------------// Code to initialize menus.//----------------------------------------------------------------------------  function menuInit(menu) {     var itemList, spanList;   var textEl, arrowEl;   var itemWidth;   var w, dw;   var i, j;     // For IE, replace arrow characters.     if (browser.isIE) {     menu.style.lineHeight = "2.5ex";     spanList = menu.getElementsByTagName("SPAN");     for (i = 0; i <spanList> 0)     itemWidth = itemList[0].offsetWidth;   else     return;     // For items with arrows, add padding to item text to make the   // arrows flush right.     for (i = 0; i < itemList.length; i++) {     spanList = itemList[i].getElementsByTagName("SPAN");     textEl  = null;     arrowEl = null;     for (j = 0; j < spanList.length; j++) {       if (hasClassName(spanList[j], "menuItemText"))         textEl = spanList[j];       if (hasClassName(spanList[j], "menuItemArrow"))         arrowEl = spanList[j];     }     if (textEl != null && arrowEl != null) {       textEl.style.paddingRight = (itemWidth         - (textEl.offsetWidth + arrowEl.offsetWidth)) + "px";       // For Opera, remove the negative right margin to fix a display bug.       if (browser.isOP)         arrowEl.style.marginRight = "0px";     }   }     // Fix IE hover problem by setting an explicit width on first item of   // the menu.     if (browser.isIE) {     w = itemList[0].offsetWidth;     itemList[0].style.width = w + "px";     dw = itemList[0].offsetWidth - w;     w -= dw;     itemList[0].style.width = w + "px";   }     // Fix the IE display problem (SELECT elements and other windowed controls   // overlaying the menu) by adding an IFRAME under the menu.     if (browser.isIE) {     var iframeEl = document.createElement("IFRAME");     iframeEl.frameBorder = 0;     iframeEl.src = "javascript;";     iframeEl.style.display = "none";     iframeEl.style.position = "absolute";     iframeEl.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";     menu.iframeEl = menu.parentNode.insertBefore(iframeEl, menu);   }     // Mark menu as initialized.     menu.isInitialized = true;}  //----------------------------------------------------------------------------// General utility functions.//----------------------------------------------------------------------------  function getContainerWith(node, tagName, className) {     // Starting with the given node, find the nearest containing element   // with the specified tag name and style class.     while (node != null) {     if (node.tagName != null && node.tagName == tagName &&         hasClassName(node, className))       return node;     node = node.parentNode;   }     return node;}  function hasClassName(el, name) {     var i, list;     // Return true if the given element currently has the given class   // name.     list = el.className.split(" ");   for (i = 0; i < list.length; i++)     if (list[i] == name)       return true;     return false;}  function removeClassName(el, name) {     var i, curList, newList;     if (el.className == null)     return;     // Remove the given class name from the element's className property.     newList = new Array();   curList = el.className.split(" ");   for (i = 0; i <curList></script></head><body>  <Menu><span><a><img></a><a><img></a> <a><img></a><a><img></a><a><img></a><a><img></a><a><img></a><a><img><img></a><a><img></a><a></a></span></div>  <Main>  <div><div><a>Home</a></div><div></div><div><a>Computer Tutorials</a></div><div></div><div><a><span>Posting Info</span><span>▶</span></a><div></div><div><a>Your Computer</a></div></div>  </div>  <div>   <div><a>Bios/MSDos/Booting</a><div></div>       <a>Windows XP/Vista</a><div></div>       <a>Windows 95, 98 & ME</a><div></div>            <a>Windows 2000/NT/Server</a>   <div></div>             <a>Other OS's</a>         </div></div>  <div><div><a>PC Upgrading/Building</a></div><div></div><div>    <a><span>PC Hardware</span><span>▶</span></a><div></div>  <div><a>PC News</a>   <div></div>     <a>Hardware Reviews</a></div></div></div>  <div><div><a>Video Creation</a></div><div></div>     <a><span>WebPage Creation</span><span>▶</span></a><div></div><div><div><a>Image Creation</a></div></div><div></div><div><a>Programming</a></div></div>  <div><div>   <div><a>Spyware/Adware</a><div></div>       <a>Antivirus</a><div></div>       <a>Firewalls</a><div></div>            <a>Spam & Email</a>     <div></div>             <a>Security Alerts</a>           </div></div>  <div><div>   <div><a>General Internet</a><div></div>       <a>Wireless Networking</a><div></div>       <a>Hardwired Networking</a>   </div></div>  <div>   <div><a>Site & Forum Problems</a><div></div>       <a>Link Exchange W/ PCHW</a><div></div>       <a>Your Thoughts</a>   </div></div>   <Sub>   </div><div><a>Site Announcements</a>   </div></div><div>   <Sub>   </div><div>   <a>Power Supply</a>   <a>HDD/CD/DVD</a>     <a>Motherboards</a>       <a>Sound Card/Speakers</a>         <a>Graphics Card</a>           <a>Memory Ram</a>             <a>Processors/PSU</a>           <a>Monitors</a>             <a>External Peripherals/Devices</a></div><div>   <Sub>  </div><div>   <div>   <a>Flash</a>     <a>Dreamweaver</a></div></div></div></body><BEGIN><td>{BANNER_16_IMG}</td></tr></table><END><table><BEGIN><td> </td><td> </td><td> </td><td> </td><td> </td></tr><END><BEGIN><tr><td> </td><td> </td><td> </td><td> </td><td> </td></tr><END><BEGIN><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><END>  {PORTAL_HEADER}<td><img></td><td>

Just edit the image to text if you want and the rest is so straight forward, very customizable!

MAddocks

[Teelk]

Workin' good in firefox now. <img>

[maddocks]

Good, is there any other recommendations that you could suggest to help improve the popularity of my site and registrations amount. Thanks

Maddocks

[frohanss]

Have just started with IM.
Can anyone explain how i could make this wounderfull menu?
And reposition buttons to a new header?

Nice Work Maddocks

[maddocks]

Make it?

if you go into tempates>fisubice>overall_header.tpl and replace it with the above code, it will work. Just have a mess around with it. Look at the titles of the menus and do a search replace the names, and the sub menus are self explanatory. Just watch because i changed the layout of my header so some things may not display correctly (Logo). To change the locations of blocks go into ACP > IMPortal > blocks management > The page you want changing< and then have a look in there. To move them up and down press either move up or move down. To activate or deactivate blocks click edit against the block and select yes or no. The location is also under edit.

Header = left menu
center = center
footer = right menu

the right menu may not display because of your forum layout. To change this go to page configuration under IMPortal and select enable system wide portal footer and header. Hope this helps. Please visit my site.

Maddocks

[Mandoo]

This looks like the solution to a big problem for me. I use ADR on my boards and im looking for a way of removing the qbar from the left hand side Do you think i could place the qbar menu items into the top bar as a drop down?

[frohanss]

Thank you Maddocks, i did get it to work now.

Greate work

[maddocks]

Thanks mate,

http://www.pchwforum.com

[Mandoo]

I would love to use this mod but what i need is a drop down system that replace the Q-bar so i can loose the nav pannel at the site. Anyone have any ideas?

[maddocks]

You want a bar like this one, but vertical to replace the board_navigation? If so you will have to look in google because this doesn't work vertically.

[Mandoo]

Nope, I want one that runs horisontaly like yours but rather than being physical links with images i need the Q-bar to operate, That way I can loose the navigation bar and then the entire left hand colum. I find with certain mods i justdont have the screen width. This means alot of side scrolling. Also i think it makes the board a little cluttered when looking at threads.

[maddocks]

So, you want it to look the same without the buttons and so it works dynamically through the qbar settings? that would be kind of difficult. You would have to start including php tags and go know wht else. I think that is a bit unrealistsic, i think the bar know is the way to go. You can replace the images for links.

Maddocks

[Mandoo]

I know what you mean, i came to the same conclusion, i cant use it as i also need only certain links available to certain users. Ive got a couple of ideas on how it could be done but they dont have the required neetness.