sidebar toggle with js

Side bar toggle with pure java script or sidebar menu

how to use side bar menu toggle with java script for HTML <div id=”sidebar”> <div class=”toggle-btn” onClick=”toggleSidebar()”> <span></span> <span></span> <span></span> </div> <ul> <li><a href=”#” >Home</a></li> <li><a href=”#” >About</a></li> <li><a href=”#” >Service</a></li> <li><a href=”#” >Product</a></li> <li><a href=”#” >Contact</a></li> </ul> </div> for CSS #sidebar{ position:fixed; width:250px; height:100%; READ MORE

CSS Pseudo-elements “:after”, “:last-child” and “:not()” selector.

CSS Pseudo-classes child selectors If you want box border or button border or div border without margin and showing proper  you can use pseudo class “:not() selector” class .btn-group button:not(:first-child) ,This Pseudo-class or selector work opposite type for example all button right side border none READ MORE

Fill Text Effect On Hover(mouse over) using CSS content Property

You can add css Pseudo-classes “:before” selector, using CSS content Property “{content:attr();}” CSS h1 { margin:0px; padding:0px; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); font-size:8em; color:green; font-family:Verdana, Geneva, sans-serif; text-transform:uppercase; } h1:before { position:absolute; content:attr(data-text); top:0px; left:0px; color:red; width:0%; overflow:hidden; transition:1s; } h1:hover:before {width:100%;} HTML <!DOCTYPE HTML> READ MORE

How to insert more than one line ellipsis dot(…) using “line-clamp” in css3

How to insert more than one line ellipsis dot(…) using “line-clamp” in css3 If you need to truncate text after one line, then the text-overflow: ellipsis; is a great option - or any of the other text-overflow values. If you need to truncate text after more than one line, however, things READ MORE