Popup Bar

Barra emergente en la parte superior

by flashwolver

HTML

<html>
<head>
    <meta "charset=iso-8859-1" />    
    <title>Popup Bar</title>
    
</head>
<body>
<header>
<div id="popup">
    <a href=# class="hide"></a>
    <nav id="header_nav_menu">
         
      <a href="#" class="btn_new_page" title="New Book"></a>            
      <a href="#" class="btn_page" title="New Page"></a>
      
      <div class="dropdown_area">            
             
      <div class="dropdown-content">
        <div class="header">
          <h2>Mega Menu</h2>
        </div> 
        <div class="row">
          <div class="column">
            <h3>Category 1</h3>
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
          <div class="column">
            <h3>Category 2</h3>
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
        </div>
      </div>
    </div>
      
      
    </nav>
    <div id="hide_area">&and;</div>
</div>
<div id="showpop" > 
    <a href="#" class="showpoplink"></a> 
    &or;
</div>
</header>
<article>
    <p><br/>Contenido en la página</p>
    <p>Más cóntenido en la página</p>
</article>

</body>
</html>

CSS

body {
    margin:0;
    padding:0;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

#popup {
    top: 0;
    width: 100%; 
    padding: 20px 0px 0px 0px;
    height: 50px;
    background-image: linear-gradient(bottom, rgb(238,238,238) 14%, rgb(249,249,249) 60%);
    background-image: -o-linear-gradient(bottom, rgb(238,238,238) 14%, rgb(249,249,249) 60%);
    background-image: -moz-linear-gradient(bottom, rgb(238,238,238) 14%, rgb(249,249,249) 60%);
    background-image: -webkit-linear-gradient(bottom, rgb(238,238,238) 14%, rgb(249,249,249) 60%);
    background-image: -ms-linear-gradient(bottom, rgb(238,238,238) 14%, rgb(249,249,249) 60%);
    -moz-box-shadow: 0 0 5px 5px #bfbfbf;
    -webkit-box-shadow: 0 0 5px 5px#bfbfbf;
    box-shadow: 0 0 5px 5px #bfbfbf;    
    display: block;
    /*position: fixed;*/
}

#hide_area{
    width: inherit ;
    background: #666;
    padding: 0px;
    margin: 20px 0px 0px 0px; 
    color:#FFF; 
    font-family:Verdana, Geneva, sans-serif; 
    font-size:10px; 
    font-weight:bold;
    text-align:center;
    /*border:solid;*/
}

a.hide {
    top: 0;
    width: 100%;
    margin-top: 50px;
    padding: 8px 0px 8px 0px;        
    display: block;
    cursor:default;    
    position: fixed;
    /*border:solid;*/
} 

#showpop{
    top: 0;
    width: 100%;
    height: 14px; 
    background: #666;
    padding: 0px;
    margin: 0px 0px 0px 0px; 
    -moz-box-shadow: 0 0 5px 5px #bfbfbf;
    -webkit-box-shadow: 0 0 5px 5px#bfbfbf;
    box-shadow: 0 0 5px 5px #bfbfbf;        
    color:#FFF;     
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 10px; 
    font-weight: bold;
    text-align: center;
    position: fixed;
    /*border:solid;*/
}

a.showpoplink {
    top: 0;
    width: 100%;
    margin-top: 0px;
    padding: 5px 0px 5px 0px;        
    display: block;
    cursor:default;    
    position: fixed;    
    /*border:solid;*/
} 


#header_nav_menu{
    margin: 0px 10px;    
}

#header_nav_menu a...

JavaScript

$(document).ready(function(){    
        $('#popup').show("bounce", { times:3 }, 350);
        $('#showpop').hide();
        $('.hide').click(function(){
            $('#popup').slideUp();
            $('#showpop').fadeIn('slow');
            return false;
        });
        
        $('a.showpoplink').click(function(){
            $('#popup').show("bounce", { times:3 }, 350);
            $('#showpop').hide();
            return false;
        });
    });