ASP.NET 2.0 - MenuItems and hovering

Hello, I am currently attempting to modify an ASP.NET menu that I found online so that I will be better able to control the look and feel of menus that I create in the future. The current one that I am modifying is a simple "pop out" menu with a Horizontal orientation. If you compile that code that I am including in this post, you will see that when one hovers over the "main" ASP.NET Menu Items, there is a change in the color of "main" menu items (the menu items that are there when the page first renders and yield the "pop out" menu items);however, when one hovers over the MenuItems that pop out, I just can't seem to figure out how to make the color of the MenuItems change when they are hovered over unless I eliminate the background color property in the CSS code controlling the look of the "pop out" MenuItems. Can someone please tell me what code I need to add to be capable of creating an ASP.NET Menu with background colored "pop out" MenuItems that change color when hovered over? Any help would be greatly appreciated.

Here is the Code:

Expand|Select|Wrap|Line Numbers

 <%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

    <style type="text/css">

        .staticMenuItem

        {

            color:White;
 
            border:solid 1px black;

            padding:2px 4px;

        }

        .menuHover

        {

            color:#ffcc00;

            background-color:blue;

        }

        .dmenuHover

        {

            color:blue;

            background-color:#ff9900;

        }

        .dynamicMenuItem

        {

            color:black;

            background-color:#FF6600;

            padding:2px 4px;       

        }

        .dynamicMenu

        {

            background-color: #ffcc00;            

            border:Solid 1px black;

            filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray', Positive='true')" ;

        }

    </style>

    <title>Menu Desktop</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>
 
    <asp:Menu

        id="Menu1"

        Orientation="Horizontal"

        StaticMenuItemStyle-CssClass="staticMenuItem"

        StaticHoverStyle-CssClass="menuHover"

        DynamicHoverStyle-CssClass="menuHover"

        DynamicMenuItemStyle-CssClass="dynamicMenuItem"

        DynamicMenuStyle-CssClass="dynamicMenu"

        Runat="server" BackColor="Red" DynamicMenuStyle-BackColor="#FF6600">

        <Items>

        <asp:MenuItem 

            Text="File"

            Selectable="False" Value="File">

            <asp:MenuItem 

                Text="Save" Value="Save" />

            <asp:MenuItem 

                Text="Open" Value="Open" />

        </asp:MenuItem>    

        <asp:MenuItem 

            Text="Format"

            Selectable="False" Value="Format">

            <asp:MenuItem 

                Text="Bold" Value="Bold" />

            <asp:MenuItem 

                Text="Italic" Value="Italic" />

            <asp:MenuItem 

                Text="Underline" Value="Underline" />

            <asp:MenuItem

                Text="Left Align" Value="Left Align" />

            <asp:MenuItem

                Text="Center Align" Value="Center Align" />            

            <asp:MenuItem

                Text="Right Align" Value="Right Align" />                

        </asp:MenuItem>    

        </Items>

        <StaticMenuItemStyle CssClass="staticMenuItem" />

        <DynamicHoverStyle CssClass="menuHover" />

        <DynamicMenuStyle CssClass="dynamicMenu" />

        <DynamicMenuItemStyle CssClass="dynamicMenuItem" />

        <StaticHoverStyle CssClass="menuHover" />

    </asp:Menu>    
 
    </div>

    </form>

</body>

</html>

Sep 12 '07 #1

Subscribe Post Reply

10224

cnixuser

I identified the problem in my code that was preventing the "pop out" menus from having a color change when hovered over, I had both the <asp:Menu> property for the Hovering background color and a CSS version of the same thing active at the same time, apparently, this caused some conflict from within the code. Here are the revisions to my code, I changed the colors around a bit for the hec of it, and I commented out the conflicting code in the CSS section of the code. Here is my revised code:

