CSS Friendly Control Adapters

hovering menu disappers before moving the pointer onto cssfriendly menu

Chalam — Fri, 20 Nov 2009 14:09:20 GMT

Hi All,

I am trying to create a CSSFriendly horizontal menu with custom styling at first level.

I have modified the menu adapter slightly for custom width at top level, but having issues with hovering onto the child menu, from the root horizontal menu.

Please find below my CSS and code output.

Appreciate, any help/pointers!

.mainMenu ul.AspNet-Menu /* Tier 1 */
{
float: right;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
list-style:none;
}

.mainMenu ul.AspNet-Menu ul /* Tier 2 */
{
float: right;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
list-style:none;
}

.mainMenu li /* all list items */
{
    width: 150px;
    background: #ffffff;
    color:White;
    margin: 0px 0px 0px 0px;
}

/* Custom top level items */
.mainMenu .AspNet-Menu-toplevel1
{
width: 75px;
}
.mainMenu .AspNet-Menu-toplevel2
{
width: 130px;
}
.mainMenu .AspNet-Menu-toplevel3
{
width: 100px;
}
.mainMenu .AspNet-Menu-toplevel4
{
width: 120px;
}
.mainMenu .AspNet-Menu-toplevel5
{
width: 80px;
}

/* all anchors and spans (nodes with no link) */
.mainMenu a,
.mainMenu span
{
    color: #616265;
    padding: 6px 1px 4px 4px;
    text-align: center;
    font: 11.5px Arial, Helvetica, sans-serif;
    display: block;
    margin: 0px 0px 0px 0px;
}

.mainMenu li.AspNet-Menu-Leaf a, /* leaves */
.mainMenu li.AspNet-Menu-Leaf span
{

border-bottom: 1px solid #616265;
border-left:1px solid #616265;
border-right: 1px solid #616265;
    background: #A3A19E;
    text-align: left;
    color: White;
    margin: 0px 0px 0px 0px;
    display: block;
}

.mainMenu li:hover a, /* hovered text */
.mainMenu li:hover span,
.mainMenu li.AspNet-Menu-Hover a,
.mainMenu li.AspNet-Menu-Hover span
{
color: White;
    background: #8599A8;
    margin: 0px 0px 0px 0px;


}
.mainMenu li:hover li:hover a,
.mainMenu li:hover li:hover span,
.mainMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.mainMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
.mainMenu li:hover li:hover li:hover a,
.mainMenu li:hover li:hover li:hover span,
.mainMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.mainMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span
{
   color: White;
   background: #6b8e00;
   margin: 0px 0px 0px 0px;

}

.mainMenu .AspNet-Menu-Selected, /* this tier is selected */
.mainMenu .AspNet-Menu-toplevel1 .AspNet-Menu-ChildSelected,
.mainMenu .AspNet-Menu-toplevel2 .AspNet-Menu-ChildSelected,
.mainMenu .AspNet-Menu-toplevel3 .AspNet-Menu-ChildSelected,
.mainMenu .AspNet-Menu-toplevel4 .AspNet-Menu-ChildSelected,
.mainMenu .AspNet-Menu-toplevel5 .AspNet-Menu-ChildSelected,
.mainMenu AspNet-Menu-Leaf .AspNet-Menu-Selected
{
background: #8599A8;
    color: White;
    margin: 0px 0px 0px 0px;
    display: block;
}

HTML CODE:

