This site requires JavaScript turned on. Your browser does not support JavaScript, or it has JavaScript disabled. If you want to correctly view all the pages on this site, please upgrade your browser or enable JavaScript support. Thank you for taking the time to visit.

« Links open in new window/tab »

Free Site Search Engine at JRank.org

« Links open in new window/tab »

Web Design & Development

Monitor Page for Changes

Share |

CSS - Horizontal List Menu
PayneLess Designs

NOTE: A popup example of a working CSS Horizontal Menu is forthcoming.

Description: This is a lean CSS horizontal menu. The markup is entirely based on an ordinary HTML list, with support for 1 level of nested lists. The nested lists are transformed into 2nd level drop down menus that appears dynamically onmouseover. The entire menu interface is styled via the external CSS, even the arrow image that you can customize to appear automatically beside menu items that carry a 2nd level.

Three Steps to install CSS - Horizontal List Menu:

Directions:
Step 1: Add the following code to the <head> section of your page:

<head>
<link rel="stylesheet" type="text/css" href="csshorizontalmenu.css" >
<script type="text/javascript" src="csshorizontalmenu.js">
/***********************************************
* CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
</script>
</head>

It references two external files and 3 images. See step 3 for image links.

* csshorizontalmenu.css
* csshorizontalmenu.js
* The three images

Step 2: Add the below HTML to your page, which contain your menu links:

<body>
<div class="horizontalcssmenu">
<ul id="cssmenu1">
<li style="border-left: 1px solid #202020;"><a href="http://www.javascriptkit.com/">Home</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JS</a></li>
<li><a href="http://www.javascriptkit.com/">JS Tutorials</a></li>
<li><a href="#">References</a>
<ul>
<li><a href="http://www.javascriptkit.com/jsref/">JS Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">CSS Reference</a></li>
</ul>
</li>
<li><a href="http://www.javascriptkit.com/howto/">web Tutorials</a></li>
<li><a href="#">Resources</a>
<ul>
<li><a href="http://www.dynamicdrive.com">Dynamic HTML</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Generator</a></li>
</ul>
</li>
</ul>
<br style="clear: left;" />
</div>
<p id="iepara">Rest of content here</p>
</body>

Step 3: Download images: (DO NOT HOTLINK):

If you have found any services on my site to be beneficial and would like to donate, please feel free to donate ANY amount you want. Thank you very much.

« Links open in new window/tab »

« Links open in new window/tab »

Monitor Page for Changes

CSS - Horizontal List MenuPayneLess Designs

Three Steps to install CSS - Horizontal List Menu:

CSS - Horizontal List Menu
PayneLess Designs