Jump to content

Making "mouseover" navigation buttons linkable


hanashite

Recommended Posts

I'm trying to modify an "accordion" type navigation menu so that some of the buttons are linkable. I've figured out how to do this in HTML, but then you have to click on the text on the button. I want to be able to click anywhere on the button.

Can this be done by modifying the CSS code somehow? The buttons already change their looks whenever a "mouseover" is detected, so I'm thinking this function can also be used with a , but I'm afraid my CSS skills aren't good enough to figure it out myself.

 

Here's my navigation menu so far.

I would like the "Home" and "Contact" buttons to link to somewhere else.

Edited by hanashite
Link to comment
Share on other sites

To do this, you'll need to add some code to the menu... For example, to add a home link, you'll need to:

 

-- add an "a" tag around your Home text like this:

 

Home

 

-- then style the a tag in the CSS so that it takes up the full button (using display:block, and giving it a height and width):

 

#home-header a { display:block; height:20px; width: 190px; }

 

-- then add some minor styling to remove text color change and border:

 

#home-header a:link, #home-header a:visited { color: #7D7D7D; border:0; }
#home-header a:hover, #home-header a:active { color: #7D7D7D; border:0; }

 

That should get you started... Try that, and let me know if you run into any issues.

Link to comment
Share on other sites

It worked! Thanks :)

Some minor cosmetical issues however, and in the meantime I came across another solution which also seems to work:

 

Home

 

The above doesn't display the URL when hovering over the button, but I guess I can live with that.

Your solution worked fine, but it breaks the appearance of the buttons' text as previously set up in the CSS code:

 

.df_menu_head:hover{
background:        gray url(../images/button_mouseover.gif) no-repeat 0 0;
color:            white;
font-weight:    bold;
}

(any idea why inserting code here puts a blank line in between each line-break?)

 

The second issue is that when I click on the button a dotted white rectange surrounds it. I seem to recall having read about this issue somewhere and that there's an easy fix for it, but can't remember how and where. It might also be a browser issue for all I know.

I was going to ask you what the disadvantage of using the other solution I found is, but I figured that one out easily: it won't let the user click on the button unless Javascript is switched on. At least for the rest of the navigation system it works if Javascript is off (all the buttons are shown expanded, which doesn't look nice, but it allows the user to navigate).

 

So all in all your solution is probably the most user-friendly one. I'll see if I can reapply the code to sort out those issues.

Link to comment
Share on other sites

The second issue is that when I click on the button a dotted white rectange surrounds it. I seem to recall having read about this issue somewhere and that there's an easy fix for it, but can't remember how and where. It might also be a browser issue for all I know.

 

a {

outline:0;

}

 

Que Kyle... :)

Edited by Eric
Link to comment
Share on other sites

It worked! Thanks :)

Some minor cosmetical issues however, and in the meantime I came across another solution which also seems to work:

 

Home

 

The above doesn't display the URL when hovering over the button, but I guess I can live with that.

Your solution worked fine, but it breaks the appearance of the buttons' text as previously set up in the CSS code:

 

.df_menu_head:hover{
background:        gray url(../images/button_mouseover.gif) no-repeat 0 0;
color:            white;
font-weight:    bold;
}

(any idea why inserting code here puts a blank line in between each line-break?)

 

The second issue is that when I click on the button a dotted white rectange surrounds it. I seem to recall having read about this issue somewhere and that there's an easy fix for it, but can't remember how and where. It might also be a browser issue for all I know.

I was going to ask you what the disadvantage of using the other solution I found is, but I figured that one out easily: it won't let the user click on the button unless Javascript is switched on. At least for the rest of the navigation system it works if Javascript is off (all the buttons are shown expanded, which doesn't look nice, but it allows the user to navigate).

 

So all in all your solution is probably the most user-friendly one. I'll see if I can reapply the code to sort out those issues.

 

If you link them like this, you will also shut out any user who doesn't have Javacript. So - no mobile phone users, noone who has NoScript on Firefox, probably no users with severe visual impairment, etc.

 

Are you prepared to lose up to 10% of your web traffic, depending on whose statistics you believe?

Link to comment
Share on other sites

If you link them like this, you will also shut out any user who doesn't have Javacript. So - no mobile phone users, noone who has NoScript on Firefox, probably no users with severe visual impairment, etc.

 

Are you prepared to lose up to 10% of your web traffic, depending on whose statistics you believe?

 

