Solved

li menu help

Posted on 2011-03-24
12
235 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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
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
 
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

825 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