Dropdown when hovering, collapse when leaving

[BRotondi]

Hello

I like how it works in WordPress: When you hover a tab, the pulldown appears, when you leave, it disappears. (Example > hover "Angebot")

In vB you have to click for both. How can I change this?

Thanks!
Bruno

[RobbieZ]

That's because it is using Javascript, Vbulletin is using 'Onclick'

[BRotondi]

Yes, I saw this. But how can I change it?

[RobbieZ]

You would have to change the way your vBulletin menu navbar etc is controlled by writing javascript.

This would probably incorporate an IFRAME shim feature.

You would then need to control the size of the window element, offset and allow its function to workout the position of your menu.

It is no easy task! Unless of course you are .js proficient which I am sadly not.

It would be simpler to remove the navbar/navtabs in your navbar template and create your own version and utilize the same kind of html I wrote in an article for Da-Vinci utilizing dynamic drives code.

[BRotondi]

There should be an easier way: vB allready writes the necessary position etc. in the element an then waits for the click to enable the hover-visibility for each pulldown.

What's needed:
- Enable this from beginning
- Set everything to invisible when nothing is hovered (right now the last pulldown will remain active)

... any idea? Thanks!

--------------- Added 30 Apr 2011 at 14:40 ---------------

As much as I understand now, the CSS :hover > ul {display:block} would work fine, if JavaScript wouln't overwrite this with style="display: none" / style="display: block" in the <ul>'s

... where to disable?

[8thos]

Wow that's pretty cool. Lemme know if you get it to work.

[BRotondi]

Yes it would... hope someone helps us...

[BRotondi]

O.K. it works now: www.Hilfe2.ch > Hover over "Projekte"

What you need:
- popupmenu1 prevents java-script to add the pulldown-code
- popupbody1 is only visible during hover

This way you can hover for the pulldown and also click for a direct link.

additional.css

/* Pulldown-Menutabs */
li.popupmenu1:hover ul li {
display: block;
}
.popupbody1 li {
float: none;
display: none;
text-align: left;
z-index:99;
}
.popupmenu1 {
position: relative;
}
ul.popupbody1 li:first-child {
text-indent: 0px;
}
.navtabs li.popupmenu1 a.navtab, .popupbody1 li {
    font-weight: normal;
}
.navtabs ul.popupbody1 {
    width: auto;
}

plug-in on hook parse_templates
(use your own code)

$template_hook['navtab_middle'] .= '
<li class="popupmenu1" >
    <a href="threads/457" class="popupctrl navtab" title="Projekte, Ideen, Recherchen.">Projekte</a>
</li>

<li class="popupmenu1" >
    <a href="threads/28" class="popupctrl navtab" title="Artikel und Diskussionen, moderiertes Forum.">Artikel</a>
</li>

<li class="popupmenu1" >
    <a href="threads/756" class="popupctrl navtab">Hosting</a>
    <ul class="popupbody1">
        <li><a href="threads/697" title="Leimbach Kreis 2 - Unser gemeinsames Quartierportal - Mach mit!">Leimbach2</a></li>
    </ul>
</li>';

Change vbulletin-chrome.css (add the red code)

.navtabs li a.navtab, .popupbody1 li {

Perhaps my addon works: (TMS necessary!)