JQUERY EASY-SLIDE MENU TEMPLATE





HOME
How-To Videos
©2014-, mrkent.com
At the time of this writing my daughter-in-law is working for a company which hired her to maintain a couple of websites. One of the challenges she faced was to come up with a menu at the top of the home page that would drop down a list of links related to each menu item.

We searched using terms like "jquery slide menu," "jquery menu slide template," "jquery slide template," etc. trying to find a simple piece of code that she could use. She downloaded some templates with samples of what she was looking for, but trying to find the corresponding CSS file in the download, and making changes without causing a malfunction was causing a lot of frustrating for her.

I decided to come up with a bare-bones template that contained all of the CSS on the same page. It needed to remain centered when the page was re-sized as well as being easy to modify. In the process I discovered that a lot of other folks were “Googling” for the same thing. Neither I nor my daughter-in-law were able to find a decent solution.

The objective of my project was to develop some simple code that could be adapted to any situation. The sample at the top of this page shows the result of that effort. The code below is what makes it work. I also decided to implement it into my own home page, www.mrkent.com/index.htm. If you plan to use the code below I would recommend experimenting a little before pasting it into your website. It always helps to understand how something works - just in case you need to fix it at some future date.

Copy and paste the code below into your website's pages. Watch the videos to see the necessary changes you will want to make. I have provided many helpful How-To Videos to make it work for you as easily as possible.

How-To Video List

Latest Modifications to Code

Learn the Basics

How To Write Code For Page Links

CSS Modifications (Make it look like your page)

Add A Menu Item

Add Round Corners and Shadows
To Your Drop-Downs


Change The Looks Of The Menu Header

Add The Menu To Other Pages

A Plain and Simple Layout - Get the code

Create A Separate CSS Page (Not that necessary)