Seems to degrade well to me...

Link to comment
Share on other sites

The second issue is that when I click on the button a dotted white rectange surrounds it. I seem to recall having read about this issue somewhere and that there's an easy fix for it, but can't remember how and where. It might also be a browser issue for all I know.

 

a {

outline:0;

}

 

Que Kyle... :)

 

You beat me to it!

I found the problem/solution here. However I also read that it removes the keyboard navigation. Then again there's a solution for it, but it doesn't seem to work for me (the dotted line is still there):

a:active
{
 outline: none;
}

Why won't that work?

I'm using Firefox 3.0.5. on a Mac.

 

lwsimon: I've always tried to make my web pages usable for anyone, so shutting out those without Javascript isn't an option.

Link to comment
Share on other sites

I use border: 0 rather than outline... but same effect and whichever is fine.

 

Only real issue is keyboards. If there is a rollover, all is fine. If there is no rollover you should never remove the dotted outline as it is the only way a person knows which link they are on tabbing through the navigation quickly with the keyboard. So you must always have some way the user can tell where they are when tabbing through links. If uit has a rollover, yea, kill the border around them.

Link to comment
Share on other sites

Happy new year all!

 

When you talk about keyboard navigation, are you referring to the TAB key (and ALT-TAB to go back) which jumps from one link to the other and "highlights" the active link with a dotted rectangle?

And is my understanding correct that it's possible for the rectangle to be present (around the links in my text-contents as well as the navigation buttons) when the user presses TAB (or ALT-TAB), but when the mouse is used the dotted rectangles will no longer be shown?

Link to comment
Share on other sites

I must be doing something wrong here because no matter what I do I seem to either get a dotted box when clicking the button with the mouse AND when navigating between the linked buttons (and other links) using TAB, or no dotted box with either navigation method.

 

Among the many different solutions I've tried, here's the one I'm currently working on:

/* Linked buttons: Mouseover response */
a:hover {
outline:    0;
}    

/* Linked buttons when keyboard-navigated (using TAB, CTRL-TAB) */
a:focus {
outline:    dotted thin;
}   

/* Link state in moment of mouse-clicking */
a:active {
outline:    0;
}

 

 

From what I understand this tells every "a" HTML tag (URL links) that it should have no dotted box (outline) when the mouse pointer hovers over it (a:hover), no dotted box when the link is clicked on (a:active), but the box should be present when navigating with the TAB keys (a:focus).

Link to comment
Share on other sites

I'm not sure you are going to be able to fix this -- it seems like either you can remove the outline entirely, or keep the outline, but you can't have no outline during regular use and only use the outline when using tab / Control-tab. I did some experimentation, and I don't have a solution either, unfortunately.

 

Perhaps there is a javascript solution, but it seems that would be adding unnecessary weight to a page for a minor visual effect.

 

In my case, I tend to keep the outline on, with the exception of my main menu, where I turn it off (this is assuming that the menu has a rollover state, so users who navigate via the keyboard don't get confused.)

Link to comment
Share on other sites

I've run across a JS solution in the past. But like you said, I don't think it's worth it. I believe FX3 must have changed how it handles a:active{outline:0;} because that did work in the past. I just did a quick Google, and see that many other sites are now advertising the wrong info.

 

Just do this and then you have no dotted outline but still have some sort of change for keyboard users. That makes all happy. And no, you don't have to use a:link. Just using "a" is better anyways. And if you don't want a change for a:visited, then you don't have to specify it.

 

a {

outline:0;

}

a:active, a:focus, a:hover {

color:#000;

}

Edited by Eric
Link to comment
Share on other sites

Yes, i've heard about a Javascript solution as well involving "blur", but as I currently know nothing about JS I'll stick with your solution for now.

 

In the meantime I've been looking at the rest of the code and could need a few pointers.

Here's my updated navigation menu.

You can click on the Home, Page 2, Page 3 and Download buttons which will lead you to those pages.

When you click on the Download button you further chose a sub-category which are the actual links.

 

As you can see I've used the "Header_highlight" string to highlight (with a blue underlining) which menu section you're currently at. Unfortunately this doesn't work for a sub-category's link (to test this, click on the "Download" button (which opens up a selection), then click on one of the 3 links).

Is there a way I can highlight one of those links?

 

Next, as you can see, only the "Home" button works the way I want it to regarding linked buttons (the whole button is clickable -actually it isn't, but that's another issue. Read on) and not just the linked text (as in the "Page 2" and "Page 3" buttons).

Instead of definining each and every button on their own in the CSS code, like this:

/* Button with link (define clickable area) */
#home-header a {
display:        block; 
height:          20px; 
width:              190px;
text-decoration: none;
color:            #7D7D7D;
   }


