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 This bar will be able to float at the top or the bottom of the page. You can customize it a little bit using

    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 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