#15 New Menu Style: Horizontal Tabbed Menu

open
nobody
5
2004-06-10
2004-06-10
N Welch
No

Just a thought for a new type of menu for PHPLM: A
Horizontal "tab-style" menu, where the main menu items
are the top tabs, with the optional drop downs similar
to the current menu.

Ideally, the menu would remember the state of the last
tab clicked (or the "default" tab when the menu is
first loaded). Other tabs would appear in a different
color and layered as such so they appear somewhat
behind the currently open tab. Optionally, the submenu
items would not be accessible unless the parent tab was
open. First-level submenu items could perhaps appear
horizontally beneath the tabs (in a bar color similar
to the active tab to appear contiguous) with second
level submenus (if any) indicated by a down arrow and
flying down/out as the current horiz menu....

Something like:
http://www.w3.org/Style/Examples/007/target.html
But maybe with rounded corners that degrade nicely for
others browsers.

Discussion

  • Marco Pratesi
    Marco Pratesi
    2004-06-11

    Logged In: YES
    user_id=65709

    > http://www.w3.org/Style/Examples/007/target.html

    This page does not work with Konqueror 3.2 and Opera 7.51
    (and hence I suppose that it does not work with older versions
    of Konqueror and Opera), hence it is not so much interesting.

    > Just a thought

    OK :-)

    Marco Pratesi

     
  • N Welch
    N Welch
    2004-06-11

    Logged In: YES
    user_id=595015

    :? Marco -- the link was provided for illustrative purposes,
    not as a basis for source code. A tabbed menu could of
    course be constructed that is cross-browser compatible, and
    since it is a very popular menu technique I thought it would
    make a nice addition to your package...

    If you cannot see the example provided in your browser a
    search for "tabbed menu" will pull up a few thousands more...

     
  • Marco Pratesi
    Marco Pratesi
    2004-06-11

    Logged In: YES
    user_id=65709

    The example works perfectly on my browser :-)
    but it does not work on all the other supported browsers:
    it does not work on Konqueror and Opera and, AFAIK,
    it does not work on msie6.

    Then:

    - if the requested feature is related to the
    target pseudo class trick, I am not inclined to add it
    to phplm, because, even though it conforms to standards,
    it works only on Mozilla;

    - if the requested feature is related to the tab-like-look,
    no new feature is needed, this can be obtained with
    a simple change to one of the templates
    (if you want, I can post the change on this forum);
    however, it has to be noted that the rounded tabs in
    http://daniel.glazman.free.fr/weblog/targetExample.html
    are obtained through -moz-border-radius , that seems
    something Mozilla-only-specific and that does not pass
    CSS validation

    Ideas? :-)

    Marco Pratesi

     
  • N Welch
    N Welch
    2004-06-11

    Logged In: YES
    user_id=595015

    Hi - the feature suggestion was more for the tabbed like
    look... I figured the *top* level menuitems could be easily
    be made to look like tabs through the style sheet, but
    wasn't sure if the rest could be accomplished; w.r.t:
    remembering the *state* of the currently selected tab -
    based on root/subsection selected, and having it appear to
    be the "selected" tab; having the second level appear
    horizontal for that menu item in a bar across the bottom of
    the tabs, with 3/4/5 etc.., level submenus appearing as
    normal drop-down/flyouts...

    If you have ideas on how that all could be integrated into
    the existing system with only a template change, I'm sure
    many PHPLM users would be interested to know!

     
  • Marco Pratesi
    Marco Pratesi
    2004-06-11

    Logged In: YES
    user_id=65709

    > the feature suggestion was more for the tabbed like
    > look... I figured the *top* level menuitems could be easily
    > be made to look like tabs through the style sheet

    This is very simple, I can post an example when I'll be back
    at home.

    > remembering the *state* of the currently selected tab -
    > based on root/subsection selected, and having it appear to
    > be the "selected" tab

    This resembles feature request 946429:
    https://sourceforge.net/tracker/index.php?func=detail&aid=946429&group_id=33447&atid=408330
    request 946429 is for the treemenu, whereas you are considering
    the horizontal menu.

    > having the second level appear
    > horizontal for that menu item in a bar across the bottom of
    > the tabs, with 3/4/5 etc.., level submenus appearing as
    > normal drop-down/flyouts...

    Rather complicated, it is much more simple to have
    a different horizontal menu for each page and to select
    the page clicking on tabs (BTW, this would work also
    on other browsers, not only on Mozilla).

    Marco Pratesi

     
  • Marco Pratesi
    Marco Pratesi
    2004-06-11

    Logged In: YES
    user_id=65709

    > > the feature suggestion was more for the tabbed like
    > > look... I figured the *top* level menuitems could be easily
    > > be made to look like tabs through the style sheet
    >
    > This is very simple, I can post an example when I'll be back
    > at home.

    As an example, in version 3.1.1, change
    templates/layersmenu-horizontal_menu-full.ihtml adding

    style="border-top: none; -moz-border-radius: 0px 0px 8px 8px;"

    in the tag containing

    class="horbaritem"

    and then change layersmenu-gtk2.css the following way:

    .horbar {
    color: black;
    /* background-color: #dcdad5;
    border: 2px outset #cecac1; */
    }

    .horbaritem {
    float: left;
    white-space: nowrap;
    font-family: luxi sans, verdana, geneva, arial,
    helvetica, sans-serif;
    background-color: #dcdad5;
    border: 2px outset #cecac1;
    font-size: 14px;
    }

    then load the demo page, i.e. index.php

    Alas, such "tabs" are shown as rounded only on Mozilla.

    Marco Pratesi