Navigation Menu works only when clicking text

  • Thread starter Thread starter Andrew Corley, MCSD, MCDBA
  • Start date Start date
A

Andrew Corley, MCSD, MCDBA

sWe have a 3.5 Framework website with a site map-based navigation menu.

The navigation menu displays the correct content and the navigation event
occur when the user clicks on the text portion of the navigation menu.

However, if the user clicks in the menu area but no directly on the text,
navigation does not take place. See text example below, clicking anywhere on
the text "Menu Item" causes a navigation event, but clicking in the blank
area of the menu item after the text does not cause navigation.

[Menu Item ]

Works the same on IE 6 and IE 7. Anyone else had this issue and resolved it?
 
sWe have a 3.5 Framework website with a site map-based navigation menu.

The navigation menu displays the correct content and the navigation event
occur when the user clicks on the text portion of the navigation menu.

However, if the user clicks in the menu area but no directly on the text,
navigation does not take place. See text example below, clicking anywhereon
the text "Menu Item" causes a navigation event, but clicking in the blank
area of the menu item after the text does not cause navigation.

[Menu Item       ]

Works the same on IE 6 and IE 7. Anyone else had this issue and resolved it?

--
Respectfully,

Andrew Corley
MCSD, MCDBA, Master CIW Designer
Click to expand...

Hi
you got to set the menu's items style in such a way so that the menu
item take full space in the inner content
Just use all menus are rendered in side a table...

set the style such as

width:100%;
float:left;

apply this style to static or dynamic menu style or perhaps directly
on <a> tags

like

..mymenustyle a
{
width:100%;
float:left;
}

best of luck

Masudur
 
Just use all menus are rendered in side a table...

No need for a table.

A tags, by default, are inline, so only take up the space needed for the
text.

If you want the 'white space' to be clickable, you need to make it a block
level element:

a.yourNavClass {
display: block;
width: whatever;
height: whatever;
}
 
Thanks, but setting the width on the dynamic style did not make the entire
navigation area clickable.
--
Respectfully,

Andrew Corley
MCSD, MCDBA, Master CIW Designer


Munna said:
sWe have a 3.5 Framework website with a site map-based navigation menu.

The navigation menu displays the correct content and the navigation event
occur when the user clicks on the text portion of the navigation menu.

However, if the user clicks in the menu area but no directly on the text,
navigation does not take place. See text example below, clicking anywhere on
the text "Menu Item" causes a navigation event, but clicking in the blank
area of the menu item after the text does not cause navigation.

[Menu Item ]

Works the same on IE 6 and IE 7. Anyone else had this issue and resolved it?

--
Respectfully,

Andrew Corley
MCSD, MCDBA, Master CIW Designer
Click to expand...

Hi
you got to set the menu's items style in such a way so that the menu
item take full space in the inner content
Just use all menus are rendered in side a table...

set the style such as

width:100%;
float:left;

apply this style to static or dynamic menu style or perhaps directly
on <a> tags

like

..mymenustyle a
{
width:100%;
float:left;
}

best of luck

Masudur
Click to expand...
 
Thanks, this did produce a visual change, but the clickable area is still
only the text.
 
For the site map navigation menu to have larger clickable area, two changes
had to be made:

(1) add attributes to the asp:Menu control to pad spaces to the right
DynamicItemFormatString="{0, -19}"
StaticItemFormatString="{0, -19}"
(2) In the CSS file for the themes, preserve the white spaces
white-space:pre;


The clickable area is larger, but still not the entire button width. Padding
to the right more than the value above increases the width of the menu, which
we do not want.
 
Back
Top