Thursday, December 9, 2010

Facebook-like menu bar

As I was working on my tutorial website,  I was originally going to have a list of the different classes that a programming language has in a column to the left of the main content area(see picture to right). This can be very confusing when there are many different classes. This doesn't look that elegant either. I have always liked the simple Facebook chat bar that is always at the bottom of Facebook no matter what page you are on. I thought this could be good on my website because I could easily have the contents of this bar change with what page you are on and this would keep the global navigation the same.

I found an example that utilizes javascript and css to make the Facebook like navigation bar. It can be found at http://jixedbar.rawswift.com/. This bar will be able to float at the top or the bottom of the page. You can customize it a little bit using


$("#sample-bar").jixedbar({
    showOnTop: true,
    transparent: true,
    opacity: 0.5,
    slideSpeed: "slow",
    roundedCorners: false,
    roundedButtons: false,
    menuFadeSpeed: "slow",
    tooltipFadeSpeed: "fast",
    tooltipFadeOpacity: 0.5
});
The showOnTop= true will allow the menubar to be on the top like at http://gozips.uakron.edu/~kps7. It is originally on the bottom.  I was also able to have the bar be positioned underneath a banner by changing the position in the javascript to relative but this caused the drop down menus to not be positioned correctly.

No comments:

Post a Comment