Facebook Style Footer Admin Panel Part 2

Facebook Style Footer Admin Panel Part 2

Tags: Intermediate, Widgets
This is Part 2 of the Facebook Style Footer Admin Panel, if you haven’t checked out Part 1 this is the perfect time to check it out.

Step 2. Styling the Chat Panel & Alert Panel – HTML & CSS

Just like developing a drop-down menu, have a nested sub-panel within the list item. Look at the image below to get an overview of how this is layed out.

HTML

<li id="alertpanel">
    <a href="#" class="alerts">Alerts</a>
    <div class="subpanel">
        <h3><span> &ndash; </span>Notifications</h3>
        <ul>
            <li class="view"><a href="#">View All</a></li>
            <li>
                <a href="#" class="delete">X</a>
                <p><!--Content--></p>
            </li>
            <li>
                <a href="#" class="delete">X</a>
                <p><!--Content--></p>
            </li>
        </ul>
    </div>
</li>
<li id="chatpanel">
    <a href="#" class="chat">Friends (<strong>18</strong>) </a>
    <div class="subpanel">
        <h3><span> &ndash; </span>Friends Online</h3>
        <ul>
            <li><span>Family Members</span></li>
            <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>
            <li><a href="#"><img src="chat-thumb.gif" alt="" /> Your Friend</a></li>
        </ul>
    </div>
</li>

CSS
Since we declared a list item link style already (with the text replament technique), override the properties so we can use regular links in the sub-panels.

#footpanel ul li div a { /*--Reset link style for sub-panel links--*/
 text-indent: 0;
 width: auto;
 height: auto;
 padding: 0;
 float: none;
 color: #00629a;
 position: static;
}
#footpanel ul li div a:hover { text-decoration: underline; } /*--Reset hover style for sub-panel links--*/

Style the sub-panel container with an absolute positioning that will sit at the top of the main footer panel (27px from the bottom of the footer panel). Then create the headings using an <h3>.

#footpanel .subpanel {
 position: absolute;
 left: 0; bottom: 27px;
 display: none; /*--Hide by default--*/
 width: 198px;
 border: 1px solid #555;
 background: #fff;
 overflow: hidden;
}
#footpanel h3 {
 background: #526ea6;
 padding: 5px 10px;
 color: #fff;
 font-size: 1.1em;
 cursor: pointer;
}
#footpanel h3 span { /*--Right aligned "-" icon--*/
 font-size: 1.5em;
 float: right;
 line-height: 0.6em;
 font-weight: normal;
}

The following section is the area that will be scrollable. Use an overflow: auto; to allow the scroll to appear when the content exceeeds the <ul> height.

#footpanel .subpanel ul{
 padding: 0; margin: 0;
 background: #fff;
 width: 100%;
 overflow: auto;
 padding-bottom: 2px;
}
#footpanel .subpanel li{
 float: none; /*--Reset float--*/
 display: block;
 padding: 0; margin: 0;
 overflow: hidden;
 clear: both;
 background: #fff;
 position: static;  /*--Reset relative positioning--*/
 font-size: 0.9em;
}

Chat Panel

#chatpanel .subpanel li { background: url(dash.gif) repeat-x left center; }
#chatpanel .subpanel li span {
 padding: 5px;
 background: #fff;
 color: #777;
 float: left;
}
#chatpanel .subpanel li a img {
 float: left;
 margin: 0 5px;
}
#chatpanel .subpanel li a{
 padding: 3px 0; margin: 0;
 line-height: 22px;
 height: 22px;
 background: #fff;
 display: block;
}
#chatpanel .subpanel li a:hover {
 background: #3b5998;
 color: #fff;
 text-decoration: none;
}

Alert Panel

#alertpanel .subpanel { right: 0; left: auto; /*--Reset left positioning and make it right positioned--*/ }
#alertpanel .subpanel li {
 border-top: 1px solid #f0f0f0;
 display: block;
}
#alertpanel .subpanel li p {padding: 5px 10px;}
#alertpanel .subpanel li a.delete{
 background: url(delete_x.gif) no-repeat;
 float: right;
 width: 13px; height: 14px;
 margin: 5px;
 text-indent: -9999px;
 visibility: hidden; /*--Hides by default but still takes up space (not completely gone like display:none;)--*/
}
#alertpanel .subpanel li a.delete:hover { background-position: left bottom; }
#footpanel #alertpanel li.view {
 text-align: right;
 padding: 5px 10px 5px 0;
}

