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

From Wikipedia, the free encyclopedia

Contents 1 CSS required 2 comment 3 How to nest these 4 Opera 5 IE 6 New css 7 Detailed description 8 clickable menu name 9 Enhanced LI menu

[edit] CSS required

#p-cactions li
{
    position: relative;
    float: left;
    text-align: center;
}

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

.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;
}

[edit] comment

This has now been fixed for Firefox 1.5 - Alphax ^τεχ 03:36, 2 February 2006 (UTC)

[edit] How to nest these

Firstly, you'll need this additional CSS:

#p-cactions li li li
{
    /* Do something here */
    width: 8em;
}

.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 ^τεχ 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 ^τεχ 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)

[edit] 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)

[edit] IE

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

[edit] 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 Wikipedia:WikiProject User scripts/Scripts/Add LI menu/css _→AzaToth 18:26, 2 February 2007 (UTC)

[edit] Detailed description

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

 <li class="tabmenu" id="id">
   <a href="#">
     name
   </a>
   <ul>
   </ul>
 </li>

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

[edit] 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)

[edit] 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 <ul> to add <li>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)