Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Re: Change link sensivity area using CSS

Reply
Thread Tools

Re: Change link sensivity area using CSS

 
 
123Jim
Guest
Posts: n/a
 
      12-02-2010

"Mojo" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> Some of my users have complained that the main menu dropdown can be
> triggered too easily by having your mouse button below the menu.
>
> http://www.boldplan.com/s/tiny/dbE3C6
>
> So if you try to click on the browse categories area or other
> selection on the sub nav bar, you sometimes might trigger the main
> menu. I'm not sure how to move the hyperlink sensitivity up without
> affecting the actual placement of the text link itself. I'm hoping
> someone can give me an insight as to an idea we can do to change this.
> Thank you.


in your css you have:

#navigation ul li {
background: none no-repeat scroll right top transparent;
display: inline;
float: left;
height: 42px;
list-style: none outside none;
width: 151px;
}

Try changing: height: 42px; to> height: 32px;


 
Reply With Quote
 
 
 
 
123Jim
Guest
Posts: n/a
 
      12-02-2010

"123Jim" <(E-Mail Removed)> wrote in message
news:id8tvn$pup$(E-Mail Removed)-september.org...
>
> "Mojo" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
>> Some of my users have complained that the main menu dropdown can be
>> triggered too easily by having your mouse button below the menu.
>>
>> http://www.boldplan.com/s/tiny/dbE3C6
>>
>> So if you try to click on the browse categories area or other
>> selection on the sub nav bar, you sometimes might trigger the main
>> menu. I'm not sure how to move the hyperlink sensitivity up without
>> affecting the actual placement of the text link itself. I'm hoping
>> someone can give me an insight as to an idea we can do to change this.
>> Thank you.

>
> in your css you have:
>
> #navigation ul li {
> background: none no-repeat scroll right top transparent;
> display: inline;
> float: left;
> height: 42px;
> list-style: none outside none;
> width: 151px;
> }
>
> Try changing: height: 42px; to> height: 32px;
>


ah yes .. you mighr also need to add
[marging-bottom: 10px; ]
to #navigation ul li {
and [ margin-bottom: 0px ]
to: #navigation ul li ul li {

play around with it and you will find out why


 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-03-2010
Mojo wrote:
> On Thu, 2 Dec 2010 21:58:59 -0000, "123Jim"
> <(E-Mail Removed)> wrote:
>
>>
>> "123Jim"<(E-Mail Removed)> wrote in message
>> news:id8tvn$pup$(E-Mail Removed)-september.org...
>>>
>>> "Mojo"<(E-Mail Removed)> wrote in message
>>> news:(E-Mail Removed)...
>>>> Some of my users have complained that the main menu dropdown can be
>>>> triggered too easily by having your mouse button below the menu.
>>>>
>>>> http://www.boldplan.com/s/tiny/dbE3C6
>>>>
>>>> So if you try to click on the browse categories area or other
>>>> selection on the sub nav bar, you sometimes might trigger the main
>>>> menu. I'm not sure how to move the hyperlink sensitivity up without
>>>> affecting the actual placement of the text link itself. I'm hoping
>>>> someone can give me an insight as to an idea we can do to change this.
>>>> Thank you.
>>>
>>> in your css you have:
>>>
>>> #navigation ul li {
>>> background: none no-repeat scroll right top transparent;
>>> display: inline;
>>> float: left;
>>> height: 42px;
>>> list-style: none outside none;
>>> width: 151px;
>>> }
>>>
>>> Try changing: height: 42px; to> height: 32px;
>>>

>>
>> ah yes .. you mighr also need to add
>> [marging-bottom: 10px; ]
>> to #navigation ul li {
>> and [ margin-bottom: 0px ]
>> to: #navigation ul li ul li {
>>
>> play around with it and you will find out why
>>

>
> Worked like a charm. Changed the height to 28 in both the ul and the
> li tags. Many thanks. Now everyone is happy. I didn't need to change
> the margins.


Really? If your intention is to prevent anyone from selecting anything
from a submenu then it "worked". Also as I recall someone warned you
about using pixels to define blocks containing text. Have you seen what
happens when you bump the text size up just once? The submenus drop down
out of reach... Was going to check the CSS but hunting through 65KB was
a bit too much. There are plenty of simple horizontal menu from a list
examples out there what work.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-03-2010
Jonathan N. Little wrote:
> There are plenty of simple horizontal menu from a list
> examples out there what work.
>


Here is one simple example with typical caveats

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Horizonal Menu</title>

<style type="text/css">

