a little javascript flash message. see demo at: http://jsfiddle.net/dylanjha/kca9p/

gistfile1.html

<div id='nav'>
    <ul class='nav-list'>
        <li class='nav-item'><a href="javascript://">Home</a></li>
        <li class='nav-item'><a href="javascript://">There</a></li>
    </ul>
</div>
<div id='flash-container' class='flash-container'>
</div>
<div id='content'>
    Here is some content.
</div>

script.js

;(function($){ 
    Flash = {}
    Flash.success = function(msg, time){
        time = time || 1000;
        $('#flash-container')[0].innerHTML = "<div class='success message'>" + msg + "</div>";
        $('#flash-container').addClass('showing');
        setTimeout(function(){
          $('#flash-container').removeClass('showing');
        }, time);
    };
})(jQuery)

$(function(){
    Flash.success("Saved");

})

style.css.scss

@mixin transition($transition: all .5s ease){
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -o-transition: $transition;
  -ms-transition: $transition;
  transition: $transition;
}

a {
    color: white;
    text-decoration: none;
}
#nav {
    height: 40px;
    width: 100%;
    background-color: #2c3e50;
}
.nav-list {
    list-style: none;
    color: white;
}
.nav-item {
    float: left;
    padding: 10px 20px;    
}

#content {
    min-height: 500px;
    background-color: #ddd;
}

.flash-container {
    overflow: hidden;
    cursor:pointer;
    width:100%;
    text-align:center;
    position:fixed;
    top:56px;
    left:0;
    height: 0;
    @include transition();
    &.showing {
        height: 50px;
    }
    .message {
        display: inline-block;
        padding: 10px 20px;
        border-radius: 0 0 4px 4px;
        &.success {
            background-color: #58b858;
        }
    }
}

assa

saadsdas