How to make an HTML modal window using Javascript and CSS

This is basically an application of this tutorial from w3schools. I've created a fiddle for it and customized mainly the CSS.

Modals are a neat way to present content in an HTML page without making it look cluttered. You can use it to contain information you don't want to be visible at all times. You increase the usability of your website by not having your user jump to a new page for small information or a form.


This is really more of a note to self haha but hope you find is useful too!

Share:

Read More

CSS Horizontal drop-down menu

Here's how you can create a horizontal navigation bar with drop-down feature using CSS. The limitation of this code is that it can only handle 1 level of sub menu. So if you intend you create more levels, you have to add to the code.

See jsfiddle here


CSS properties will vary depending on your existing layout and styles, but basically the horizontal drop-down menu works by converting an unordered vertical list into a horizontal one, and hiding any sub list from sight until the parent is hovered by the mouse.

Share:

Read More