Key bindings

console dropdown example

by secretgspot

HTML

<aside id="console">
    <nav>
        <ul>
            <li><a id="console_clear" href="#">Clear</a></li>
        </ul>
    </nav>
    <textarea id="console_input">This can be a console menu, type here...</textarea>
</aside>

<div id="content">
    <article>
        <h2>Lorem Ipsum</h2>
        <p> <b>Press ESC to open console menu</b>
            Amet ultricies a ut? Proin! Ut arcu mattis nunc ut, sit? Massa, scelerisque cursus mattis facilisis phasellus placerat. In risus egestas nec penatibus non placerat, vut, mauris? Et, amet diam. Phasellus natoque nunc, enim augue, egestas, odio ut, lacus sed augue, odio quis dis turpis. Massa, magna! Aliquet diam! Porta, in et tortor lectus? Et dignissim amet lundium. Velit mauris proin velit pid hac placerat rhoncus? Proin porta? Scelerisque facilisis? Magna in cras magna pellentesque augue augue nisi pulvinar, eu, ac elementum dolor pulvinar. Velit et purus pellentesque montes mus? Vut mus diam! Nisi tincidunt? Velit! Et sagittis, porta facilisis eu ac nisi ut, pid? Porttitor urna. Mid? Platea sed, dignissim pellentesque, elit scelerisque? Nisi dignissim, eros? Est porttitor integer.

Sed dictumst natoque habitasse enim sagittis natoque scelerisque rhoncus porttitor mauris! Purus ut mid augue aliquet duis. Egestas tristique, mid rhoncus pid, tincidunt. Elementum in sed nascetur nec nascetur, sed diam, dolor et sed turpis? In egestas mid dapibus dolor mauris. Scelerisque habitasse nunc lorem placerat augue scelerisque etiam nisi, odio in purus mattis placerat platea, diam massa turpis, elementum urna! Mid, nisi? Turpis? Cursus, enim vut lacus dolor eu enim! Eros aliquam nec integer dictumst ut! Sed proin cursus mattis placerat vel augue! Tincidunt lundium urna, in integer, in, et, rhoncus diam et platea nunc cursus porta et sed elementum nascetur rhoncus magna porttitor magnis nascetur nec porta nunc, pellentesque! Mauris ultricies. Nisi, cursus ultrices tincidunt porta augue.
        </p>
    </article>
    
</div>

CSS

/*=========================================
    Main Styles
=========================================*/
body {
font-family: arial;
font-size: 15px;
line-height: 25px;
color: #515151;
overflow-x: hidden;
}

#console {
position: fixed;
height: 200px;
top: -200px;
left: 0;
right: 0;
bottom: auto;
background: rgba(0,0,0,0.96);
}
#console_input { 
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 3px;
    top: 32px;
    padding: 3px;
    background: rgba(0,0,0,0.3);
    color: #39c;
    outline: 0;
    border: 0;
    resize:none;
}
#console nav {
margin:0 0 0 2px;
}
#console nav ul li { display: inline-block; }
#console nav ul li a {
text-decoration: none;
color: #f8f8f8;
display: block;
padding: 2px 6px;
margin: 0;

-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
transition: all 100ms linear;
text-align: center;
}

#console nav ul li a:hover {
background: #363636;
}

#console nav ul li a:active {
background: #262626;
}

.console_link {
color: #f00;
}


#content {
margin-top: 0;
width: 100%;
}

#content h2 {
margin-top: 20px;
margin-bottom: 15px;
font-size: 34px;
}

JavaScript

var visible = false;
document.onkeydown = console_slide;
var Tilde = 192, Esc = 27;
function console_slide(evt){
  if (!evt) {
    evt = window.event;
  }
  if (evt.keyCode === Esc || evt.keyCode === Tilde) {// Esc
    if(visible==false){
        visible = true;
        $('#console').animate({
            top: 0
        });
    }
    else if(visible==true){
        visible = false;
        $('#console').animate({
            top: -350
        });
    }
    return false;
  }
}
$('#console_clear').click(function(){
    $('#console_input').val('');
    return false;
});