Информационная панель, которая падает после периода времени

Question

Как получить штрих-снизу вниз от верхней части окна браузера через некоторое время, когда пользователь просматривал страницу? Скажите 5 секунд. Затем этот бар будет выталкивать все содержимое страницы вниз, пока панель не появится. Бар будет использоваться для отображения одной строки текста, информирующей пользователя о чем-то. И, может быть, маленький маленький X на правой стороне бара, чтобы закрыть его.

В настоящее время это CSS:

#infobar { 
    border-bottom: 5px solid; 
    height: 25px; 
    position: fixed; 
    width: 100%; 
    border-bottom-color: #F00; 
    background-color: #9C9; 
    margin-top:-16px; 
} 
#infobar .text { 
    color: #FFFFFF; 
    float: left; 
    font-family: arial; 
    font-size: 12px; 
    padding: 5px 0; 
    position: relative; 
    text-align: center; 
    width: 100%; 
} 
#infobar .text a { 
    color: #FAFAFA; 
} 
#infobar .text a:hover { 
    color: #FFE2A0; 
} 

</style> 

И HTML:

<div id="infobar"> 
<div class="text"> 
....this is the bar text.... 
</div> 
</div> 

Answer 1

Используя только HTML/CSS не представляется возможным, так как она нуждается в анимации и контроль времени, вы будете нуждаться в дополнительные технологии, такие как Javascript/JQuery или Flash.

EDIT 1

Я думаю, что следующий код будет делать то, что вы хотите. не

CSS

<style type="text/css"> 

#infobar { 
    display:none; 
    border-bottom: 5px solid; 
    height: 25px; 
    position: fixed; 
    width: 100%; 
    border-bottom-color: #F00; 
    background: #9C9; 
    margin-top:-16px; 
} 
#infobar .text { 
    color: #FFFFFF; 
    float: left; 
    font:12px arial; 
    padding: 5px 0; 
    position: relative; 
    text-align: center; 
    width: 100%; 
} 
#infobar .text a { 
    color: #FAFAFA; 
} 
#infobar .text a:hover { 
    color: #FFE2A0; 
} 

#close { 
    color: red; 
    float:right; 
} 

</style> 

Javascript/JQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 

    $(window).load(function() { 

     setTimeout(function() { 

      $("#infobar").slideToggle("fast"); 

     }, 5000); 


     $("#close").click(function() { 

      $("#infobar").slideToggle("fast"); 
      return false; 

     }); 


    }); 

</script> 

HTML

<div id="infobar"> 
    <div class="text"> 
     ....this is the bar text.... 
     <a href="#" id="close">close</a> 
    </div> 
</div> 

Answer 2

Очень проект образца (не JQuery):

Изменения в CSS

body { 
    margin:0; padding: 10px 
} 
#infobar { 
    border-bottom: 5px solid; 
    height: 25px; 
    position: fixed; 
    width: 100%; 
    border-bottom-color: #F00; 
    background-color: #9C9; 
    top: -30px; 
    left: 0; 
} 

Minimal JavaScript

var topMargin = 0; 

function letsgo() 
{ 
    setTimeout("showinfo()", 5000); 
} 

function showinfo() 
{ 
    document.body.style.marginTop = (topMargin++) + 'px'; 
    document.getElementById('infobar').style.top = (topMargin - 30) + 'px'; 
    if (topMargin < 30) setTimeout("showinfo()", 10); 
} 

function hideinfo() 
{ 
    document.body.style.marginTop = (--topMargin) + 'px'; 
    document.getElementById('infobar').style.top = (topMargin - 30) + 'px'; 
    if (topMargin > 0) setTimeout("hideinfo()", 10); 
} 

window.onload = letsgo; 

и, наконец, некоторые HTML

<div id="infobar" onclick="hideinfo()">infobar content</div>