<div class="mainMenu" id="ctl00_mainMenu">
	<div class="AspNet-Menu-Horizontal">
			<ul class="AspNet-Menu">
				<li class="AspNet-Menu-toplevel1">
					<a href="/QSRDemo/Pages/AboutUs/AboutUs.aspx" class="AspNet-Menu-Link">
						ABOUT US</a>
					<ul>
						<li class="AspNet-Menu-Leaf">
							<a href="/QSRDemo/Pages/AboutUs/Management.aspx" class="AspNet-Menu-Link">
								Management</a>
						</li>
					</ul>
				</li>
				<li class="AspNet-Menu-toplevel2">
					<a href="/QSRDemo/Pages/ProductsAndServices/ProductsAndServices.aspx" class="AspNet-Menu-Link">
						PRODUCTS & SERVICES</a>
					<ul>
						<li class="AspNet-Menu-Leaf">
							<a href="/QSRDemo/Pages/ProductsAndServices/Services.aspx" class="AspNet-Menu-Link">
								Administration Services</a>
						</li>
						<li class="AspNet-Menu-Leaf">
							<a href="/QSRDemo/Pages/ProductsAndServices/TechnologyServices.aspx" class="AspNet-Menu-Link">
								Technology Services</a>
						</li>
						<li class="AspNet-Menu-Leaf">
							<a href="/QSRDemo/Pages/ProductsAndServices/BNYMServices.aspx" class="AspNet-Menu-Link">
								BNY Mellon Services</a>
						</li>
					</ul>
				</li>
				<li class="AspNet-Menu-toplevel3">
					<a href="/QSRDemo/Pages/NewsAndEvents/NewsAndEvents.aspx" class="AspNet-Menu-Link">
						NEWS & EVENTS</a>
					<ul>
						<li class="AspNet-Menu-Leaf">
							<a href="/QSRDemo/Pages/NewsAndEvents/PressReleases.aspx" class="AspNet-Menu-Link">
								Press Releases</a>
						</li>
					</ul>
				</li>
				<li class="AspNet-Menu-toplevel4">
					<a href="/QSRDemo/Pages/InvestorRelations/InvestorRelations.aspx" class="AspNet-Menu-Link" title="Investor Reporting in qsr">
						INVESTOR RELATIONS</a>
					<ul>
						<li class="AspNet-Menu-Leaf">
							<a href="/QSRDemo/Pages/InvestorRelations/BusinessHighlights.aspx" class="AspNet-Menu-Link">
								Business Highlights</a>
						</li>
					</ul>
				</li>
				<li class="AspNet-Menu-toplevel5">
					<a href="/QSRDemo/Pages/Resources/Resources.aspx" class="AspNet-Menu-Link">
						RESOURCES</a>
					<ul>
						<li class="AspNet-Menu-Leaf">
							<a href="/QSRDemo/Pages/Resources/ClientAccess.aspx" class="AspNet-Menu-Link">
								Client Access</a>
						</li>
						<li class="AspNet-Menu-Leaf">
							<a href="/QSRDemo/Pages/Resources/ContactUs.aspx" class="AspNet-Menu-Link">
								Contact Us</a>
						</li>
						<li class="AspNet-Menu-Leaf">
							<a href="/QSRDemo/Pages/Resources/FAQ.aspx" class="AspNet-Menu-Link">
								FAQ's</a>
						</li>
						<li class="AspNet-Menu-Leaf">
							<a href="/QSRDemo/Pages/Resources/Careers.aspx" class="AspNet-Menu-Link">
								Careers</a>
						</li>
					</ul>
				</li>
			</ul>

	</div>
</div>

Unable to create type 'bcc.Tnt.ResellerSite.CSSFriendly.GridViewAdapter'.

bustell — Wed, 03 Oct 2007 18:00:15 GMT

Help. I am trying add the GridView control adapter to my existing Web Application Project. I am getting the following error:

Unable to create type 'bcc.Tnt.ResellerSite.CSSFriendly.GridViewAdapter'.

I have added the following files:

~/App_Browsers/CSSFriendlyAdapters.browser

~/App_These/Default/DefaultGridView.css (renamed GridViewExample.css)

~/CssAdaptersCSS (contains all the files in sample CSS folder)

~/JavaScript (contains all the files in the sample JavaScript folder)

~/SiteClasses/GridViewAdapter.vb

~/SiteClasses/WebControlAdapterExtender.vb

I've also added the following Code:

~BaseMasterPage.master --> <link runat="server" rel="stylesheet" href="~/CssAdaptersCSS/GridView.css" type="text/css" id="AdaptersInvariantImportCSS" />

~UserList.apsx --> Added CssSelectorClass="PrettyGridView" attribute to by GridView

Details of error page:

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Exception: Unable to create type 'bcc.Tnt.ResellerSite.CSSFriendly.GridViewAdapter'.

Source Error:


An unhandled exception was generated during the execution of the
current web request. Information regarding the origin and location of
the exception can be identified using the exception stack trace below.

Stack Trace:

[Exception: Unable to create type 'bcc.Tnt.ResellerSite.CSSFriendly.GridViewAdapter'.]
   System.Web.Configuration.HttpCapabilitiesBase.GetAdapter(Control control) +448
   System.Web.UI.Control.ResolveAdapter() +73
   System.Web.UI.Control.InitRecursive(Control namingContainer) +17
   System.Web.UI.Control.InitRecursive(Control namingContainer) +198
   System.Web.UI.Control.InitRecursive(Control namingContainer) +198
   System.Web.UI.Control.InitRecursive(Control namingContainer) +198
   System.Web.UI.Control.InitRecursive(Control namingContainer) +198
   System.Web.UI.Control.InitRecursive(Control namingContainer) +198
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +692

CSS Friendly ASP.NET menu + delay menu dissappear

aikeith — Thu, 19 Nov 2009 17:52:20 GMT

Can someone please help me make sense of all of this?

