Sliding Header Message Panel With Pure CSS – headerMessage


Author: fpmweb
Views Total: 1,328 views
Official Page: Go to website
Last Update: February 15, 2016
License: MIT

Preview:

Sliding Header Message Panel With Pure CSS – headerMessage

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>

See also  Multi-level Dropdown Menu With Pure CSS

Leave a Reply

Your email address will not be published. Required fields are marked *