Expand|Select|Wrap|Line Numbers

 <%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

    <style type="text/css">

        .staticMenuItem

        {

            color:White;
 
            border:solid 1px black;

            padding:2px 4px;

        }

        .menuHover

        {

            color:#ffcc00;

            background-color:red;

        }

        .dmenuHover

        {

            color:blue;

            background-color:#ff9900;

        }

        .dynamicMenuItem

        {

            color:black;

            /*background-color:#FF6600;*/

            padding:2px 4px;       

        }

        .dynamicMenu

        {

            /*the background color for the dynamic menus both "popout" and non is covered by the

            DynamicMenuStyle-BackColor="#FF6600" in the <asp:Menu> tag*/

            /*background-color: #ffcc00;*/

            /*background-color: green;*/            

            border:Solid 1px black;

            filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray', Positive='true')" ;

        }

    </style>

    <title>Menu Desktop</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        &nbsp;<asp:Menu

        id="Menu1"

        Orientation="Horizontal"

        StaticMenuItemStyle-CssClass="staticMenuItem"

        StaticHoverStyle-CssClass="menuHover"

        DynamicHoverStyle-CssClass="menuHover"

        DynamicMenuItemStyle-CssClass="dynamicMenuItem"

        DynamicMenuStyle-CssClass="dynamicMenu"

        Runat="server" BackColor="Red" DynamicMenuStyle-BackColor="#FF6600">

        <Items>

        <asp:MenuItem 

            Text="File"

            Selectable="False" Value="File">

            <asp:MenuItem 

                Text="Save" Value="Save" />

            <asp:MenuItem 

                Text="Open" Value="Open" />

        </asp:MenuItem>    

        <asp:MenuItem 

            Text="Format"

            Selectable="False" Value="Format">

            <asp:MenuItem 

                Text="Bold" Value="Bold" />

            <asp:MenuItem 

                Text="Italic" Value="Italic" />

            <asp:MenuItem 

                Text="Underline" Value="Underline" />

            <asp:MenuItem

                Text="Left Align" Value="Left Align" />

            <asp:MenuItem

                Text="Center Align" Value="Center Align" />            

            <asp:MenuItem

                Text="Right Align" Value="Right Align" />                

        </asp:MenuItem>    

        </Items>

        <StaticMenuItemStyle CssClass="staticMenuItem" />

        <DynamicHoverStyle CssClass="menuHover" />

        <DynamicMenuStyle CssClass="dynamicMenu" />

        <DynamicMenuItemStyle CssClass="dynamicMenuItem" />

        <StaticHoverStyle CssClass="menuHover" />

    </asp:Menu>    
 
    </div>

    </form>

</body>

</html>

Also, here is the website where I got the original <asp:Menu> I was playing around with.

Sep 13 '07 #2

Similar topics

Dynamic MenuItems *weird* problem

by: Deutsche Dogge | last post by:

Hi. I'M having a weird problem with addign menuitems to a menu dynamically on the popup event of the menuitem containing the container of the menuitems i wanna add (tools -> external -> {list of...

.NET Framework

Adding Menuitems to Contextmenu doesn't work

by: Kreisquadratur | last post by:

Below is s snippet of my code, which should add menuitems as a submenu of an item in a contextmenu. But only the first time the contextmenu opens the entrys are set correctly. I just don't know why...

C# / C Sharp

Loop through MenuItems

by: Steve Tan | last post by:

1. How can I loop through all the items and subitems for Menu of a Windows Form (c#) ? Recursive function? 2. How can I uniquely identify a submenu item ? MenuItems doesn't have a Name...

C# / C Sharp

MDI Application MenuItems.Add Throws exception

by: Brian | last post by:

Create a simple MDI form and a child form, and try the following simple code to add a new menu item on the Edit menu popup: private void editMenu_Popup(object sender, System.EventArgs e) {...

C# / C Sharp

MenuItems.Clear() Problem

by: Davie | last post by:

I'm developing an application on the smartphone. To reduce the size of the application i'm using panels where appropriate instead of forms. As a result of the design, I need to have different...

C# / C Sharp

Iterate thru menuitems of a contextmenu

by: Jorge Cavalheiro | last post by:

Hello I am trying to browse thru all menuitens of contextmenus. The form has 3 contextmenus. mi and mi2 as menuitems, f is a form For Each mi In f.ContextMenu.MenuItems For Each mi2 In...

Visual Basic .NET

Menuitems do not display

by: active | last post by:

I have a mainmenu menuitem that contains a Recently Used Files menuitem If at design time I include a menuitem in the Recently Used Files menuitem collection it will display OK If I...

Visual Basic .NET

IE7 Issue - Footer Jumping Up Page When Hovering Over TopNav

by: Steve | last post by:

Hi there, I'm having a problem with a webpage where hoving over the top navigation links causes my footer to jump up to the centre of the page! It only happens with IE7, and works fine with the...

HTML / CSS

using tooltip on meny and menuitems

by: Tony | last post by:

Hello! Is it possible to use tooltip on menuStrip and toolstripmenuitem ? I mean that you get som kind of information when hovering over a menu or menyitem. How is that done? //Tony

C# / C Sharp

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing