Sliding Header Message Panel With Pure CSS – headerMessage

Category: CSS & CSS3 , Notification | February 15, 2016
Author:fpmweb
Views Total:1,339 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>

You Might Be Interested In:


Leave a Reply