Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 247
  • Last Modified:

li menu help

hello
i am trying to see a way to include a further menu when a user selects an option from the main menu. for example: if a user selects the Files option i would then like sub menus such as, Return - retrieve. i have included my code and would be grateful if someone could show me the way. many thanks
<ul class="select"><li><a href="#"><b>Requests</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
	<ul class="sub">
		<li><a href="/sample/admin/requests/files/index.php">Files</a></li>
		<li><a href="/sample/admin/requests/boxes/index.php">Boxes</a></li>
		<li><a href="#nogo">Recycle</a></li>
		<li><a href="#nogo">Box Supply</a></li>
		<li><a href="#nogo">Destruction</a></li>
		<li><a href="#nogo">Destruction Schedules</a></li>
	</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

Open in new window

0
peter_coop
Asked:
peter_coop
  • 5
  • 5
  • 2
1 Solution
 
darren-w-Commented:
Are you after something like this?

http://www.cssplay.co.uk/menus/css-time-flyout.html
0
 
Rikin ShahMicrosoft Dynamics CRM ConsultantCommented:
you can use nested UL LI to show sub menus.

Or I would suggest you create CSS menus-
http://www.purecssmenu.com/
http://www.cssmenumaker.com/
0
 
peter_coopAuthor Commented:
@darren-w-

hello. no, that is not correct. i am looking to create a sub-menu from my posted code. thanks

@rikin_shah

hello. in my original question, i said i would like to use sub-menus but not sure how to code based on what i have posted. i need to keep the menu i have just expand it. thanks
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Rikin ShahMicrosoft Dynamics CRM ConsultantCommented:
Gotcha...

 
<span id="spanShowHideSubmenu" onclick="ShowHideSubmenu();">Expand</span>
        <ul class="sub" id="ulSubmenu" style="display:none">
                <li><a href="/sample/admin/requests/files/index.php">Files</a></li>
                <li><a href="/sample/admin/requests/boxes/index.php">Boxes</a></li>
                <li><a href="#nogo">Recycle</a></li>
                <li><a href="#nogo">Box Supply</a></li>
                <li><a href="#nogo">Destruction</a></li>
                <li><a href="#nogo">Destruction Schedules</a></li>
        </ul>

Open in new window



Add this javascript to expand and collapse

 
function ShowHideSubmenu()
{
	if (document.getElementById("spanShowHideSubmenu").innerHtml == "Expand")
	{
		document.getElementById("ulSubmenu").style.display = "block";
		document.getElementById("spanShowHideSubmenu").innerHtml = "Collapse";
	}
	else
	{
		document.getElementById("ulSubmenu").style.display = "none";
		document.getElementById("spanShowHideSubmenu").innerHtml = "Expand";
	}
}

Open in new window


0
 
darren-w-Commented:
JQuery alternative:
<!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#spanShowHideSubmenu").click(function(){
                    $("#ulSubmenu").slideToggle();
                })
            })
        </script>
    </head>
    <body>
        <span id="spanShowHideSubmenu" ">Expand</span>
        <ul class="sub" id="ulSubmenu" style="display:none">
            <li><a href="/sample/admin/requests/files/index.php">Files</a></li>
            <li><a href="/sample/admin/requests/boxes/index.php">Boxes</a></li>
            <li><a href="#nogo">Recycle</a></li>
            <li><a href="#nogo">Box Supply</a></li>
            <li><a href="#nogo">Destruction</a></li>
            <li><a href="#nogo">Destruction Schedules</a></li>
        </ul>
    </body>
</html>

Open in new window

0
 
peter_coopAuthor Commented:
thanks for replies guys. however, is there a way that i can just use ul li within my original menu? many thanks
0
 
darren-w-Commented:
Using your original menu:
<!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $(".select").click(function(){
                    $(".sub").slideToggle();
                })
            })
        </script>
    </head>
    <body>
        <ul class="select"><li><a href="#"><b>Requests</b><!--[if IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <div class="select_sub">
                    <ul class="sub">
                        <li><a href="/sample/admin/requests/files/index.php">Files</a></li>
                        <li><a href="/sample/admin/requests/boxes/index.php">Boxes</a></li>
                        <li><a href="#nogo">Recycle</a></li>
                        <li><a href="#nogo">Box Supply</a></li>
                        <li><a href="#nogo">Destruction</a></li>
                        <li><a href="#nogo">Destruction Schedules</a></li>
                    </ul>
                </div>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
        </ul>
    </body>
</html>

Open in new window

0
 
peter_coopAuthor Commented:
@darren. how does that create a sub-menu? what i am looking for is if hovers over the files option it displays a menu below along the lines of return retrieve destroy etc. at the moment the menu is controlled by pure css. if possible i would like to stick with css.  i have included my css code for your attention. many thanks
/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/pro_drop6.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.preload1 {background: url(six_0a.gif);}
.preload2 {background: url(six_1a.gif);}

#nav {padding:0; margin:100px 0 0 0; list-style:none; height:38px; background:#fff url(six_0.gif) repeat-x; position:relative; z-index:200; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(six_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0a.gif) no-repeat right top;}

#nav li:hover a.top_link,
#nav a.top_link:hover
{color:#fff; background: url(six_1.gif) no-repeat;}
#nav li:hover a.top_link span, 
#nav a.top_link:hover span
{background:url(six_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down
{background:url(six_1a.gif) no-repeat right top; padding-bottom:3px;}

#nav table {border-collapse:collapse; padding:0; margin:0; position:absolute; left:0; top:0;}

#nav li:hover {position:relative; z-index:100;}
#nav a:hover {position:relative; white-space:normal; z-index:100;}

#nav :hover ul.sub
{left:1px; top:38px; background: #999999; padding:3px; border:1px solid #000000; white-space:nowrap; width:100px; height:auto; z-index:1000;}
#nav :hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:100px; font-weight:normal;}
#nav :hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;}
#nav li ul.sub li a.fly
{background:#999999 url(arrow.gif) 80px 6px no-repeat;}
#nav :hover ul.sub li a:hover 
{background:#666666; color:#fff; border-color:#fff;}
#nav :hover ul.sub li a.fly:hover
{background:#666666 url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}

#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}

#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul
{left:89px; top:-4px; background: #999999; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:300; height:auto;}

#nav ul, 
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover > ul
{left:100px; top:-4px; background: #999999; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:100px; z-index:300; height:auto;}
#nav li:hover > ul ul 
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover > a.fly
{background:#000000 url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;} 
#nav li:hover li:hover > li a.fly
{background:#999999 url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}

Open in new window

0
 
darren-w-Commented:
Hi,

can you draw a simple graphic to show its functionality and that will make it easyer.

Darren
0
 
peter_coopAuthor Commented:
darren. the pic i have attached shows the menu when i hover over the request option. i now need a sub-menu to appear where i have marked when a user hovers over file options. hope that is clear. many thanks.
menu.png
0
 
peter_coopAuthor Commented:
thank you darren. will go down that route. many thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 5
  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now