Create A Multi-Level Drop Down Menu with CSS

Must Read : Create A Multi-Level Drop Down Menu with CSS

A flat designed multi-level drop down menu built with plain Html markup and pure CSS. Created by twodogstar.

How to use it:

Code your multi-level dropdown menu using nested Html lists as follows.

Set the parent <li>’s CSS position property to ‘relative’.

CSS to hide the sub menus.

Displays the dropdown menu on hover.

Displays second level dropdown menus to the right of the first level dropdown menu.

Now clearfix.

HTML / CSS Only Off-canvas Slide and Push Navigation

Must Read : HTML / CSS Only Off-canvas Slide and Push Navigation

A modern, mobile-friendly navigation solution to create an off-canvas slide or push menu using pure CSS / CSS3 and plain html. It currently provides 4 CSS files to define the look of the off-canvas menu:

  • slide.css: left slide menu
  • right-slide.css: right slide menu
  • left-push.css: left push menu
  • right-push.css: right push menu

Basic usage:

Load the slide.css to create a left slide menu on your web page.

Load the Font Awesome 4 for menu toggle icons.

Create a menu toggle control using CSS checkbox hacks.

The html structure for the slide menu.

Create a menu toggle button inside the main content.

[button style=”btn-link btn-lg” icon=”glyphicon glyphicon-download-alt” align=”left” iconcolor=”#1e73be” type=”link” target=”_blank” title=”Download” link=”https://github.com/acasaprogramming/pure-css-offcanvas-menu/archive/master.zip” linkrel=””]

Google Inbox style design using Bootstrap

Must Read : Google Inbox style design using Bootstrap

Here i’m going to make google inbox style design using bootstrap with font-awesome icons. i hope everybody knew about google inbox that is similar like gmail. In that, there is an design for compose mail as i’m showing in the below image. like that only we are going do here. lets see the code.
So, we are going to do that in bootstrap. so we need add all bootstrap css and js files will jquery plugin and also we have add font awesome css file.
BOOTSTRAP FILES

HTML CODE

CSS CODE

SCRIPT FOR TOOLTIP AND HOVER EFFECT

That’s it. I hope this is really cool one. Thanks for visiting,. Keep in touch with us for more tutorial.

Create custom file chosen input type using Css and Jquery

Must Read : Create custom file chosen input type using Css and Jquery

Usually we know how to give input type file for upload any kind of file in the database, for that we are using form, and in that form we have to give input type=”file” for file upload, usually while we are calling the input type as like the above, that will change for each browser, for that and make the file input type in custom design using Css and Jquery. let see how it is.

most of the social media and more sites have this kind of custom file chosen button for their flexible. because it change for all different browser. for that we have to make designed image for that replace of default style.

FILE INPUT TYPE

Just assign one label before the input type and close the label after the input type, for hide the original style of input type=’file’.

CSS

.style-chosen is called in the script, just call the class before all the class. and call the scripts

SCRIPTS

Just call the function as SI.Files.styleAll() in the si.files.js source file too. and make some changes in si.files.js. and the custom file chosen button is ready. and we can give any kind of image as you need in the label background. that could takes as the format of custom file chosen button.

Pure CSS Fullscreen Slideshow With Fancy Animations

Must Read : Pure CSS Fullscreen Slideshow With Fancy Animations

A CSS only fullscreen slideshow with fancy slide fade or Twist Degree animations based on CSS3.
How to use it:

Include the required modernizr.js on the webpage.

Include the style sheet v1.css (slide fade animation) or v2.css (Twist Degree animation) into the head section.

Replace the background images with yours.

[button style=”btn-link btn-lg” icon=”glyphicon glyphicon-download-alt” align=”left” iconcolor=”#1e73be” type=”link” target=”_blank” title=”Download” link=”https://github.com/brifiction/css-background-slideshow/archive/master.zip” linkrel=””]

Pretty Checkbox & Radio Inputs with Bootstrap and awesome-bootstrap-checkbox.css

Must Read : Pretty Checkbox & Radio Inputs with Bootstrap and awesome-bootstrap-checkbox.css

A pure CSS solution to beautify the default checkboxes & radio buttons with Bootstrap styles.

How to use it:

Add the required Bootstrap’s stylesheet and Font Awesome icon font in the document.

Add the  awesome-bootstrap-checkbox.css file in the document.

Beautify the checkboxes & radio buttons with Bootstrap branding colors.

[button style=”btn-link btn-lg” icon=”glyphicon glyphicon-download-alt” align=”left” iconcolor=”#1e73be” type=”link” target=”_blank” title=”Download” link=”https://github.com/flatlogic/awesome-bootstrap-checkbox/archive/master.zip” linkrel=””]