Wikipedia talk:WikiProject User scripts/Scripts/Add LI menu

CSS required
{   position: relative; float: left; text-align: center; }
 * 1) p-cactions li

{   float: none; display: block; border: 1px solid #aaaaaa; border-top: none; text-align: center; padding: 0px; margin: 0px; }
 * 1) p-cactions li li

.tabmenu ul { display: none; z-index: 2; position: relative; top: -2px; border-top: 1px solid #aaaaaa; padding: 0px; margin: 0px; }

.tabmenu:hover ul { display: block; }

.tabmenu a { padding: 0pt 0.8em !important; }

.tabmenu ul a:hover {   font-weight: bold; }

comment
This has now been fixed for Firefox 1.5 - Alph a x &tau;&epsilon;&chi; 03:36, 2 February 2006 (UTC)

How to nest these
Firstly, you'll need this additional CSS: {   /* Do something here */ width: 8em; }
 * 1) p-cactions li li li

.tabmenu .tabmenu ul { display: none; position: absolute; top: -1px; left: 100%; }

.tabmenu .tabmenu:hover ul { display: block; }

.tabmenu .tabmenu a { padding: 0pt 0.8em !important; }

.tabmenu .tabmenu ul a:hover {   font-weight: normal; }

I haven't quite ironed out all the prettification yet, but the basic functionality is there (in Firefox 1.5 anyway). Then, do something like:

var talkm = addlimenu(tabs, 'talk messages', 'talkm'); var testx = addlimenu(talkm, 'test templates', 'testx');

You'll now have a submenu which you can put test-templates in. Alphax &tau;&epsilon;&chi; 12:07, 3 March 2006 (UTC)


 * Oddly, this works as expected in Mozilla 1.7, so I'm not entirely sure what's going on here... Alphax &tau;&epsilon;&chi; 01:04, 6 March 2006 (UTC)


 * Now fixed for Firefox 1.5 with the CSS changes I've just made (see history). [ælfəks] 10:14, 14 October 2006 (UTC)

Opera
This doesn't work in Opera. Anyone want to try and fix it so it does? --Scott Grayban 14:43, 12 April 2006 (UTC)

IE
This doesn't work properly in IE either including IE7 (monobook.css part) --Jutiphan 09:00, 9 December 2006 (UTC)

New css
I have made a new type of css, that mightr work better (or worse if you don't handle it), it's located at WikiProject User scripts/Scripts/Add LI menu/css → Aza Toth 18:26, 2 February 2007 (UTC)

Detailed description
The method addlimenu(tabs, name, id) adds the follow to the DOM element provided "tabs":

&lt;li class="tabmenu" id="id"> &lt;a href="#"> name &lt;/a> &lt;ul> &lt;/ul> &lt;/li>

and returns a reference to the UL. John Vandenberg 01:45, 13 June 2007 (UTC)

clickable menu name
In order to put an action on the menu name, I am currently using:

var ul = addlimenu(tabs, 'delsort', 'delsort'); ul.previousSibling.href = 'javascript:doSomething';

Does anyone object to me adding an action param to streamline this? John Vandenberg 01:45, 13 June 2007 (UTC)

Enhanced LI menu
Would it be possible to replace the script with the following maintaining backwards compatibility? function addlimenu(tabs, name, id, href, position) { var na, mn; var li;

if (!id) { id = name; }   if (!href) { href = '#'; }   (na = document.createElement("a")).appendChild(document.createTextNode(name)); na.href = href; mn = document.createElement("ul"); (li = document.createElement("li")).appendChild(na); li.appendChild(mn); if(id) li.id = id; li.className = 'tabmenu';

if (position) { tabs.insertBefore(li, position); } else { tabs.appendChild(li); }

return mn; // useful because it gives us the  to add s to }

This would allow control over where the menu is added and enable a href to be supplied with the call. → AA (talk) — 11:20, 28 September 2007 (UTC)
 * I've been bold and made the above change. If there are any issues, feel free to revert. Thanks. → AA (talk) — 11:46, 2 November 2007 (UTC)