2 Replies Latest reply: Jun 21, 2014 10:47 AM by jrimblas RSS

    Tablet like menu in Apex

    tullio0106

      I want to create a Menu for my apex application similar to the Apex Builder menu or to a standard Windows8/tablet menu.

      Obviously the menu should be created dinamycally and then I need to create/add/remove buttons at runtime.

      Could someone provide suggestions/instructions to realize it.

      I remember in older version was present a tutorial applcation but I didn't find it anymore.

      Tks

      Tullio

        • 1. Re: Tablet like menu in Apex
          Huzaifa_Apex

          You can go to https://apex.oracle.com/i/index.html and can check Packaged Applications.

          • 2. Re: Tablet like menu in Apex
            jrimblas

            You can make this happen with a list.  Each block would be a list element that you can style to look like a square or rectangle with an image and text/caption if you wish.

             

            There are many ways to style this. In one app, I created a custom list template with these elements.

            List Template Current:

            <a class="active" href="#LINK#">
            <img src="#IMAGE#" #IMAGE_ATTR#>
            <br><span>#TEXT#</span>
            </a>
            

             

            List Template Noncurrent

            <a href="#LINK#">
            <img src="#IMAGE#" #IMAGE_ATTR#>
            <br><span>#TEXT#</span>
            </a>
            

             

            They all get placed on a list region that restricts the size so that I get a grid of 3 across (of course you can change it to whatever you want). Element #4 would get pushed to the line below and so on. I gave this region a Static ID of iconMenu.

            Then the (simplified CSS) looks like this:

             

            #iconMenu a {
            text-align: center; display: inline-block;
            border-radius: 3px;
            border: 1px solid #4D4D4D;
            margin: 4px;
            padding: 4px;
            text-decoration: none;
            min-width: 70px;
            }
            

             

            I left out background-color and color which you will want to set to whatever you need.

            Then I added another CSS for hover

            #iconMenu a:hover {

              background-color: someOtherNiceColor;

            }

             

            The List can of course be static or dynamic (based on a SQL).

             

            Thanks

            -Jorge