SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
Thread: Slidedown menu
-
Sep 8, 2006, 13:43 #1
- Join Date
- Apr 2005
- Location
- London, UK
- Posts
- 506
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Slidedown menu
Hi,
I have a Horizontal menu such that when you point your mouse over a link say; "Info" it then displays more sub links. At the moment it displays all sublinks at the same time, but what i want is to display each sublink as slide down but per link. e.g.
Info <<<<<<<<<<<<<<main link
about us<<<<<<<<<<<sublink
job oppertunities<<<<<sublink
what i want is when mouse is over info, to first display "about us" after 1 or 2 seconds display job oppertunities.
My code:
CSS & JavaScript
PHP Code:
#nav, #nav ul { /* all lists */
margin:0;
list-style: none;
line-height: 1;
}
#nav a {
display: block;/*display sub below main menu*/
width: 9em;
padding-top:2px;
}
#nav li { /* all list items */
float: right;
width: 6em;
}
#nav li ul { /* second-level lists */
position: absolute; /*hide sub content, display whem mouse over*/
width: 9em;
font-size:12px;
list-style-type: none;
left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#content {
clear: left;
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
PHP Code:
<td height="52">
<ul id="nav">
<li>
<font face="Tahoma" size="2">
<a href="#" style="text-decoration: none; font-weight:700">
<font color="#FF9966">SOLUTIONS</font></a></font>
<ul>
<li><a href="#" style="text-decoration: none; font-weight:700">
<font color="#FF9966">Web Development</font></a></li>
<li><a href="#" style="text-decoration: none; font-weight:700">
<font color="#FF9966">Web Design</font></a></li>
<li><a href="#" style="text-decoration: none; font-weight:700">
<font color="#FF9966">E-Commerce</font></a></li>
</ul>
</li>
<li>
<font face="Tahoma" size="2">
<a href="#" style="text-decoration: none; font-weight:700">
<font color="#FF9966">PORTFOLIO</font></a></font>
<ul>
<li><a href="#" style="text-decoration: none; font-weight:700">
<font color="#FF9966">Web Development</font></a></li>
<li><a href="#" style="text-decoration: none; font-weight:700">
<font color="#FF9966">Web Design</font></a></li>
<li><a href="#" style="text-decoration: none; font-weight:700">
<font color="#FF9966">E-Commerce</font></a></li>
</ul>
</li>
<li>
<font face="Tahoma" size="2">
<a href="#" style="text-decoration: none; font-weight:700">
<font color="#FF9966">ABOUT US</font></a></font>
<ul>
<li><a href="#" style="text-decoration: none; font-weight:700">
<font color="#FF9966">About</font></a></li>
<li><a href="#" style="text-decoration: none; font-weight:700">
<font color="#FF9966">Objective</font></a></li>
<li><a href="#" style="text-decoration: none; font-weight:700">
<font color="#FF9966">E-Commerce</font></a></li>
</ul>
</li>
</ul>
</div>
</td>
cheers
-
Sep 9, 2006, 08:11 #2
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Do you mean, if there are 10 items in a menu then the user will have to wait for 10 seconds just to see all the menu's contents? Eeek!
Cross-Browser.com, Home of the X Library
-
Sep 10, 2006, 00:49 #3
- Join Date
- Apr 2005
- Location
- London, UK
- Posts
- 506
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
no i dont mean that. i dont want the entire submenu to display all at once. i want each item in the submenu to display one at a time. i dont know how else to explain this, but the menu on this link does what i want:
http://www.iwebsolutions.co.uk/
thanksLast edited by ma201dq; Sep 10, 2006 at 01:58.
-
Sep 10, 2006, 11:30 #4
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You are seeing a Flash menu, however it could also be done with DHTML.
That site is designed pretty well. Notice that if you disable Flash support you then get a CSS List menu. Pretty nice work.
Look at their source code to see what they are doing.Cross-Browser.com, Home of the X Library
Bookmarks