Okay just figured out a work around using hover instead.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en-us">
<head>
<title>Menu</title>
<script src="http://jquery.com/src/jquery.js";></script>
<script language="JavaScript" type="text/javascript" src="lib/jquery/
jquery.js"></script>
<script>
$(document).ready(function(){
$("dd").hide();
$("dt a").click(function(){
$("dd:visible").slideUp("fast");
$(this).parent().next().slideDown("fast");
return false;
});
$(".parent a").hover(function(){
$("dd:visible").slideUp("fast");
});
});
</script>
<style>
html,body{
height: 100%;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
background-repeat: no-repeat;
background-color: #96B4DA;
font-weight: bold;
}
dl { width: 180px; }
dl,dd { margin: 0; }
dt {
background: #668ac1;
font-size: 12px;
padding: 5px;
margin: 2px;
border: 1px solid #FFFFCC;
}
dt a {
color: #FFF;
text-decoration: none;
}
dd a {
color: #FFFFFF;
text-decoration: none;
}
dd a:hover {
color: #FFFF99;
text-decoration: none;
}
ul {
list-style: none;
padding: 5px;
font-size: 12px;
padding: 5px;
margin: 2px;
background-color: #455b9a;
}
.parent {
background: #668ac1;
font-size: 12px;
padding: 5px;
margin: 2px;
color: #FFFFFF;
border: 1px solid #FFFFCC;
}
.parent a {
color: #FFFFFF;
text-decoration: none;
}
.parent a:hover {
color: #FFFF99;
text-decoration: none;
}
.child {
background: #003399;
font-size: 12px;
padding: 5px;
margin: 2px;
color: #FFFFFF;
}
.child a {
color: #fff;
text-decoration: none;
}
.child a:hover {
color: #FFFF99;
text-decoration: none;
}
</style>
</head>
<body>
<dl>
<div class="parent" id="parent"><a href="http://www.google.com";
target="_blank">Home</a></div>
<dt><a href="/">Company Profile</a></dt>
<dd>
<ul>
<li><a href="/src/">CPLine1</a></li>
<li><a href="/docs/">CPLine2</a></li>
<li><a href="/blog/">CPLine3</a></li>
</ul>
</dd>
<dt><a href="/discuss/">Our Business</a></dt>
<dd>
<ul>
<li><a href="/discuss/">OBLine1</a></li>
<li><a href="/tutorials/">OBLine2</a></li>
<li><a href="/demos/">OBLine3</a></li>
<li><a href="/plugins/">OBLine4</a></li>
</ul>
</dd>
<dt><a href="/dev/">Our People</a></dt>
<dd>
<ul>
<li><a href="/src/">OPLine1</a></li>
<li><a href="/dev/bugs/">OPLine2</a></li>
<li><a href="/dev/recent/">OPLine3</a></li>
</ul>
</dd>
</dl>
</body>
</html>
On Apr 17, 3:04 pm, Allan <[EMAIL PROTECTED]> wrote:
> I am very happy with jquery. And I have been playing around with it
> over the last couple of days.
> I am a designer with a heavy reliance on IDEs like dreamweaver. So my
> coding background isn't strong, so please forgive this question if it
> is too out of place to ask here.
>
> I am using this code:
> <script>
> $(document).ready(function(){
> $("dd").hide();
> $("dt a").click(function(){
> $("dd:visible").slideUp("fast");
> $(this).parent().next().slideDown("fast");
> return false;
> });
> $(".parent a").click(function(){
>
> $("dd:visible").slideUp("fast");
>
> $(this).parent().next().slideDown("fast");
> return false;
> });
> });
> </script>
> <style>
> body { font-family: Arial; font-size: 12px; }
> dl { width: 300px; }
> dl,dd { margin: 0; }
> dt { background: #CCC; font-size: 12px; padding: 5px; margin: 2px; }
> dt a { color: #FFF; }
> dd a { color: #000; }
> ul { list-style: none; padding: 5px; background: #CCC; font-size:
> 12px; padding: 5px; margin: 2px; }
> .parent {background: #CCC; font-size: 12px; padding: 5px; margin:
> 2px; }
> .parent a { color: #000; }
> .child {background: #ccc; font-size: 12px; padding: 5px; margin:
> 2px; }
> .child a { color: #fff; }}
>
> </style>
> </head>
>
> <body>
> <dl>
> <div class="parent" id="parent"><a href="http://www.google.com";
> target="_blank">Home</a></div>
> <dt><a href="/">Company Profile</a></dt>
> <dd>
> <ul>
> <li><a href="/src/">Line1</a></li>
> <li><a href="/docs/">Line2</a></li>
> <li><a href="/blog/">Line3</a></li>
>
> </ul>
> </dd>
> <dt><a href="/discuss/">Our Business</a></dt>
> <dd>
> <ul>
> <li><a href="/discuss/">Line1</a></li>
> <li><a href="/tutorials/">Line2</a></li>
> <li><a href="/demos/">Line3</a></li>
> <li><a href="/plugins/">Line4</a></li>
> </ul>
> </dd>
> <dt><a href="/dev/">Our People</a></dt>
> <dd>
> <ul>
> <li><a href="/src/">Line1</a></li>
> <li><a href="/dev/bugs/">Line2</a></li>
> <li><a href="/dev/recent/">Line3</a></li>
> </ul>
> </dd>
> </dl>
>
> For a sliding menu. It work great, however I am am not sure how to
> code in main "parent" sections with out any sub link "children" below
> them. I'd like the childess parents to still show/hide as well as open
> their links. There is probably a very simple way to do this. Thanks in
> advance.