Step 3. Activating the Subpanel – jQuery

Adjust the Subpanel Height
The tricky part about the collapsible sub-panel is to make sure the content does not stretch beyond the height of the viewport when active.

To make sure the height does not exceed past the viewport, use the following function to calculate and resize the sub-panel according to the viewport size.

The following script contains comments explaining which jQuery actions are being performed.

jQuery

//Adjust panel height
$.fn.adjustPanel = function(){
    $(this).find("ul, .subpanel").css({ 'height' : 'auto'}); //Reset sub-panel and ul height

    var windowHeight = $(window).height(); //Get the height of the browser viewport
    var panelsub = $(this).find(".subpanel").height(); //Get the height of sub-panel
    var panelAdjust = windowHeight - 100; //Viewport height - 100px (Sets max height of sub-panel)
    var ulAdjust =  panelAdjust - 25; //Calculate ul size after adjusting sub-panel

    if ( panelsub > panelAdjust ) {  //If sub-panel is taller than max height...
        $(this).find(".subpanel").css({ 'height' : panelAdjust }); //Adjust sub-panel to max height
        $(this).find("ul").css({ 'height' : panelAdjust}); ////Adjust subpanel ul to new size
    }
    else if { //If sub-panel is smaller than max height...
        $(this).find("ul").css({ 'height' : 'auto'}); //Set sub-panel ul to auto (default size)
    }
};

//Execute function on load
$("#chatpanel").adjustPanel(); //Run the adjustPanel function on #chatpanel
$("#alertpanel").adjustPanel(); //Run the adjustPanel function on #alertpanel

//Each time the viewport is adjusted/resized, execute the function
$(window).resize(function () {
    $("#chatpanel").adjustPanel();
    $("#alertpanel").adjustPanel();
});

Add the Toggle Function

Since both of the chat and alert panels are collapsible, we must treat this like the logic of an accordion (when one opens, the other closes). We also need to allow the panels to collapse when clicking out of the sub-panels.
The following script contains comments explaining which jQuery actions are being performed.

//Click event on Chat Panel and Alert Panel 
$("#chatpanel a:first, #alertpanel a:first").click(function() { //If clicked on the first link of #chatpanel and #alertpanel...
    if($(this).next(".subpanel").is(':visible')){ //If subpanel is already active...
        $(this).next(".subpanel").hide(); //Hide active subpanel
        $("#footpanel li a").removeClass('active'); //Remove active class on the subpanel trigger
    }
    else { //if subpanel is not active...
        $(".subpanel").hide(); //Hide all subpanels
        $(this).next(".subpanel").toggle(); //Toggle the subpanel to make active
        $("#footpanel li a").removeClass('active'); //Remove active class on all subpanel trigger
        $(this).toggleClass('active'); //Toggle the active class on the subpanel trigger
    }
    return false; //Prevent browser jump to link anchor
});

//Click event outside of subpanel
$(document).click(function() { //Click anywhere and...
    $(".subpanel").hide(); //hide subpanel
    $("#footpanel li a").removeClass('active'); //remove active class on subpanel trigger
});
$('.subpanel ul').click(function(e) {
    e.stopPropagation(); //Prevents the subpanel ul from closing on click
});

//Show/Hide delete icons on Alert Panel
$("#alertpanel li").hover(function() {
    $(this).find("a.delete").css({'visibility': 'visible'}); //Show delete icon on hover
},function() {
    $(this).find("a.delete").css({'visibility': 'hidden'}); //Hide delete icon on hover out
});

Final Demo

Conclusion

The footer panel can be useful for admin driven applications and much more. There are many useful techniques that we covered today like the fixed footer, CSS tooltips, height calculation function, and multiple toggle function, that can be used in various ways for your future projects.
If you have any questions, concerns, or suggestions, please do not hesitate to let me know!