I wanted to update my menu to use the CSS friendly adapter - no problem thus far. However i want the menu to have a slight delay before dissappearing (in case of accidental mouse out) - from what ive read there is no way to do this with pure CSS - thus the only solution ive found is to remove the :hover behavior from the css class and write the JS - does anyone know of a better way or a way to add this functionality to a css friendly asp.net menu?

Im really struggling with this cause after all is said and done, im seeing very little benefit to using ASP.NET CSS adatper as opposed to just writing my own complete menu that renders the list tags (<ul><li>) and provide the js.

Thanks in advance.

Added CheckBoxAutoPostBack To TreeView Component

gjsduarte — Wed, 18 Nov 2009 12:00:45 GMT

Hi,

I changed the code for the TreeView Adapter in order to perform an optional autopostback when a checkbox is clicked.

private void WriteNodeCheckbox(TreeView treeView, TreeNode item, HtmlTextWriter writer)
		{
			// Added inline div to style both input and label controls on mouse over
			// The original TreeView renders <TD> tags as containers and applies the class to them, 
			// so this is the best way I found to replicate that behavoiur            
			writer.WriteBeginTag("span");
			// Added OnHover Method call
			WriteNodeHoverBehaviour(writer);
			writer.Write(HtmlTextWriter.TagRightChar);

			writer.WriteBeginTag("input");
			writer.WriteAttribute("type", "checkbox");
			writer.WriteAttribute("id", treeView.ClientID + "n" + _checkboxIndex.ToString() + "CheckBox");
			writer.WriteAttribute("name", treeView.UniqueID + "n" + _checkboxIndex.ToString() + "CheckBox");
			if (!String.IsNullOrEmpty(treeView.Attributes["OnClientClickedCheckbox"]))
			{
                //Added functionality to add an AutoPostBack when the checkbox is clicked
                //New code ->>
			    string postbackJava = "";
                if (treeView.Attributes["CheckBoxAutoPostBack"] == "True")
                {
                    const string codePrefix = "c";
                    postbackJava = Page.ClientScript.GetPostBackClientHyperlink(treeView,
                                                                                codePrefix +
                                                                                (Page.Server.HtmlEncode(item.ValuePath)).Replace("/", "\\"), true);
                }
                writer.WriteAttribute("onclick", treeView.Attributes["OnClientClickedCheckbox"] + "; " + postbackJava);
                //End of new code
                //Disabled code ->>
                //writer.WriteAttribute("onclick", treeView.Attributes["OnClientClickedCheckbox"]);
                //End <<-
			}

		    if (item.Checked)
			{
				writer.WriteAttribute("checked", "checked");
			}
			writer.Write(HtmlTextWriter.SelfClosingTagEnd);
            //Added functionality to add image to checkbox node
            //New code ->>
            WriteNodeImage(treeView, item, writer);
            //End <<-
			if (!String.IsNullOrEmpty(item.Text))
			{
				writer.WriteLine();
				writer.WriteBeginTag("label");
				writer.WriteAttribute("for", treeView.ClientID + "n" + _checkboxIndex.ToString() + "CheckBox");
				writer.Write(HtmlTextWriter.TagRightChar);
				writer.Write(item.Text);
				writer.WriteEndTag("label");
			}

			_checkboxIndex++;

			// Close Span
			writer.WriteEndTag("span");
			//
		}

With this you just add the boolean attribute CheckBoxAutoPostBack to control declaration:

<asp:TreeView ID="MyTreeView" runat="server" OnClientClickedCheckbox="CascadeCheckmarks(event)"
    OnTreeNodeCheckChanged="OnCheckChanged" OnAdaptedTreeNodeCheckChanged="OnCheckChanged"
    CssSelectorClass="SimpleEntertainmentTreeView" CheckBoxAutoPostBack="True" ShowCheckBoxes="All">
</asp:TreeView>

CSS Friendly Control Adapters - body onload script not executing??

dkirk — Mon, 16 Nov 2009 16:10:20 GMT

I have added a asp.net menu control to my site and I am using the css friendly control adapters. The menu and css adapters work fine but it has caused a problem with a script that I run when the page loads. Please see below, I have a simple script that I call from the body tag to ensure the client has javascript enabled, since incorporating the menu and css adapters into the site this is no longer working??

Javascript:

function CheckJS()
{
    document.getElementById("content").style.display = 'inline';
}

aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
    <title>Untitled Page</title>
    <link href="App_Themes/CubScouts/MenuStyle.css" rel="stylesheet" type="text/css" />
    <link href="App_Themes/CubScouts/Menu.css" rel="stylesheet" type="text/css" />

    <script src="Leads.js" type="text/javascript"></script>
