Log in

View Full Version : Multi drop down menu


suresh_gop
05-02-2010, 02:05 PM
Hello,

I am trying to create a website with muti level menu for the following HTML. I have attached 3 files here.

1. Outdoor.css is HTML css file
2. jqueryslidemenu is muti level menu css
3. jqueryslidemenu is muti level menu js

I edited all three files with my HTML code i could not get result that i wish. navigation bar is displayed but muti level menu is not displayed.

How to overcome this?

Thanks,
Suresh.G

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta name="Description" content="Information architecture, Web Design, Web Standards." />
<meta name="Keywords" content="your, keywords" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="Author" content="Erwin Aligam - ealigam@gmail.com" />
<meta name="Robots" content="index,follow" />

<link rel="stylesheet" href="images/Outdoor.css" type="text/css" />
<link rel="stylesheet" href="images/jqueryslidemenu.css" type="text/css"/>

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="images/jqueryslidemenu.js"></script>



<title>SK Exports</title>

</head>
<body>

<!-- wrap starts here -->
<div id="wrap">

<!--header -->
<div id="header">

<h1 id="logo-text"><a href="index.html" title="">SK Exports</a></h1>
<p id="slogan">Go Green...</p>

<div id="header-links">
<p>
<a href="index.html">Home</a> |
<a href="index.html">Contact</a> |
<a href="index.html">Site Map</a>
</p>
</div>

<!--header ends-->
</div>

<div id="header-photo"><img src="images/headerBackground.jpg" width="870" height="206" alt="header-photo" /></div>



<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>


</body>
</html>

3282 ( outdoor.css )
3283 ( jqueryslidemenu.css )
3284 ( jqueryslidemenu.js )
katierosy
05-04-2010, 12:53 PM
Crosscheck the file path.
As per the code your JS and CSS should be placed in the images folder.
images folder need to be placed at the root of the HTML File.
suresh_gop
05-09-2010, 05:27 AM
I checked as you told. now drop down menu items are not dispalyed just menu bar only displaying with underline.