We help IT Professionals succeed at work.

Sub Menu(s) without CSS

suvmitra
suvmitra used Ask the Experts™
on
Hi Experts,

I am doing a website project using VS 2005.

Presently I am using this code to get User right wise Menu. Now I need to add some Sub Menues over there eg. Reports should have sub menus like "Report A" and "Report B"

Please help if possible with the below procedure only .. I do not want to add any CSS.

if (Session["RoleID"].ToString() == "1")
               {
                    Response.Write("<li><a href=home.aspx>Home</a></li>");
                    Response.Write("<li><a href=reports.aspx>Reports</a></li>");
                    Response.Write("<li><a href=changepassword.aspx>Change Password</a></li>");
                    Response.Write("<li><a href=logout.aspx>Logout</a></li>");
               }

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Software Engineer
Commented:
Well it depends a lot on other parts of your current page (and existing css and/or javascript that is creating the menu) but for starters I would say use a nested list:

if (Session["RoleID"].ToString() == "1")
               {
                    Response.Write("<li><a href=home.aspx>Home</a></li>");
                    Response.Write("<li><a href=reports.aspx>Reports</a>");
                    Response.Write("<ul>");
                    Response.Write("<li><a href=reporta.aspx>Report A</a>");
                    Response.Write("<li><a href=reportb.aspx>Report B</a>");
                    Response.Write("</ul>");
                    Response.Write("</li>");
                    Response.Write("<li><a href=changepassword.aspx>Change Password</a></li>");
                    Response.Write("<li><a href=logout.aspx>Logout</a></li>");
               }

Open in new window


But if that's not supported by the particular code you're using it won't do you any good, in that case please elaborate, give the relevant source code or a URL where this can be viewed.

Author

Commented:
Thanks robert_schutt,

What I am trying to accomplish is something similar to the picture, dropdown submenus.

sub Menu
With the code you provided it creates another row with the items instead I need them to appear when i click /hover the Reports menu.
Robert SchuttSoftware Engineer

Commented:
I expected as much but can't say much more about it without knowing how the current formatting is done. Do you use a script/css solution you downloaded? or just a style for the <li> tags? In that last case I'm not sure if it will be possible without adding CSS.

Can you post the html that your application generates in the browser? Maybe that will clear something up.

Not sure if it makes a difference but would adding inline CSS be acceptable? So something like: <li style='position:relative;'>

Also, I assume you will want to use javascript to display/hide the submenu's or will they always be visible?

Author

Commented:
Actually I was interested to see without using CSS we can do a dropdown submenu or not.

Is the <li></li> can be more extendly used to create a sub item under it?
Robert SchuttSoftware Engineer

Commented:
Well, completely without using CSS I don't think so, but you can set style attributes from javascript, so that's one possibility.

But your current implementation uses _something_ to display the <li> tags as they are now, so I would suggest to build on that and if you want help with it, you will need to share in some way like I said before how it is done now.

Author

Commented:
image1This image is generated by the below code
<body  bgcolor=#a6bf79>
    <form id="form1" runat="server">
    	<div id="header_report" style="left: 0px; top: 0px; height: 169px; width: 1002px;">
		<div id="logo_w1" style="left: 22px; top: 13px">
            Work Flow
        </div>
		<div id="logo_w2" style="left: 127px; top: 44px">
            Management Tool</div>
		<div id="header_text" style="left: 530px; top: 3px; height: 13px; width: 184px;">
			<p align=right><% string name = "Welcome : " + Session["UserName"];
                          Response.Write(name); %></p>
		</div>
		<ul style="left: 2px; top: 135px; width: 992px;" >
			<%
                //if (Session["RoleID"].ToString() == "1")
                //{
                    Response.Write("<li><a href=home.aspx>Home</a></li>");
                    Response.Write("<li><a href=reports.aspx>Reports</a></li>");
                    //Response.Write("<ul>");
                    //Response.Write("<li><a href=reporta.aspx>Report A</a>");
                    //Response.Write("<li><a href=reportb.aspx>Report B</a>");
                    //Response.Write("</ul>");
                    //Response.Write("</li>");
                    Response.Write("<li><a href=changepassword.aspx>Change Password</a></li>");
                    Response.Write("<li><a href=logout.aspx>Logout</a></li>");

Open in new window


If I uncomment the commented lines then it comes further as the image 2

1mage2
need to fix this further to see it as sub menu.
Robert SchuttSoftware Engineer

Commented:
I'll look into it in a moment but first please note that with uncommenting those lines, you're not including the new <ul> into the existing <li> which was my intention, you have to delete the </li> from the end of the reports tag for that to work.

But then it will probably not work yet, I will get back to you.
Robert SchuttSoftware Engineer

Commented:
Hey, took me some time...

Did you try removing the extra </li> ?

You posted only part of the problem, the part where the styles are defined is rather important.

Also the question is still open if you are going to use javascript to hide/show the submenu.

I think the sub-menu's need to get a style='position:relative;' (and possibly a negative left offset), but really need some more info to investigate.

Author

Commented:
The position of the newly created sub menus can be taken care of. Thanks for the help.