Solved

li menu help

Posted on 2011-03-24
12
230 Views
Last Modified: 2012-05-11
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
Comment
Question by:peter_coop
  • 5
  • 5
  • 2
12 Comments
 
LVL 13

Expert Comment

by:darren-w-
ID: 35205876
Are you after something like this?

http://www.cssplay.co.uk/menus/css-time-flyout.html
0
 
LVL 19

Expert Comment

by:Rikin Shah
ID: 35205889
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
 

Author Comment

by:peter_coop
ID: 35206321
@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
 
LVL 19

Expert Comment

by:Rikin Shah
ID: 35206429
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
 
LVL 13

Expert Comment

by:darren-w-
ID: 35206523
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
 

Author Comment

by:peter_coop
ID: 35207691
thanks for replies guys. however, is there a way that i can just use ul li within my original menu? many thanks
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 13

Expert Comment

by:darren-w-
ID: 35208494
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
 

Author Comment

by:peter_coop
ID: 35210021
@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
 
LVL 13

Expert Comment

by:darren-w-
ID: 35210438
Hi,

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

Darren
0
 

Author Comment

by:peter_coop
ID: 35211342
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
 
LVL 13

Accepted Solution

by:
darren-w- earned 250 total points
ID: 35213745
0
 

Author Closing Comment

by:peter_coop
ID: 35217005
thank you darren. will go down that route. many thanks
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmakerā€¦
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now