Samstag, 6. August 2016

CUSTOMIZE SIDE NAVIGATION BAR MENU IN APEX 5.0 With JQUERY and CSS3

HTML CODE

It is feasible to customize the SIDE NAV in APEX. The Magic is the JQUERY UI DIALOG
You can Use this HTML to make a TEST in Your System.

<div id="wrapper" class="sidenav">
<ul id="slide-out" class="side-nav">
    <li><div class="userView">
      <img class="background" src="http://djb-architekten.de/files/office-3.jpg"  height="200" width="300" style="position: relative; top: 0; left: 0;>
      <a id="ddd" href="#!user"><img class="circle" src="https://www.xing.com/image/5_c_a_49e2450a0_17942349_2/alli-pierre-yotti-foto.1024x1024.jpg"  height="60" width="70" style="position: absolute; top: 70px; left: 110px; border-radius: 50%;"></a>
      <a href="#!name"><span class="white-text name" style="position: absolute; top: 150px; left: 20px; border-radius: 50%;"><b>Alli Pierre</b></span></a>
      <a href="#!email"><span class="white-text email" style="position: absolute; top: 175px; left: 20px; border-radius: 50%;"><b>yottiallipierre@gmail.com</b></span></a>
    </div></li>
    <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
    <li><a href="#!">Second Link</a></li>
    <li><div class="divider"></div></li>
    <li><a class="subheader">Subheader</a></li>
    <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
  </ul>
  <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>

  <a id="pierre" href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a><p>
  <div id="pierre"class="a-TreeView-content is-selected is-current--top"><span class="fa fa-home"></span><a href="f?p=&APP_ID.:1">About</a></div><p>
  <div id="pierre" class="a-TreeView-content is-selected is-current--top"><span class="fa fa-home"></span><a href="f?p=&APP_ID.:1">Services</a></div><p>
  <div id="pierre" class="a-TreeView-content is-selected is-current--top"><span class="fa fa-home"></span><a href="f?p=&APP_ID.:1">Clients</a></div><p>
  <div id="pierre" class="a-TreeView-content is-selected is-current--top"><span class="fa fa-home"></span><a href="f?p=&APP_ID.:1">Contact</a></div><p>

  </div>

JQUERRY CODE

That ist the Jquerry  Code 


var h = $(window).height();

$('#wrapper').dialog({
    autoOpen: false,
        height: h,
width: 300,
       position: { my: 'left top', at: 'left top+44' },
        draggable: false,
        //modal: true,
        resizable: false,
       open: function(event, ui) { jQuery('.ui-dialog-titlebar-close').hide(); },
         dialogClass: 'ui-dialog-osx'
        /*buttons: {
        "Close": function() {
            $(this).dialog("close");
        }
            
    }*/
        
            
    
    //closeOnEscape: false,
    //title: 'Basic Dialog'
});
$('.t-Header-controls').click(function() {
    if ($('#wrapper').dialog('isOpen') === true) {
    $('#wrapper').dialog('close');
} else {
    $('#wrapper').dialog('open');
}
    return false;
});



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




$(window).resize(function() {
    $("#wrapper").dialog({
            position: { my: 'left top', at: 'left top+44' }
    });
});

/*$(function() {

$('#wrapper').each(function(k,v){
           var box = $(this).dialog({});
                $(this).parent().find('.ui-dialog-titlebar-close').hide();
         
             $( "#L38148037721238251717" ).mouseover(function() {
                box.dialog( "open" );
                }).mouseout(function() {
                //box.dialog( "close" );
              
            });
      });
});
//$('#wrapper').dialog({ height: 400 });

/*$(window).resize(function() {
    var wWidth = $(window).width();
    var dWidth = wWidth * 0.9;
    var wHeight = $(window).height();
    var dHeight = wHeight * 0.9;
    $("#wrapper").dialog("option", "width", dWidth);
    $("#wrapper").dialog("option", "height", dHeight);
});
*/




 $(window).load(function(){

  $('#dvLoading').fadeOut(3000);

});
$(".ui-dialog-titlebar").hide();



$('.closebtn').click(function() {
    if ($('#wrapper').dialog('isOpen') === true) {
    $('#wrapper').dialog('close');
} else {
    $('#wrapper').dialog('open');
}
    return false;
});



// Initialize collapse button
  $(".button-collapse").sideNav();
  // Initialize collapsible (uncomment the line below if you use the dropdown variation)
  //$('.collapsible').collapsible();

CSS3 CODE



#slide-out{
 margin:0px; 
}


#pierre a{
 font-size:40px; 
}

.white-text.name,.white-text.email{
  color:white;
  font-size:17px;
}
#ddd img{
    border-radius: 50%;
}


The Result at the End is like a Image:
This is a demo

1 Kommentar:

  1. Hi Pierre,

    Good ideas coming from your blog but a small suggestion.

    If your doing a tutorial it could be beneficial to show where you place each piece of code (jQuery, CSS etc.) maybe with screenshots.

    Keep up the good work though !

    AntwortenLöschen