/* JavaScript will be required for IE6 support */
ul.menu, ul.menu * { list-style: none; margin: 0; padding: .2em; }
ul.menu li { display: inline; position: relative; white-space:
nowrap; line-height: 1.4; }
ul.menu li ul { position: absolute; display: none; z-index: 1}
ul.menu li ul li { display: block; }

/* IE7 needs a tweak on the top position */
ul.menu li:hover ul { display: block; left: 0; top: 1.4em; z-index: 2}

/* colorized just for demonstration */
ul.menu { background: #eef; }
ul.menu li { background: #efe; }
ul.menu li ul { background: #fee; }
ul.menu li ul li { background: #fef; }
ul.menu a { background: #eee; }

</style>

</head>
<body>


<ul class="menu">
<li>
<a href="#">A Link That Is Long</a>
<ul>
<li>
<a href="#">A Submenu Link 1</a>
</li>
<li>
<a href="#">A Submenu Link 2</a>
</li>
<li>
<a href="#">A Submenu Link 3</a>
</li>
</ul>
</li>

<li>
<a href="#">Another Link</a>
<ul>
<li>
<a href="#">Submenu A</a>
</li>
<li>
<a href="#">Submenu A</a>
</li>
</ul>
</li>

<li>
<a href="#">A Link</a>
</li>

<li>
<a href="#">A Link Too</a>
</li>

<li>
<a href="#">A Link</a>
<ul>
<li>
<a href="#">Foo</a>
</li>
<li>
<a href="#">Bar</a>
</li>
<li>
<a href="#">Baz</a>
</li>
</ul>
</li>

<li>
<a href="#">A Link</a>
</li>

</ul>

</body>
</html>


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      12-03-2010
Jonathan N. Little wrote:

> "Mojo"<(E-Mail Removed)> wrote:
>>>> "Mojo"<(E-Mail Removed)> wrote:
>>>>> http://www.boldplan.com/s/tiny/dbE3C6


Why do you post this redirecting link instead of thelawyers.com URL?

>> Worked like a charm. Changed the height to 28 in both the ul and the
>> li tags. Many thanks. Now everyone is happy. I didn't need to change
>> the margins.

>
> Really? If your intention is to prevent anyone from selecting anything
> from a submenu then it "worked". ...


It doesn't work at all for me, in several browsers. Hovering the main
menu items (Find Lawyers/Ask Lawyers/Legal Forms...) drops a submenu,
but as soon as I move the mouse towards the submenu(s) it/they disappear
and are completely unselectable.

Firefox/SeaMonkey/Opera/Dillo... (there is no IE here)

--
-bts
-Four wheels carry the body; two wheels move the soul
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      12-03-2010
In article <idb358$oto$(E-Mail Removed)-september.org>,
"Jonathan N. Little" <(E-Mail Removed)> wrote:

> Jonathan N. Little wrote:
> > There are plenty of simple horizontal menu from a list
> > examples out there what work.
> >

>
> Here is one simple example with typical caveats
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> <title>Horizonal Menu</title>
>
> <style type="text/css">
>
> /* JavaScript will be required for IE6 support */


At the risk of sounding like a broken record, if js is off for an
IE6 user, it should be no drama if the top link goes to a page
where the sub menu links appear as a submenu. Thus

DOGS
Alsatian
Collie
Poodle

should at least enable DOGS to be a link to the group of pages
about dogs, it might not even be to a section head page called
dogs but straight to Alsatian; all the dogs would have a local
menu.

This point really also applies more broadly: such a strategy
makes it non-essential that the drop down works or is wanted (css
off or the user hates the damn things or cannot use it for
physical reasons.)

--
dorayme
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-03-2010
dorayme wrote:
> In article<idb358$oto$(E-Mail Removed)-september.org>,
> "Jonathan N. Little"<(E-Mail Removed)> wrote:
>
>> Jonathan N. Little wrote:
>>> There are plenty of simple horizontal menu from a list
>>> examples out there what work.
>>>

>>
>> Here is one simple example with typical caveats
>>
>> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
>> "http://www.w3.org/TR/html4/strict.dtd">
>> <html>
>> <head>
>> <title>Horizonal Menu</title>
>>
>> <style type="text/css">
>>
>> /* JavaScript will be required for IE6 support */

>
> At the risk of sounding like a broken record, if js is off for an
> IE6 user, it should be no drama if the top link goes to a page
> where the sub menu links appear as a submenu. Thus
>
> DOGS
> Alsatian
> Collie
> Poodle
>
> should at least enable DOGS to be a link to the group of pages
> about dogs, it might not even be to a section head page called
> dogs but straight to Alsatian; all the dogs would have a local
> menu.
>
> This point really also applies more broadly: such a strategy
> makes it non-essential that the drop down works or is wanted (css
> off or the user hates the damn things or cannot use it for
> physical reasons.)
>


Should to that anyway. In fact we should advocate no dropdown menu I
just making it clear for folks who expect everything to be "exactly" the
same in every browser...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      12-03-2010
Beauregard T. Shagnasty wrote:
> Jonathan N. Little wrote:
>
>> "Mojo"<(E-Mail Removed)> wrote:
>>>>> "Mojo"<(E-Mail Removed)> wrote:
>>>>>> http://www.boldplan.com/s/tiny/dbE3C6

>
> Why do you post this redirecting link instead of thelawyers.com URL?
>
>>> Worked like a charm. Changed the height to 28 in both the ul and the
>>> li tags. Many thanks. Now everyone is happy. I didn't need to change
>>> the margins.

>>
>> Really? If your intention is to prevent anyone from selecting anything
>> from a submenu then it "worked". ...

>
> It doesn't work at all for me, in several browsers. Hovering the main
> menu items (Find Lawyers/Ask Lawyers/Legal Forms...) drops a submenu,
> but as soon as I move the mouse towards the submenu(s) it/they disappear
> and are completely unselectable.
>
> Firefox/SeaMonkey/Opera/Dillo... (there is no IE here)
>


Don't have Dillo but it doesn't work in IE either. Somethings if you
shake the mouse jussst-riiiight it will "work". The OP's CSS file if you
look at it is a perfect example of "more is less"!

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      12-03-2010
Jonathan N. Little wrote:

> Beauregard T. Shagnasty wrote:
>> Jonathan N. Little wrote:
>>> "Mojo"<(E-Mail Removed)> wrote:
>>>>>> "Mojo"<(E-Mail Removed)> wrote:
>>>>>>> http://www.boldplan.com/s/tiny/dbE3C6

>>
>> Why do you post this redirecting link instead of thelawyers.com URL?
>>
>>>> Worked like a charm. Changed the height to 28 in both the ul and
>>>> the li tags. Many thanks. Now everyone is happy. I didn't need to
>>>> change the margins.
>>>
>>> Really? If your intention is to prevent anyone from selecting
>>> anything from a submenu then it "worked". ...

>>
>> It doesn't work at all for me, in several browsers. Hovering the
>> main menu items (Find Lawyers/Ask Lawyers/Legal Forms...) drops a
>> submenu, but as soon as I move the mouse towards the submenu(s)
>> it/they disappear and are completely unselectable.
>>
>> Firefox/SeaMonkey/Opera/Dillo... (there is no IE here)

>
> Don't have Dillo but it doesn't work in IE either. Somethings if you
> shake the mouse jussst-riiiight it will "work".


Reading that, I went back to the page. I can get one of the dropdowns
(Law Profession) to actually open if I -- very quickly -- shake the
mouse sideways and down at the same time. About a third of the time,
I'll get to use the submenu. It's the same on several other (probably
all) pages at the site. What good is a site that can't be navigated?

> The OP's CSS file if you look at it is a perfect example of "more is
> less"!


67KB of it! ... in a unmaintainable format, to boot.

--
-bts
-Four wheels carry the body; two wheels move the soul
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      12-03-2010
In article <idbpjt$aqq$(E-Mail Removed)-september.org>,
"Jonathan N. Little" <(E-Mail Removed)> wrote:

> dorayme wrote:

....
> > At the risk of sounding like a broken record, if js is off for an
> > IE6 user, it should be no drama if the top link goes to a page
> > where the sub menu links appear as a submenu. Thus
> >
> > DOGS
> > Alsatian
> > Collie
> > Poodle
> >
> > should at least enable DOGS to be a link to the group of pages
> > about dogs, it might not even be to a section head page called
> > dogs but straight to Alsatian; all the dogs would have a local
> > menu.
> >
> > This point really also applies more broadly: such a strategy
> > makes it non-essential that the drop down works or is wanted (css
> > off or the user hates the damn things or cannot use it for
> > physical reasons.)
> >

>
> ... In fact we should advocate no dropdown menu


No need to go that far if vot I say above is carried out! The
main problem, as I see it, of advocating no dropdown menus is
that Ed Mullens will have kittens.

--
dorayme
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: Change link sensivity area using CSS idle HTML 0 12-02-2010 10:38 PM
Re: Change link sensivity area using CSS C A Upsdell HTML 0 12-02-2010 08:11 PM
MVC2: linking from one area view to another area view Andy B. ASP .Net 0 04-30-2010 07:46 AM
do structure definitions go in data area or in code area... hotadvice C Programming 14 10-02-2007 04:10 AM
Add point to graphics area without having to paint the whole area? Mark Java 1 06-27-2005 03:09 AM



Advertisments