Dienstag, 11. April 2017

Nice and Reponsive Navigation Bar With List / Report Content Part 1

There is a lot of information out there about various interface design techniques and patterns you can use when crafting your user interfaces and websites, solutions to common problems and general usability recommendations. What are the characteristics of an effective user interface?

What are the characteristics of an effective user interface?
  1.  Clear
  2.  Responsive
  3.  Attractive  and more

 In this Kapitel we will show Step by Step how to make a Very Professional Application with APEX.         

  Designer Navigation Bar With List or Report Content

Do you want to have a Side Navigation bar to display a Content of a Classic/IR Report/List? And to Disign it to display it like a Navigation bar Submenu? Yes it is possible. 

Let's Start

1- First create a Region in Global Page(Page 0).
Choose for this Region the Position "Inline Dialogs" and Template "Inline Dialog" and add this
Region a Static ID. For Example ADE

2- Add your Report oder List to this Region
I have used for my Example a List

3- Add a Dynamische Action to open and Close your Inline Dialog
-To open a Inline Dialog to use 
openModal("ADE");
-To Close a Inline Dialog to use
closeModal("ADE");

4- Add this Custom Css in the Global Page to make your Inline Dialog
Reponsive for Small Device, Laptop et Desktop. With This Css Look
Your Inline Dialog like A Submenu for The Navigation Bar
body .ui-widget.ui-dialog {
  right:120px !important;
  left:initial !important;
  float:right !important;
  top:115px !important;
  width:450px !important;
  height:380px !important;
  border-radius:.4rem !important;
  box-shadow:rgba(0,0,0,.1) 0 0.4rem 1.6rem !important;
}

.ui-dialog.ui-dialog--inline .ui-dialog-titlebar {
  -webkit-flex-shrink:0;
  -ms-flex-negative:0;
  flex-shrink:0;
  display:none !important;
}

#INZ {
  background:rgb(5,114,206);
  width:267px;
  right:80px;
  margin-top:50px;
  font-size:1.5rem;
  height:5rem;
}

#ADE .fa-shopping-cart { font-size:1.5rem; }

body .ui-widget-content a {
  color:rgb(5,114,206);
  font-weight:bold;
}

.t-LinksList-item {
  display:block;
  position:relative;
  margin-bottom:-1px;
  border-top:0;
  border-bottom:0;
}

.t-LinksList-link:focus { box-shadow:none !important; }

@media only screen and (max-width:1000px) {
  body .ui-widget.ui-dialog {
    right:30px !important;
    left:initial !important;
    float:right !important;
    top:49.4px !important;
    width:450px !important;
    height:380px !important;
    border-radius:.4rem !important;
    box-shadow:rgba(0,0,0,.1) 0 0.4rem 1.6rem !important;
  }
}


4- Add this Javascript Code to Close the Menu when Clicking outside

$('html')
    .bind(
        'click',
        function(e) {
            if (
                $('#ADE').dialog('isOpen') && !$(e.target).is('.ui-dialog, a') && !$(e.target).closest('.ui-dialog').length
            ) {
                $('#ADE').dialog('close');
            }
        }
    );


5-Demo






           

Keine Kommentare:

Kommentar veröffentlichen