Sidebar

• Posted: January 15, 2016
• / By: Magda
• / In:

HTML markup

CSS

<article class="ct-side-menu"> <button type="button" class="ct-side-menu__button ct-js-close-button ct-js-side-menu__button morph-button-close"> close <i class="fa fa-times"></i> </button> <div class="ct-side-menu__content"> <h4 class="ct-side-menu__header">menu</h4> <div class="ct-divider"></div> <ul class="list-unstyled"> <li><a href="about-us.html">About Us</a> </li> <li><a href="blog-list.html">Blog</a> </li> <li><a href="checkout.html">Checkout</a> </li> <li><a href="upload.html">Upload</a> </li> <li><a href="contact.html">Contact Us</a> </li> </ul> <h4 class="ct-side-menu__header">Discover</h4> <div class="ct-divider"></div> <ul class="list-unstyled"> <li><a href="portfolio.html">Everything</a> </li> <li><a href="portfolio.html">Popular</a> </li> <li><a href="portfolio.html">Random</a> </li> </ul> <div class="ct-divider"></div> <ul class="list-unstyled"> <li><a href="#">Sign Up</a> </li> <li><a href="#">Login</a> </li> </ul> <div class="text-center"> <ul class="ct-socials list-inline list-unstyled ct-socials--default ct-socials--with-border"> <li class="ct-socials__itemfacebook"><a href="https://www.facebook.com/createITpl" target="_blank"><i class="fa fa-facebook"></i></a></li> <li class="ct-socials__itemtwitter"><a href="https://twitter.com/createitpl" target="_blank"><i class="fa fa-twitter"></i></a></li> <li class="ct-socials__itempinterest"><a href="#" target="_blank"><i class="fa fa-pinterest"></i></a></li> <li class="ct-socials__iteminstagram"><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li> </ul> </div> <div class="ct-side-menu__footer"> <p><span>© copyright 2015</span><br>Show | Premium Photos PSD Template<br>by <a href="#">Webstrot </a></p> </div> </div> </article>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

<article class="ct-side-menu">   <button type="button" class="ct-side-menu__button ct-js-close-button ct-js-side-menu__button morph-button-close">     close     <i class="fa fa-times"></i>   </button>   <div class="ct-side-menu__content">     <h4 class="ct-side-menu__header">menu</h4>     <div class="ct-divider"></div>     <ul class="list-unstyled">       <li><a href="about-us.html">About Us</a>       </li>       <li><a href="blog-list.html">Blog</a>       </li>       <li><a href="checkout.html">Checkout</a>       </li>       <li><a href="upload.html">Upload</a>       </li>       <li><a href="contact.html">Contact Us</a>       </li>     </ul>     <h4 class="ct-side-menu__header">Discover</h4>     <div class="ct-divider"></div>     <ul class="list-unstyled">       <li><a href="portfolio.html">Everything</a>       </li>       <li><a href="portfolio.html">Popular</a>       </li>       <li><a href="portfolio.html">Random</a>       </li>     </ul>     <div class="ct-divider"></div>     <ul class="list-unstyled">       <li><a href="#">Sign Up</a>       </li>       <li><a href="#">Login</a>       </li>     </ul>     <div class="text-center">       <ul class="ct-socials list-inline list-unstyled ct-socials--default ct-socials--with-border">         <li class="ct-socials__itemfacebook"><a href="https://www.facebook.com/createITpl" target="_blank"><i class="fa fa-facebook"></i></a></li>         <li class="ct-socials__itemtwitter"><a href="https://twitter.com/createitpl" target="_blank"><i class="fa fa-twitter"></i></a></li>         <li class="ct-socials__itempinterest"><a href="#" target="_blank"><i class="fa fa-pinterest"></i></a></li>         <li class="ct-socials__iteminstagram"><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>       </ul>     </div>     <div class="ct-side-menu__footer">       <p><span>© copyright 2015</span><br>Show | Premium Photos PSD Template<br>by   <a href="#">Webstrot        </a></p>     </div>   </div> </article>

Screenshot

Sidebar Menu example