Menu items control

Wilfredo Rosado · February 15th, 2012, 02:40 AM

Hi Imar.

I noticed that in ASP.NET 4.0 the menu items are controlled differently than in ASP.NET 3.5, at least it seems that way. In 3.5 you talked in great detail on how to setup the menu items using properties. In 4.0 it is done with ULs. In 4.0 your discussion on setting UL menu items such as main menu background & forground colors, hover colors, and select colors was not as explicit as in 3.5. Llikewise in setting the colors and properties of the submenus.

Is there a source I can go to that explains in more detail how to set these menu features? I was able to set the menu features following your 3.5 instructions, but I'm having trouble setting them in 4.0 and there isn't much to go on in your book. Is there another book I can obtain that talks more about CSS in ASP.NET 4.0? Specifically menu controls. Or did I miss something?

There are a few things about menus that are bugging me right now:

If I put the main menu bar horizontal on the bottom, which I have without a problem, is ther a way to make the submenu pop upward instead of down?
I can't seem to get the character color in the main or submenus to be what I want them to be. They come up purple and stay that way.
I am able to set the main menu and hover background color as well as the submenu background colors, but that is all.
I am able to set the selected character color on main menu, however when I click on a submenu item the submenu item does change to the selected color, but the main menu option that holds the submenu options looses its character and background color.

I will check again to insure I type that section in correctly, but in the meantime here is my CSS file with the menu options in red character color:

Code:

body
{
  margin:  0;
  padding: 0;
  background-color: #ECFFED; 
}

*
{
  font-family: Arial;
}

.treestyle
{
  width: 769px;
  height: 494px;
}

.headerText
{
  font-family: Algerian;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  margin: 0;
}

#PageWrapper
{
  margin: 0 auto;
  width: 844px;
}

#Header
{
  background-color: #ffffff; 
  color: #2C7421;
  width: 844px;
  height: 45px;
}

#MainContent
{
  background-color: #ffffff;
  background-image: ~/Images/Tree.jpg;
  width: 844px;
  height: 540px;
  text-align: center;
}

#MenuWrapper
{
  font-family: Algerian;
  color: #2C7421;
  background-color: #ffffff;
  width: 844px;
}

#Footer
{
  color: #2C7421;
  background-color: #ffffff;
  width: 844px;
  clear both;
}

ul.level1
{
  font-family: Algerian;
  font-size: 14px;
  font-weight: bold;
  height: 19px;
  line-height: 19px;
  color: #008000;
}

ul.level1 .selected
{
  background-color: #bcd1fe;
  color: #008000;
}

a.level1
{
  margin-left: 5px;
}

a.level2
{
  background-color: #cccccc;
  padding-left: 8 px;
}

a.level1:hover, a.level2:hover
{
  background-color: #bcd1fe;
}

Here is my web.sitemap code just in case:

Code:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="~/" title="Welcome"  description="Welcome to The Family Tree">
        <siteMapNode url="~/Default.aspx" title="Welcome"  description="Go to the homepage" />
        <siteMapNode url="~/About/About.aspx" title="About Us"  description="Help and Information about us">
          <siteMapNode url="~/About/ContactUs.aspx" title="Contact Us"  description="Leave us a message" />
          <siteMapNode url="~/About/Help.aspx" title="Help"  description="Obtain help" />
        </siteMapNode>
        <siteMapNode url="~/Tree/Search.aspx" title="Search Tree"  description="Search candidates in Family Tree">
          <siteMapNode url="~/Tree/Person.aspx" title="By Person"  description="Search a candidate in Family Tree" />
          <siteMapNode url="~/Tree/couple.aspx" title="By Couple"  description="Search for married couple" />
          <siteMapNode url="~/Tree/roots.aspx" title="By Roots"  description="Search for your roots" />
        </siteMapNode>
        <siteMapNode url="~/Add/Add.aspx" title="Add Candidate"  description="Add candidates to Family Tree">
          <siteMapNode url="~/Add/person.aspx" title="By Person"  description="Add a person into The Family Tree" />
          <siteMapNode url="~/Add/Couple.aspx" title="By Couple"  description="Add a married couple into The Family Tree" />
        </siteMapNode>
        <siteMapNode url="~/Control/Panel.aspx" title="Control Panel"  description="Maintain Family Tree">
          <siteMapNode url="~/Control/Enter.aspx" title="Enter"  description="Enter a candidate into The Family Tree" />
          <siteMapNode url="~/Control/Modify.aspx" title="Modify"  description="Modify candidate info in The Family Tree" />
          <siteMapNode url="~/Control/Verify.aspx" title="Verify"  description="Verify candidate info in The Family Tree" />
        </siteMapNode>
    </siteMapNode>
</siteMap>

Any light you can shed on this is most appreciated.

Fred

Imar · February 15th, 2012, 07:42 AM

Hi Fred,

The good thing about the changes in the ASP.NET menu is that it;s no no longer an ASP.NET issue. You can now simply apply existing CSS techniques to the menu. For example, you can use the "Sucker fish" code to style the menu:

http://www.htmldog.com/articles/suckerfish/dropdowns/
http://www.alistapart.com/articles/dropdowns

Quote:

If I put the main menu bar horizontal on the bottom, which I have without a problem, is ther a way to make the submenu pop upward instead of down?

It can be done, but it requires some studying ;-)

http://www.pmob.co.uk/temp/dropup3.htm
http://www.google.com/?q=css+menu+upwards

Quote:

I can't seem to get the character color in the main or submenus to be what I want them to be. They come up purple and stay that way.

Maybe you also need to style the "visited" pseudo selector?

Quote:

I am able to set the main menu and hover background color as well as the submenu background colors, but that is all.

Not sure what the question is here.

Quote:

I am able to set the selected character color on main menu, however when I click on a submenu item the submenu item does change to the selected color, but the main menu option that holds the submenu options looses its character and background color.

Again, not sure what you're asking. Could this be due tp the unstyled ":visited" item?

Imar