Solved

li menu help

Posted on 2011-03-24
12
237 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

713 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