</head>
<body onload="CheckJS()">
    <form id="form1" runat="server">
    <div>
    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" CssSelectorClass="PrettyMenu" 
         EnableViewState="false" DataSourceID="SiteMapDataSource1">
    </asp:Menu>
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
    </div>
    <noscript>
        <h3>JavaScript Must Be Enabled In Order To Access This Site!</h3>
    </noscript>
    <div id="content" style="display:none">
    this should be displayed if the client has javascript enabled
    </div>
    </form>
</body>
</html>

I can't find 9files .css

vatcharm — Wed, 11 Nov 2009 06:36:45 GMT

I have download CssFriendly_1.0.zip and extract to my machine , But I can't find 9 files (ChangePassword.css,CreateUserWizard.css,DataList.css,FormView.css,GridView.css,Import.css,Login.css,LoginStatus.css,PasswordRecovery.css)

Where is download its?

Help me please.

Horizontal Menu adapter - clear float

isvaljek — Sun, 08 Nov 2009 18:20:29 GMT

How would/do you clear the float of list items inside horizontal menu?

I tried writer.writing a div tag with style clear:both, but it's not output if I place it before the output of only closing div tag I could find in MenuAdapter.cs - ?

How to disable the treeview postback

ahrenck — Fri, 06 Nov 2009 04:26:04 GMT

Whenever I first load the treeview, those node that had child node will display as link node(like a url link), then when click on it, it will refresh (I think it postback, maybe because I am using simple treeview template in the tutorial, where there a label to postback which tree node you had click).

After every link node had been click once, when you click on the tree node again, it wouldn't refresh the page.

At first, I thought it was the tree view adapter fault. Within the TreeViewAdapter, but when comment out the raisepostbackevent sub, the compilar display error.

My question is how to change this into a normal node. How to change it?

Cant find vsi file for CSS Friendly Control Adapters

french_duke — Mon, 05 May 2008 09:47:58 GMT

Hi guys

This is driving me crazy... I cant find the .vsi file for installing the CSS Friendly Control Adapters Project. Does anyone know where I can get this?

The following link: http://www.asp.net/cssadapters/ only leads to the CodePlex wiki where I can download the dll and a partial solution. Essentially, I'm looking for the source code to implement the Menu adapter.

Any help is much appreciated!

Howto use StaticDisplayLevels?

JohnGH — Tue, 03 Nov 2009 08:28:58 GMT

Can someone please explain how to use StaticDisplayLevels with the CSSAdapters?

I'm using build 24242.

So what css adjustment is needed to show for example:

Menu code:

<asp:Menu ID="EntertainmentMenu" runat="server" Orientation="Horizontal" onmenuitemclick="OnClick" CssSelectorClass="SimpleEntertainmentMenu" StaticDisplayLevels="2">
    <Items>
        <asp:MenuItem Text="Home">
            <asp:MenuItem Text="Music">
                <asp:MenuItem Text="Classical" />
                <asp:MenuItem Text="Rock">
                    <asp:MenuItem Text="Electric" />
                    <asp:MenuItem Text="Acoustical" />
                </asp:MenuItem>
                <asp:MenuItem Text="Jazz" />
            </asp:MenuItem>
            <asp:MenuItem Text="Movies" Selectable="false">
                <asp:MenuItem Text="Action" />
                <asp:MenuItem Text="Drama" />
                <asp:MenuItem Text="Musical" />
            </asp:MenuItem>
        </asp:MenuItem>
    </Items>
</asp:Menu>

It should return Home Music and Movies as static Items. I couldn't figure out to do it with just css.

Now I replaced a bit inside the BuildItem function:

if ((item.ChildItems != null) && (item.ChildItems.Count > 0))
{
    BuildItems(item.ChildItems, false, writer);
}


replaced by:

if ((item.ChildItems != null) && (item.ChildItems.Count > 0))
{
    if (item.Depth + 1 < menu.StaticDisplayLevels)
    {
        foreach (MenuItem statItem in item.ChildItems)
        {
            BuildItem(statItem, writer);
        }
    }
    else
	    BuildItems(item.ChildItems, false, writer);
}

But I guess it should be possible to keep the code standard, right??

Trouble with psuedo classes and CSS friendly control adpters?

newbie2C# — Tue, 27 Oct 2009 20:27:38 GMT

I can't seem to figure out why this pseudo class won't work with the control adapters. I have been able to get the hover effect to work using "a:hover" in a tree view that is in the same project.

I'm decorating the same elements successfully in the css above this attempt which proves that the full name reference is correct. I tried a few variations of the same thing but couldn't get it to work.

Does anyone see what I am doing wrong?

.navigation .AspNet-Menu-Horizontal ul.AspNet-Menu a:AspNet-Menu-Link:hover
{
	padding: 7px 15px 6px;
	font-weight: bolder;
}

IE7 Ghost Menu

Megano — Wed, 21 Oct 2009 18:15:23 GMT

Hi!