/* Button with link (text style/color when already visited) 
#home-header a:link, #home-header a:visited { 
color:     #7D7D7D; */
/* Remove dotted outline of button links in Firefox     
border:    none; 
   } */


/* Button with link (text style/color when mouseover) */
#home-header a:hover, #home-header a:active { 
color:    #B9B9B9; 
/* Remove dotted outline of button links in Firefox     
border:    none; */
   }

 

... is there I can style all my buttons (the ones that expand AND the link buttons) using the same code? That would avoid the need to duplicate all the styles (to get a common, identical look for all the buttons) and the need for separating each link-button in their own class.

The confusing part for me is that the link buttons are also a part of the JS controlled navigation menu, so what i've tried so far messes with the JS and prevents the navigation menu from working.

 

Finally, I mentioned that not all of the linked buttons are clickable. Try hovering the mouse-pointer over the "Home" button. When you get near the top it's no longer linkable. I could clearly see the clickable area before removing the dotted outline for the links, and it seems that the clickable area has been shifted a little below the actual button itself. What causes this, and how can I fix it?

Link to comment
Share on other sites

I've worked out several of those issues now. Here's the result (For now, don't mind the orange dotted outlines surrounding the link-buttons).

 

1) I've defined the buttons with links on them (.linkbutton) and can now style all buttons the same way:

/* All buttons (text style) */
#nav_menu h2,.df_menu_head,.linkbutton a {
color:        gray;
cursor:        pointer;
text-align:    center;
font-size:    10px;
display:    block;
text-decoration: none;
width:        190px;
height:        21px;
}

 

This works fine, so I've equally tried to do this with the .header_highlight class, but the linked buttons don't follow this for some reason.

Try clicking on any of the buttons that reveal nested items (e.g. "Download", FAQ" etc.) and you'll see the button text turns red. Now try clicking on the linked buttons ("Home", "Page 2" or "Page 3") and you'll see that they stay the same. I assume some old code overrides the new stuff I've written, but can't find out where. Here's my new code:

/* Button styling when selected or pre-selected ("header_highlight" class) */
.header_highlight {
width:            190px;
/* graphic button image */
background:        gray url(../images/button_mouseover2.gif) no-repeat 0 0;
color:            red;
font-weight:    bold;
/* colored line underneath selected button */
border-bottom:    1px red solid; 
   }

 

2) I've created a new class (.submenu_header_highlight) in order to separate the expanded submenu items from the buttons as I would like to highlight which sub-menu is accessed on the current page:

/* Nested links (pre-selected -"submenu_header_highlight" in HTML code) */
.submenu_header_highlight {
text-decoration:    none; 
width:                171px;
font-style:            italic;
font-weight:        bold;
color:                red;
   }

Try this by clicking on the "Download" button, then one of the menu items underneath which will bring you to that page. The page title selected should now be shown in bold, italic and red, but for some reason the text color doesn't change -why?

 

3) The link-area on the buttons with links on them ("Home", "Page 2" or "Page 3") aren't aligned with the buttons themselves. I've worked on the .linkbutton a class for this and added an orange dotted border so it's easier to see. I finally found out that the margin and padding needed to be defined differenly from the rest of the button. Why wasn't it aligned to begin with, and what are the correct margin/padding dimensions to enter? (I've done my best by eye-measurement though, as you can see).

Here's the relevant code:

/* All buttons except link-buttons (general styling) */
#nav_menu h2,.df_menu_head {
/* graphic button image */
background:        gray url(../images/button.gif);
background-repeat:    no-repeat;
margin:            8px 0 0 7px;
padding-top:    8px;
}

/* All buttons (text style) */
#nav_menu h2,.df_menu_head,.linkbutton a {
color:        gray;
cursor:        pointer;
text-align:    center;
font-size:    10px;
display:    block;
text-decoration: none;
width:        190px;
height:        21px;
}


/* Link-buttons only (general styling) */
.linkbutton a {
border:        thin dotted orange;
margin:        -8px 0 0 -1px;
padding:    5px 0px 0px 0px;    
   }

Edited by hanashite
Link to comment
Share on other sites

  • 2 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...