2 Replies Latest reply: Jan 19, 2013 10:33 PM by Mahmoud_Rabie RSS

    Tabs with Drop Down Menu

    792891
      Hello,

      On the APEX workspace pages, the tabs at the top level (Home, Application Builder, SQL Workshop, Team Development, Administration) have an attached drop down menu accessed by clicking an arrow. Is there a way to duplicate this effect with tabs in an APEX application?

      Also, is there a way to use or get more information about the theme and layout used on these APEX workspace pages?

      Thanks.
        • 1. Re: Tabs with Drop Down Menu
          vee
          Check {thread:id=2165356} for an implementation of Drop Down menu's similar to Apex Builder's Tabs.

          To get more information on the theme/layout/styles used within Apex builder
          <li> Either import the Apex Builder application export file(f4000.sql in apex installation folder) to an empty workspace and go through the pages
          <li> Use firebug on Apex Builder page check the style tabs to see which css file has what styling defined for the tab entries.
          • 2. Re: Tabs with Drop Down Menu
            Mahmoud_Rabie
            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