I have the Ghost Menu bug in project downloaded from http://www.codeplex.com/cssfriendly

I unpuck archive, Copy folders "CSS" and "JavaScript" to "Web" folder and run project.

On the (local)SimpleMenu.aspx in IE7 I have Ghost Menu bug but on http://www.asp.net/CSSAdapters/WalkThru/SimpleMenu.aspx I don't see it.

What I do wrong?

Thanks!

CSS Menu and Security

DrHouseZG — Wed, 14 Oct 2009 12:19:33 GMT

Hi guy's

i'm using CSS Menu on my master page, i have question because this is my first menu from CSS. Can I hide some levels in menu based on security role in web application.

So if user log on site with role= "RN" he need to see just menu "RN", if he is in role = "VIP" he need to see "VIP" and "RN" in menu.

Does anybody have some idea for me, sorry i'm rookie :)

Example:

<li><a href="#nogo2" id="RN" visible="false"><span>Radni nalozi</span></a>

<ul>

<li><a href="#nogo19">Unos radnih sati</a></li>

<li><a href="#nogo20">Pregled radnih sati</a></li>

<li><a href="#nogo21">Prekovremeni</a></li>

</ul>

</li>

<li><a href="#nogo22" id="VP"><span>Voditeljski dio</span></a>

<ul>

<li><a href="#nogo23">Unos planiranih radnih sati</a></li>

<li><a href="#nogo24">Odobrenje prekovremenih</a></li>

<li><a href="#nogo25">Odobrenje fakturiranih</a></li>

</ul>

</li>

<li><a href="#nogo27" id="ADMIN"><span>Administracija</span></a>

<ul>

<li><a href="Uloga.aspx">Uloga</a></li>

<li><a href="#nogo50">Projekata</a></li>

<li><a href="Akcija.aspx">Akcija</a></li>

<li><a href="#nogo52">Djelatnika</a></li>

<li><a href="#nogo52">Tvrtki</a></li>

<li><a href="Drzava.aspx">Država</a></li>

<li><a href="#nogo52">Broj Radnih sati po podružnici</a></li>

<li><a href="#nogo52">Kalendar po podružnici</a></li>

<li><a href="#nogo52">Ažuriranje GO/BO</a></li>

</ul>

</li>

</ul> <ul id="nav">

<li class="top"><a href="#nogo2" id="RN" class="top_link"><span class="down">Radni nalozi</span></a>

<ul class="sub">

</ul>

</li>

<li class="top"><a href="#nogo22" id="VP" class="top_link"><span class="down">Voditeljski dio</span></a>

<ul class="sub">

</ul>

</li>

<li class="top"><a href="#nogo27" id="ADMIN" class="top_link"><span class="down">Administracija</span></a>

<ul class="sub">

</ul>

</li>

</ul>

CSS Friendly horizontal menu - how to make it work in IE6?

g_p_k_ — Sat, 17 Oct 2009 10:07:55 GMT

I'd like some assistance to make the CSS below friendly to IE6. The menu displays correctly in IE8 and Firefox, but simply displays a large blue band across the top of the page. I'd appreciate either additions to the stylesheet or links that'll help me write my own hacks to make it work. Thanks for any help. By the way, I'm trying to make my menu look like this one: HERE

.menustyl
{
    position:relative;
    z-index: 300;
}
.menustyl ul.AspNet-Menu /* Tier 1 */
{
    float: left;
    color:White;
}
.menustyl ul.AspNet-Menu li
{
    border-left: solid 1px #4682B3;
   border-right: solid 1px #4682B3;
   color:White;
}
.menustyl ul.AspNet-Menu ul /* Tier 2 */
{
    width: 14.9em;
    left: 0%;
    background: #4682B3;
    z-index: 400;
}
.menustyl ul.AspNet-Menu ul li /* Tier 2 list items */
{
    width: 14.9em;
    border:1px solid #cccccc;
    float: left;
    clear: left;
    height: 100%;
    color:White;
}
.menustyl ul.AspNet-Menu ul ul /* Tier 3+ */
{
    top:-0.4em;
    left: 15em;
}
.menustyl li /* all list items */
{
    font-size: x-small;
}
.menustyl li:hover, /* list items being hovered over */
.menustyl li.AspNet-Menu-Hover
{
    background: #4682B3;
}
.menustyl a, /* all anchors and spans (nodes with no link) */
.menustyl span
{
    color: White;
    padding: 4px 12px 4px 8px;
    background: transparent url(arrowRight.gif) right center no-repeat;
}
.menustyl li.AspNet-Menu-Leaf a, /* leaves */
.menustyl li.AspNet-Menu-Leaf span
{
    background-image: none !important;
}
.menustyl li:hover a,
.menustyl li:hover span,
.menustyl li.AspNet-Menu-Hover a,
.menustyl li.AspNet-Menu-Hover span,
.menustyl li:hover li:hover a,
.menustyl li:hover li:hover span,
.menustyl li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.menustyl li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
.menustyl li:hover li:hover li:hover a,
.menustyl li:hover li:hover li:hover span,
.menustyl li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.menustyl li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span
{
   color: White;
   background: url(activeArrowRight.gif) #000099 no-repeat right center;
}
.menustyl li:hover li a, /* the tier above this one is hovered */
.menustyl li:hover li span,
.menustyl li.AspNet-Menu-Hover li a,
.menustyl li.AspNet-Menu-Hover li span,
.menustyl li:hover li:hover li a,
.menustyl li:hover li:hover li span,
.menustyl li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,
.menustyl li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span
{
    color: White;
    background: transparent url(arrowRight.gif) right center no-repeat;
}

