Category Archives: HTML

JS – Project1 – Mobile JS Menu (+ more)

This demo series will show you how you can make your navigation mobile friendly and accessible using jQuery whether javascript is enabled on the client-side or not.

JS Mobile Menu Demo Series

This series is approximately 45 minutes long. You should expect it to take at least twice that time to do complete the work.

1 – Menu setup (18min)
2 – jQuery setup and custom script (17min)
3 – Styling the menu for proper behavior (13min)

 

 

Continue reading JS – Project1 – Mobile JS Menu (+ more)

JS : Single Page Parallax Resume

What is in this tutorial?

  • Mobile-first design principles
  • Learn how ‘vh’ viewport height works
  • Learn how to vertically and horizontally center elements on page
  • Writing jQuery script for collapsible navigation menu
  • Applying parallax smooth scrolling jQuery script for single page navigation
  • Applying Lightbox 2 jQuery effects to gallery

Please watch all videos below to complete the tutorial.


Continue reading JS : Single Page Parallax Resume

CSS – Styling Lists

What This Tutorial Covers

The following 4-part series explains how to style lists for navigation. It covers the following topis:

  • switching from block-level (vertical) to inline (horizontal) lists
  • how margins and padding behave with text and inline lists
  • centering text in in-line lists vertically and horizontally
  • making horizontal lists using floats
  • using background images in both inline and floated lists
  • clearing floated items Continue reading CSS – Styling Lists

PHOTOSHOP – Making Image Navigation For the Web

The first demo video shows you how you can make navigational buttons in Photoshop using multiple layers in a single space. The second demo shows you how to create the same output files as in the first demo, but the second video uses “slices”.

BY THE WAY . . .. Even though in the video a talk about making “javascript rollovers,” these techniques are the same for making CSS hover buttons that use absolutely no javascript. So don’t let that throw you off! Continue reading PHOTOSHOP – Making Image Navigation For the Web