Sliding Header Message Panel With Pure CSS – headerMessage

Preview:

Description:

headerMessage is a lightweight CSS library for generating a sliding header panel to show important messages about your website on toggle.

How to use it:

Include the headerMessage.css into the head section of your html page.

<link rel="stylesheet" href="css/headerMessage.css">

Add your own messages to the header panel.

<div class="headerMessage">
  <h1> hello world!</h1>
  <h2>I'm a hidden message.</h2>
</div>

Create a checkbox based button to toggle the header message panel.

<input type="checkbox" name="toggle" id="toggle">
<label for="toggle"></label>