css Friendly vsi

pthalacker — Sat, 23 Aug 2008 01:30:31 GMT

The first thing that the Walkthrough tells you to do is install the templates from the vsi file. I can find not vsi file in any of the downloads. Are there new instructions? The walkthrough seems fairly dependent on these templates. The Web folder of the files I could find to download don't seem to match what I see in the Walkthrough. What am I missing?

pamela

One of the CSS Firendly Control Adapter menu control problems

swaters210 — Wed, 19 Aug 2009 13:47:02 GMT

Trust me , I did everything I could do. I tried adding z-index values , isolating the menu, rebuilding a new version, adding/removing CSS rules, and experimenting with the sitemap file and I'm still running into this issue:

Everytime the mouse rolls over the drop down menu, the drop down menu disappears before anything can be selected. Here's the site I'm working on: http://websites.rapidts.com/nextlevelistest/

Here's the HTML:

        <div id="navigation">
            <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" 
                Orientation="Horizontal" StaticDisplayLevels="2">
            </asp:Menu>
            <asp:SiteMapDataSource ID="SiteMapDataSource1" ShowStartingNode="False" 
                runat="server" />
        </div>

Here's the web.sitemap file (it doesn't look like your standard sitemap file because the nodes had to be rearrange to accomdate the implementation of the CSS frinedly control adapters. Also , i have a feeling the problem resides in this file.):

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

  <siteMapNode url="#"  title="Home"  description="">

    <siteMapNode url="~/Default.aspx" title="Home" description="Homepage of NextLevel Information Solutions"></siteMapNode>

    <!--About Us Dropdown-->
    <siteMapNode url="" title="About Us"   description="">
      <siteMapNode url="~/AboutUs/ourhistory.aspx" title="Our History"   description=""/>
      <siteMapNode url="~/AboutUs/awards.aspx" title="Awards"   description=""/>
      <siteMapNode url="~/AboutUs/ourstaff.aspx"  title="Our Staff"   description=""/>
      <siteMapNode url="~/NewsLetters/NewsLetterJune09.aspx" title="NewsLetter"   description=""/>
    </siteMapNode>

    <!--Services Dropdown-->
    <siteMapNode url="~/Services.aspx" title="Services"  description="" >
      <siteMapNode url="~/Services/methodology.aspx" title="Implementation Methodology"  description=""/>
      <siteMapNode url="~/Services/training.aspx" title="Training"  description=""/>
      <siteMapNode url="~/Services/tailoredreporting.aspx" title="Tailored Reporting"  description="" />
      <siteMapNode url="~/services/support.aspx#header" title="Support"  description="" />
      <siteMapNode url="~/Services/customprogram.aspx" title="Custom Programming Solutions"  description=""/>
      <siteMapNode url="~/Services/workflow.aspx"  title="Workflow Analysis"  description=""/>
      <siteMapNode url="~/Services/clientcare.aspx" title="Client Care"  description=""/>
    </siteMapNode>
    
    <!--Products Dropdown-->
    <siteMapNode url="~/products.aspx" title="Products"  description="">
      <siteMapNode url="~/Products/accounting.aspx" title="Accounting"  description=""/>
      <siteMapNode url="~/Products/sagecrm.aspx" title="Customer Relationship Mgmt"  description=""/>
      <siteMapNode url="~/Products/ecommerce.aspx" title="eCommerce"  description="" />
      <siteMapNode url="~/Products/fixedassets.aspx" title="Fixed Assets"  description=""/>
      <siteMapNode url="~/Products/humanresourcemanagment.aspx" title="Human Resource Management"  description=""/>
      <siteMapNode url="~/Products/servicejob.aspx" title="Service & Job Cost"  description=""/>
      <siteMapNode url="~/Products/businessintelligence.aspx" title="Business Intelligence"  description="" />
      <siteMapNode url="~/Products/warehousesolutions.aspx" title="Document Imaging"  description=""/>
      <siteMapNode url="~/Products/manufacturingsol.aspx" title="Warehouse Solutions"  description="">
      <siteMapNode url="~/Products/ManufacturingSolutions/customconfig.aspx" title="Custom Configuration" tittle="" description=""/>
      </siteMapNode>
      <siteMapNode url="~/Products/pointofsale.aspx" title="Point of Sale"  description=""/>
      <siteMapNode url="~/Products/electronicinterchange.aspx" title="EDI"  description=""/>
      <siteMapNode url="~/Products/addsageapps.aspx"  title="Additional Sage Accpac Applications" description=""/>
    </siteMapNode>


    <!--Careers, Support, and Contact Links-->
    <siteMapNode url="careers.aspx" title="Careers"   description=""></siteMapNode>
    <siteMapNode url="~/services/support.aspx" title="Support"  description=""></siteMapNode>
    <siteMapNode url="~/Contact.aspx" title="Contact"  description=""></siteMapNode>
    <siteMapNode url="~/PressReleases/pressreleases.aspx#header" title="News & Events"  description="">
    <siteMapNode url="~/PressReleases/pressreleases.aspx" title="Press Releases"  description=""/>
    </siteMapNode>


  </siteMapNode>

