Banner til Freewatch

Horisontale menuer i C#

For tiden bruger jeg to forskellige horisontale hover menuer (hvor en større menu vises når musen føres over et område) i C# løsninger. Begge metoder er tidssvarende og fremtidssikrede.

CSS-hover menu med flere kolonner

På History Watch bruges en CSS-hover menu, som kan vise flere kolonner. Jeg synes løsningen er grafisk flot og overskuelig.
Jeg har analyseret data fra Analytic, som viser at menuen i dette tilfælde er særdeles anvendelig.

Xml genereret menu

Her på Freewatch bruges asp:menu, som henter data fra et web.sitemap (en xml-fil).

Menuen er linket til en navigationshjælp, som laver en link-sti tilbage til forsiden(Se under logoet øverst til venstre).

Denne menu har gennem tiderne givet mig en række browser kompabilitets problemer, i forhold til den tidligere mest brugte metode. Jeg vil godt videregive løsningerne til IE8 og Google Chrome.

Ie8

I IE8 er det et CSS-problem, der gør at menuen vises som blank. Løsningen er at lægge dataen fra hover-menuen i et z-lag.

.IE8Fix
{
z-index: 100;
}

<DynamicMenuStyle CssClass="IE8Fix" />

Jeg kendte brugen af cssclass før problemet, hvilket er en mulighed som klart har forbedret denne menus anvendelsesmuligheder, da menuen kan styles bedre.

Google Chrome

Her blev hover menuen ikke vist, grundet problemer med autopostback eller stackoverflow. Løsningen er at tilføje følgende kode i page_load. Da jeg bruger en usercontrol med separat codebehind-fil, så er det i denne jeg anbragte koden. Form skulle også have en tilføjelse.

protected void Page_Load(object sender, EventArgs e)
{
if (Request.UserAgent.IndexOf("AppleWebKit") > 0)
{
Request.Browser.Adapters.Clear();
}
}

<form id="form1" runat="server">
<input type="hidden" name ="__EVENTTARGET" value =""/>
<input type="hidden" name ="__EVENTARGUMENT" value =""/>

Så levede jeg lykkeligt til løsningen holdt op med at virke, da den dynamiske menu først virker efter anden visning.

Følgende javascript "saved the day"
<script language='text/javascript' type='text/javascript'>__doPostBack('__Page', 'MyCustomArgument')</script>

Nogle betragter language attributen som outdated, men den skal være tilstede for at scriptet virker!

En sydafrikaners problem med samme bug kan læses her
Skip Navigation LinksForsideHjemmesiderHorisontal menu

Navigationsstien som kommer fra samme datasource som menuen

CSS menu

Sådan ser den nævnte CSS-menu ud. Billedet gør ikke menuen ære, så se den på History Watch

Fejlen i Google Chrome

Fejlen i Google Chrome

Fejlen i Internet Explore 8

Fejlen i Internet Explore 8