CODEWITHSUNDEEP
jquerycssjquery-animatepanel
Steve Ball
Steve Ball

Reputation: 127

Animated slide-in panels

I am playing around trying to emulate the type of side panels common in Admin Templates found on ThemeForest.

Simply, there is a left menu which, on button click, will toggle between between 200px and 50px. While at 50px hovering over the panel extends it back to 200px.

There are two hidden right panels which get shown or hidden on clicking their relevant buttons. When one is opened, the other automatically gets closed.

This all works fine but there is one snag. As I have done this by using jQuery to switch classes, I had not factored in that you cannot animate these. I have tried things like show/hided, slideToggle etc but this always adds 'disply:block' to the element so it does not appear correctly.

Can anyone advise on what I can do to allow me to get the panels to appear smoothly rather than just appear? Even if it means changing everything I have done so far!

There is a fiddle at http://jsfiddle.net/f67rdxd5/1/ and the full code is below.

Thanks in advance for any help.

Steve

CSS

/* Top Navigation -------------------------------------------*/
 .top-menu {
    height: 36px;
    background-color: #333333;
    font-family: Oswald;
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
}
}
/* Header ---------------------------------------------------*/
 header {
    background-color: #efefef;
}
/* main-content Navbar ----------------------------------------------*/
 .navbar {
    margin-bottom: 0;
}
/* Sidebar */
 aside.fixed {
    position: fixed;
}
.sidebar {
    background: #58595b;
    z-index: 99;
}
.left-sidebar, .menu-closed .left-sidebar.hover {
    width: 200px;
    float: left;
    position: absolute;
    left: 0;
    height: 100%;
    overflow: visible!important;
}
.menu-closed .left-sidebar {
    width: 60px;
}
header {
    z-index: 2;
    min-height: 30px;
    padding: 10px 21px;
    background: #fafafa;
    border-bottom: 1px solid #e0e0e0;
}
#main-content {
    background: #f9f9f9;
    padding-top: 15px;
    height: 100%;
    min-height: 900px;
    padding-left : 200px;
}
.menu-closed #main-content {
    padding-left: 60px;
}
.titlebar {
    height: 20px;
}
.container {
    width: 100%;
}
.chat-sidebar.closed, .settings-sidebar.closed {
    display: none;
}
.chat-sidebar.open, .settings-sidebar.open {
    overflow: hidden;
    position: absolute;
    top: 36px;
    bottom: 0;
    right: 250px;
    width: 250px;
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
    transform: translate(100%, 0);
    border-left: 1px solid #eee;
    box-shadow: 1px 0 1px rgba(0, 0, 0, .1);
    padding: 15px 20px;
}

HTML

<body id="">
    <!-- Outer Wrapper to set layout width -->
    <div id="outerWrapper">
        <!-- Top Navigation Bar -->
        <div class="top-menu">
            <button id="left-toggle" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>

            </button>
            <button id="chat-toggle" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>

            </button>
            <button id="settings-toggle" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>

            </button>
        </div>
        <!-- .topNav -->
        <div id="main-wrapper" class="menu-open">
            <!-- Left Sidebar -->
            <aside class="sidebar left-sidebar">
                 <h4>Left menu</h4>

            </aside>
            <!-- /.left-sidebar -->
            <div id="main-content">
                <!-- Header -->
                <header>
                    <div class="titlebar">PHP/MYSQL SERVER EXAMPLE</div>
                </header>
                <!-- .Header -->
                <!-- Main Panel -->
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="content-panel">
                                <div class="content-panel-header">
                                     <h4>Text Content.</h4>

                                </div>
                                <!-- /.content-panel-header -->
                                <!-- Content Area -->ytuyutyutyuytuyt
                                <!-- End Content Area -->
                            </div>
                            <!-- /.main-content -->
                        </div>
                        <!-- /.col-md-12 -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.container -->
            </div>
            <!-- /#main-content -->
            <!-- Right Sidebar -->
            <aside class="sidebar chat-sidebar closed">
                 <h3>Chat</h3>

            </aside>
            <aside class="sidebar settings-sidebar closed">
                 <h3>Settings</h3>

            </aside>
            <!-- /.right-sidebar -->
        </div>
        <!-- /#main-wrapper -->
        <!-- jQuery and other plugins -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <!-- Sitewide Scripts -->
        <script src="js/global.js"></script>
        <!-- Page Level Scripts -->
</body>

jQuery

/*-----  Open and close the side Menus  ------*/

/*-----  The left menu is controlled by ------*/
/*-----  switching the main-wrapper div ------*/
/*-----  classes between menu-open and  ------*/
/*-----  menu-closed  ------*/
$('#left-toggle').click(function (event) {
    $("#main-wrapper").toggleClass('menu-open menu-closed');
    return false;
})

//If the left menu is closed, open it when hovered over
$('.left-sidebar').hover(

function () {
    $(".left-sidebar").addClass('hover')
},

function () {
    $(".left-sidebar").removeClass('hover')
})



/*-----  The right menus are controlled ------*/
/*-----  by switching the classes       ------*/
/*-----  between open and closed on     ------*/
/*-----  each of the right side menus   ------*/


//If the chat button is clicked, add open to 
//Chat sidebar and closed to all others
$('#chat-toggle').click(function (event) {
    $(".chat-sidebar").toggleClass('open closed');
    $(".settings-sidebar").removeClass('open').addClass('closed');
    return false;
})

//If the settings button is clicked, add open to 
//Settings sidebar and closed to all others  
$('#settings-toggle').click(function (event) {
    $(".settings-sidebar").toggleClass('open closed');
    $(".chat-sidebar").removeClass('open').addClass('closed');
    return false;
})

Upvotes: 1

Views: 1664

Answers (1)

pormus
pormus

Reputation: 118

You could use CSS transition or animation. here is a link that tells you how to do css transition. http://css-tricks.com/almanac/properties/t/transition/

Here is a simple jsfiddle that uses css transition with it working.

http://jsfiddle.net/rgqdxdoe/

$(document).ready(function(){
$('.Side-bar').click(function(){
    if($('.Side-bar').hasClass('close')){
         $('.Side-bar').addClass('open');
          $('.Side-bar').removeClass('close');   
    }else{
        $('.Side-bar').addClass('close');
         $('.Side-bar').removeClass('open');
    }
});
});

.Side-bar{

    background-color: grey;
    height: 500px;
}
.close{
    -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
    transition: width 1s;
    width: 30px;
}
.open{
    -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
    transition: width 1s;
    width: 100px;
}

Upvotes: 1

Related Questions