</siteMap>

And here's the CSS:

#navigation
{
	margin-left: 13px;
	width: 838px;
	height: 30px;
	background-image: url(../images/navx.png);
	background-position: top left;
	background-repeat: repeat-x;	
}

/*

This file should contain SUPPLEMENTAL rules that are recognized and used only by IE.
Similar files can be produced, as needed, for other browsers.  Whatever selectors are
listed here should be listed in at least one other CSS file used in the current ASP.NET
theme (thus making these supplemental).  The implementation pattern is to add new props
to some existing rule or to override (using important) some property.

*/

ul.AspNet-Menu li
{
    float: left !important;
    height: 1% !important;

}



ul.AspNet-Menu li a,
ul.AspNet-Menu li span
{
    height: 1% !important;
    color:#fff;
    font-weight:bold;
    font-size:13px;
    font:verdana, arial, sans-serif;
    padding:5px 10px 9px 10px;
    border-right:1px #2F455F solid;
}

ul ul a.AspNet-Menu-Link{width:275px; padding:5px 0 5px 5px;  border-bottom:1px #18314F solid;}
ul ul a:hover.AspNet-Menu-Link{width:275px;padding:5px 0 5px 5px;  background:#124273;color:#ccc;text-decoration:underline;}

ul.AspNet-Menu li a:hover
{
	color:#ccc; 
	position:relative;
    z-index:1000;
}

.AspNet-Menu-Horizontal ul.AspNet-Menu li li
{
    float: left !important;
}

/* Undoing rules used for IE7 and other browsers. */

ul.AspNet-Menu ul
{
    visibility: visible !important;    
 
}

ul.AspNet-Menu li:hover ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
{
    visibility: visible !important;  
}

ul.AspNet-Menu li:hover ul,
ul.AspNet-Menu li li:hover ul,
ul.AspNet-Menu li li li:hover ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
{
    visibility: visible !important;  
    background:#122742;
    color:#fff;   
    width:280px;
    display:block;

}



ul.AspNet-Menu li:hover ul ul{margin-left:280px;margin-top:-10px;}

Please let me know if i'm missing something. Any help will be appreciated :-)

GridView - add attribute problem with CSS Friendly Adapters turned on.

wamprat — Fri, 25 Sep 2009 01:39:02 GMT

I have a gridview with friendly adapters enabled, the gridview is within an update panel.

I have used the onRowDataBound event to color code the rows dependent upon a value and this works fine by assigning classnames.

I would like to also have the row color change with a mouseover event. Now I have used some samples on the internet but have failed to make it work. In the end I disabled the friendly adapter on the gridview and the row coloring started working. When looking at the page source, with friendly adapters enabled the attribute is just not added.

So there appears to be some issue adding attributes to a gridview row with css friendly adapters enabled.

Does anyone know how to get the onmouseover attribute added to a row in a gridview with css friendly adapters enabled?

Below is the code I am using in the RowCreated event handler

Protected Sub GridView_Institutes_RowCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView_Institutes.RowCreated

If e.Row.RowType = DataControlRowType.DataRow Then
            ' when mouse is over the row, save original color to new attribute, and change it to highlight yellow color
            e.Row.Attributes.Add("onmouseover", "this.originalClassName=this.className; this.className='gridViewRowMouseOver';")
            ' when mouse leaves the row, change the bg color to its original value
            e.Row.Attributes.Add("onmouseout", "this.className=this.originalClassName;")
        End If
End Sub

Cheers

Wizard control adapter with sidebar on top

verinder — Wed, 15 Nov 2006 04:17:39 GMT

Hi all,

I want to move the sidebar to top in wizard control. How to do that??? I know control adapters can help but it is too tough to write those. Let me know how to do that. Any other solution is also welcome.

please help!

verinder

Vertical menu, width 100% - how to do it?

Pettt[cz] — Mon, 21 Sep 2009 13:24:44 GMT

I have a vertical menu:

- menu item
- another here
- and one more
- last

Its a simple text menu, no DIV boxes, borders, backgrounds.
Menu loads from DB, and I cant anticipate what the width of the widest menu item will be.
I simply want the second (third) level left to render on the width of the parent.

I can't seem to figure out how to do it in the css :O-

thx Pettt

Chrome only renders menu first time

cbspira — Fri, 26 Jun 2009 16:17:15 GMT

I've been searching for this several days - I'm hoping someone out there can help.

I'm using the css friendly menu adapter on a master page. It looks fine on IE7 and Firefox. My problem is with Chrome - it only renders properly the first time the page is loaded after launching the VWD dev server - as soon as I click on a menu item or even just reload the page the menu looks like a poor rendition of the asp:menu control. I've even ascertained that something is different because the "view source" for the page is different - the first load it has the menu as expected, with ul and li - and with subsequent loads it is rendered as a table.

As per my multiple searches, I've added the Request.Browser.Adapters.Clear() fix to the page load of the master page. This helped render the asp:menu control to begin with (before this the submenu items would display with the word "Expand" that then had to be clicked)

I also tried using the ClientTarget="uplevel" fix to the pre-init of a single page (to test it out) - did not appear to make a difference here either.

I'm imagining that if I'm having this problem with Chrome then it's a problem with Safari as well, so I would like to get this issue resolved...

Thanks,

Menu Postback within a WebControl

akleinek — Fri, 18 Sep 2009 07:32:29 GMT

I want to get the postbacks of a menu inside a webcontrol. The postback works as it should, in case I put the event handler in the page. However, it does not work, if the handler in declared inside a webcontrol. There was the same issue with the treeview, but I found a fix in this forum. Do anyone fixed the issue for the menu either?

Menu-items hangs.

SkalleBank — Wed, 16 Sep 2009 14:19:05 GMT

Hi,

When using the css friendly control adapter on the asp:menu, the submenues seem to stuck on page somehow. anyone else experienced this? ...or is it perhaps my css making the problem...

What i do:

1. i hover over a subelement in the menu

2. then exist the menu by moving the mouse-cursor to the right

3. then i hover above the main menu element.

as you can see, the boxes are there, but the text are gone. when i choose any other subelements within this menu-element, the empty boxes lays on top, and i am not able to access the submenus.

link to the css

ASP.Net 3.5 Parser Error with CSS Friendly adapter

dgrumbli — Mon, 03 Dec 2007 02:56:53 GMT

I’ve been using CSS friendly adapters for my menu for over a year now with no problems. I just had my development site moved from a server with ASP.Net 2.0 to a server with ASP.Net 3.5. I am now getting the following error when I try to open the site in a browser. Has anyone seen this or have any idea what I should look for to fix the problem. I reloaded the site to see if I could make the problem go away but I get the same error.

Server Error in '/' Application.

Parser Error

Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

Parser Error Message: Data at the root level is invalid. Line 1, position 1.

Source Error:

Line 1:  <browsers>

Line 2:    <browser refID="Default">

Line 3:      <controlAdapters>

Source File: /App_Browsers/CSSFriendlyAdapters.browser Line: 1

Version Information: Microsoft .NET Framework Version:2.0.50727.1433; ASP.NET Version:2.0.50727.1433

User can only select child of branch at time - treeview

hapytran — Sat, 05 Sep 2009 03:32:35 GMT

Hi All,

I have a treeview like this:

[-] Node1
   [] Child1
   [] Child2
   [] Child3
   [] Child4
[-] Node2
   [] Child1
[-] Node3
   [-] Child1
       [] Childx
       [] Childy
   [+] Child2
[-] Node4
   [-] Child1
       [-] Child2
           [+] Child3
       [] Child4
       [] Child5
   [] Child6
   [] Child7

At time, Can we force user works only on one branch of tree. For example, if user check one child of "Node1" (or multi), uncheck all child nodes of "Node2", "Node3", "Node4". Apply same for Node2, Node3, ...

Thanks for help.

Eric.

Can not check first checkbox in this case (see image attached)

hapytran — Fri, 04 Sep 2009 11:01:38 GMT

Hello All,

Please see attached image below for my situation. I can not check first checkbox.

Any comments?

Regards,

Eric.