This discussion is archived
13 Replies Latest reply: Jan 19, 2013 8:39 PM by Mahmoud_Rabie RSS

Dropdown menus onMouseover of Tab entries?

448932 Newbie
Currently Being Moderated
Hello,

Say I have a tab named "Links", if I hover over it with the mouse is there some function built-in that I can setup that will make a dropdown menu appear under that tab entry of "Links" which can be selected from with a submit/go to URL type action?

If that's not clear, go into APEX/edit mode in your application, click the "down arrow" next to the Shared Components icon, and as you mouseover the options, a submenu pops up that you can chose from to navigate directly to the new page...I'm wanting to set that up for my Apex Tab entries (but dropdown style, not popright style).

This seems like a fairly common navigation tool, but didn't find a link or doc on how to set it up in APEX.

16-APR-2008, tlm: I updated this to clarify the request, which is for TAB entries (initially I had the word NavBar and that wasn't correct, it is for TAB entries).

Message was edited by:
Lee McCann
  • 1. Re: Dropdown menus onMouseover of NavBar Tab entries?
    448932 Newbie
    Currently Being Moderated
    Any tips for this?
  • 2. Re: Dropdown menus onMouseover of NavBar Tab entries?
    357241 Oracle ACE
    Currently Being Moderated
    Hello,

    You should maybe look at using and if need be adjusting the Hierarchal List Templates.
    If you look at my application here http://apex.oracle.com/pls/otn/f?p=11933:5 though the top nav looks like tabs , and can be made to look more so like tabs, it's actually just a list.


    Regards,
    Carl

    blog : http://carlback.blogspot.com/
    apex examples : http://apex.oracle.com/pls/otn/f?p=11933:5
  • 3. Re: Dropdown menus onMouseover of TAB entries?
    448932 Newbie
    Currently Being Moderated
    Thank you for the suggestion Carl, but I believe this should be built-in functionality into the TAB templates & forms shipped with APEX.

    I don't think I'm alone in the belief that this is a fairly standard navigation tool, and to keep the look&feel similar to what end-users are used to seeing should not require us to forgo TABS and try to integrate something else as a replacement.

    I will add this thread to the 3.1 enhancements wishlist.

    16-APR-2008, tlm: I updated this to clarify the functionality I'm wanting is for TAB entries, initially I said NavBar.

    Message was edited by:
    Lee McCann
  • 4. Re: Dropdown menus onMouseover of Tab entries?
    448932 Newbie
    Currently Being Moderated
    Hello Carl, Patrick, other distinguished SMEs,

    After adding this to the 3.1 enhancement request, I received the same suggestion -- try to use a horizontal list template, with the caveat that some stylesheet mods would probaby be required.

    Which is why I created this thread/enhancement request in the first place - my position is that it should be built-in and not require me, a self-proclaimed noob on much of the underlying technologies behind APEX (pl/sql, css, js, etc), to see if I can figure it out, I am looking for standard forms within the APEX designer to guide me.

    Maybe there they are there? Or the level of customization is not too deep for someone with my APEX design experience (low). If so, please show me.

    I setup an example app
    workspace datatel_example
    login guest/datatel
    app UI Example

    (ui example uses the template/theme I currently have in the 'real' app)

    Please change the example "Car" tab to produce a menu onmouseover, while preserving the look and feel of the theme.
  • 5. Re: Dropdown menus onMouseover/onMouseout of Tab entries?
    448932 Newbie
    Currently Being Moderated
    Still working (and looking for assistance) on this; I'm now trying to use the DHTML List(image) with sublist template.

    In that list template, I modified the DOM "onclick" to "onmouseover" (in the ...with sublist items region) and that works, when the user hovers their mouse over the parent menu item, the dropdown menu appears.

    But after much tinkering, I can't get the "onmouseouts" event to fire (I want the menus to disappear when the user moves their mouse out of the sublists).

    Here's what I have in the SubList template NonCurrent with SubList items:
    < li class="dhtmlSubMenuS">< a href="#LINK#" class="dhtmlSubMenuS" onmouseover="dhtml_MenuOpen(this,'#LIST_ITEM_ID#',true,'Left')" 
    onmouseout="dhtml_CloseAllSubMenusL(this)">
    < span style="float:left;">#TEXT#< /span>< img class="t13MIMG" src="#IMAGE_PREFIX#menu_open_right2.gif" />< /a>< /li>
    I added the onmouseout(...) stuff. If you move the mouse out of the sublist, it still remains, but if you actually "click" the mouse somewhere in the page, it disappears (I tried onBlur too, same results).

    I'd like to have it automatically disappear and not require that last click.


    Carl, in your example app, you use onClick for the "parent" menus - do you have an example of how to make this use onmouseover/onmouseout?

    Message was edited by:
    Lee McCann
  • 6. Re: Dropdown menus onMouseover/onMouseout of Tab entries?
    448932 Newbie
    Currently Being Moderated
    @3.1 on apex host, the applicable template is "Pull Down Menu with Image". I have updated my example app to include this mouseover example.

    What I'm looking for
    1) where do I put the mouseout behaviour to make the submenus disappear? I haven't been able to get the syntax right or something cuz that event never fires

    2) how can I get rid of those little yellow arrows that appear in the dropdown list?

    3) assuming #1 and #2 can eventually be accomplished, how do I move this list into the "TAB" region position (I'll do away with normal tabs and replace them with these dropdown menus)
  • 7. Re: Dropdown menus onMouseover/onMouseout of Tab entries?
    552754 Newbie
    Currently Being Moderated
    Does a template exists in 4.0 for this kind of "tab with drop down menu", as is used in the Apex application itself?

    Thanks for any pointers,
    Bert
  • 8. Re: Dropdown menus onMouseover/onMouseout of Tab entries?
    Kubilay Newbie
    Currently Being Moderated
    Does anybody know? It exists in the builder template the Apex 4.0 itself uses? Why is it not available for all? I couldn't find the 'flick' to switch this feature for my app, although I am using the same builder template. I am on Apex 4.0. This would be nice, as sometimes just 5-6 tabs are not enough and we need to create, say 25 tabs?

    Many thanks!

    Kubilay

    Edited by: Kubilay on Feb 3, 2011 1:54 PM
  • 9. Re: Dropdown menus onMouseover/onMouseout of Tab entries?
    GarryLawton Explorer
    Currently Being Moderated
    Hi,
    check this out

    http://apex.oracle.com/pls/apex/f?p=30582 Username: ddm Password: ddm

    and these threads

    Re: Creating a DHTML Drop down
    Re: Drop-down menus

    If you really need "onMouseover/onMouseout" you'll have to find a way how to add it. I don't really have the time to do it.

    Regards Garry
  • 10. Re: Dropdown menus onMouseover/onMouseout of Tab entries?
    GarryLawton Explorer
    Currently Being Moderated
    Hi,
    I copied the app. and did the mouseenter/mouseleave highlighting unobtrusively with dynamic actions. A bit Heath-Robinson maybe but it works.

    http://apex.oracle.com/pls/apex/f?p=30734 Username: ddm Password: ddm

    any comments?

    Regards Garry
  • 11. Re: Dropdown menus onMouseover/onMouseout of Tab entries?
    Kubilay Newbie
    Currently Being Moderated
    Hi Garry

    Thank you for the post, don't want the mouse-over events etc.. The minimum Example will be enough for me. I just have a tab called 'Reports' in my app and instead of doing sidebar navigation I just wanted to list the Reports as a menu in the UI. That's all! Your example is perfect.

    I definitely agree with you with regards that future Apex releases must provide this, a 'Menu' is a basic and very necessary UI design component and not just 'Tabs'

    I *'Vote'* for this. Is there a voting system for this in this Apex Forum? I would like to Vote for this. (A voting system like in Salesforce forums, I mean).

    Just because the product is free, shouldn't be neglected. If Oracle wants to win hearts and minds of SMEs who can't afford Fusion Middleware needs to listen closer to the needs of SME and provide more and renew functionality in such a brilliant product such as Oracle Apex. I love this RAD technology!

    I don't want to lecture anybody, I am sure Oracle has people 1 million times more capable than me in terms of product direction and product roadmaps. But hey, I just felt like telling my idea as a customer.

    Best Regards

    Kubilay Tsil Kara
    Oracle Architect
    Oracle OCP, Salesforce SFDC

    Edited by: Kubilay on Feb 4, 2011 10:24 AM
  • 12. Re: Dropdown menus onMouseover/onMouseout of Tab entries?
    mgralinski Newbie
    Currently Being Moderated
    HI

    I try install this plug-in and i got error

    "ORA-06592: CASE not found while executing CASE statement

    Error installing plug-in."


    My Apex version is 4.02
    Ane idea why ?

    Regards Mario
  • 13. Re: Dropdown menus onMouseover/onMouseout of Tab entries?
    Mahmoud_Rabie Journeyer
    Currently Being Moderated
    The steps can be detailed as follows (I will make it specific to my theme -Application Builder- and you can replace what you want)

    0) a) My Page template name is WithNicolettePlugin.
    b) Put the Nicolette (Thanks alot for him) plugin on #REGION_POSITION_08# in Page Zero (Global page)
    c) the settings of the plugin as follows:
    - Template : WithNicolettePlugin
    - Before HTML :
     <ul class="dhtmlMenuLG2"> 
    - After HTML :
     </ul> 
    - jQuery selector submenu : .dhtmlSubMenu2
    - Tab set : main
    - Include single subtab : yes
    - Class first parent : ui-corner-left
    - Class last parent : ui-corner-right
    - File Prefix : #IMAGE_PREFIX#
    the others are empty     

    1) link the following CSS's into the Header section of the Page Template of (Bluejay-22)
    <link rel="stylesheet" href="/i/css/apex_builder.min.css?v=4.2.0.00.27" type="text/css" />
    <link rel="stylesheet" href="/i/css/apex_ui.min.css?v=4.2.0.00.27" type="text/css" />
    <link rel="stylesheet" href="/i/css/apex_ui_builder_home.css" type="text/css" />
    2) link the following Scripts into the Header section of the Page Template
    <script type="text/javascript">
    var apex_img_dir = "/i/", htmldb_Img_Dir = apex_img_dir;
    </script>
    <script src="/i/libraries/apex/minified/desktop_all.min.js?v=4.2.0.00.27" type="text/javascript"></script>
    <script src="/i/libraries/apex/minified/legacy.min.js?v=4.2.0.00.27" type="text/javascript"></script>
    <style> html {visibility:hidden;} </style>
    <script type="text/javascript">
    apex.security.framebreaker("D");
    </script>
    <script src="/i/libraries/apex/minified/widget.textarea.min.js?v=4.2.0.00.27" type="text/javascript"></script>
    <script src="/i/libraries/apex/minified/builder.min.js?v=4.2.0.00.27" type="text/javascript"></script>
    3) Re-write the Body section to be as the following
    <div id="page-header">
          
      .... LOGO AND WELCOME HERE ......  
     
       <div class="apex-top-bar-end">
           <div class="apex-top-bar">
                <div id="tabs" class="dhtmlMenuLG">
                  #REGION_POSITION_08#   <!-- Put the plugin at your page zero in REGION 8 --> 
                </div>
           </div>
       </div>   
    </div>
     
    <div id="topbar">#REGION_POSITION_01##REGION_POSITION_04#</div>
    <div id="messages">#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#</div>
    <div id="body">
        <table class="tbl-body" cellspacing="0" cellpadding="0" border="0" summary="">
        <tbody>
          <tr>
            <td class="tbl-main" width="100%">#REGION_POSITION_02##BOX_BODY#</td>
            <td class="tbl-sidebar">#REGION_POSITION_03#</td>     
          </tr>
        </tbody>
        </table>
    </div>
    4- Update the section of Standard Tab Attributes to have Current Tab as the following *(PLEASE, REMOVE THE MINUS BEFORE onmouseover)*
    <li class="dhtmlSubMenuN" -onmouseover = "dhtml_CloseAllSubMenusL(this)" >
      <a href="#TAB_LINK#" class="dhtmlSubMenuN"
         title="#TAB_LABEL#">
         "#TAB_LABEL#
      </a>
    </li>
    {code}
    and Non Current Standard Tab as the following
    {code}
    <li class="dhtmlSubMenuN" -onmouseover = "dhtml_CloseAllSubMenusL(this)" >
      <a href="#TAB_LINK#" class="dhtmlSubMenuN"
          title="#TAB_LABEL#"> 
          "#TAB_LABEL#
      </a>
    </li>
    5- Update the section of Parent Tab Attributes to have Current Parent Tab as the following
    <div id="#TAB_ID#" class="current">
        <a href="#TAB_LINK#" title="#TAB_LABEL#" class="link_text">#TAB_LABEL#</a>
        <a href="#" class="link_icon">
          <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12"  
               class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
       </a>
       <ul id="#TAB_NAME#" htmldb:listlevel="1" class="aTabs dhtmlSubMenu pulldown-tabs" style="display:none;">
           #TABS#
           <li class="last" dir="RTL"><span></span></li>
        </ul>
    </div>
    and Non Current Parent Tab as the following
    <div id="#TAB_ID#" class="non-current">
        <a href="#TAB_LINK#" title="#TAB_LABEL#" class="link_text">#TAB_LABEL#</a>
        <a href="#" class="link_icon">
          <img src="/i/apex/builder/down_dark_12x12.gif" width="12" height="12"  
               class="dhtmlMenu" alt="#TAB_LABEL# Drill Down"/>
       </a>
       <ul id="#TAB_NAME#" htmldb:listlevel="1" class="aTabs dhtmlSubMenu pulldown-tabs" style="display:none;">
           #TABS#
           <li class="last" dir="RTL"><span></span></li>
        </ul>
    </div>
    6- You will find a sample here in
    Workspace : ralab
    User : nicolette
    Password : abc123
    Application 33791 - TestDropDownAppBuilderTabs

    If the post completes your solution mark it as correct and the question as answered, otherwise, mark it as helpful.

    Best Regards
    Mahmoud