开发者

Navigation Menu, CSS, Background Images and Visited Links

I have a web-site created with a Wordpress Theme (Portfolio Press) - http://www.photos.robinbrittain.co.uk

It has a default Sidebar menu that works OK. I have been trying to add a second 'Custom' Menu added as a Widget below to appear identical to the one above, but for accessing different web-pages, but have been having some issues with Visited Links and Background Images for buttons within the menu. Unfortunately I'm a novice with this.

If I use the code which follows; With my Visited Links, the menu buttons change properti开发者_如何学运维es as required, eg. Background colour, but they don't revert or clear and refresh to their original 'unvisited' state when I subsequently click on other menu item buttons (except by clearing Browser History):

#sidebar li{list-style:none;}
#sidebar .widget_nav_menu a:link {color: ;  background:#262626 url(images/menu_left.gif) no-repeat top left; font-size:13px; text-transform:none; font-style: italic; margin-bottom:10px; padding:8px 5px 5px 10px; height:17px; width:250px; display:block; }
#sidebar .widget_nav_menu a:visited {color: ;  background:#161616 url(images/menu_left_hover.jpg) no-repeat top left; font-size:13px; text-transform:none; font-style: italic; margin-bottom:10px; padding:8px 5px 5px 10px; height:19px; width:250px;display:block;}
#sidebar .widget_nav_menu a:hover {color:#cccccc; background:#161616 url(images/menu_left_hover.jpg) no-repeat top left;}
#sidebar .widget_nav_menu a:active {color:#ccc; background:#262626 url(images/menu_left.gif) no-repeat top left;}

A colleague suggested deleting the 'a:visited' line spotting a triggering issue (#sidebar .widget_nav_menu a:visited... etc.). I did this and everything worked in newer Browser versions such as IE 9 but in earlier ones eg, IE 8, the whole menu with button heights would collapse and become squashed when navigating.

I've since experimented and found that by including the line (The full code follows at the end of this message):-

#sidebar .current_page_item a:visited {background:#161616 url(images/menu_left_hover.jpg) no-repeat top left; color: ; font-size:13px; text-transform:none; font-style: italic; margin-bottom:10px; padding:8px 5px 5px 10px; height:17px; width:250px; display:block}

It all works, except the background images for the menu buttons don't display properly on at least 2 of the latest Browsers, I've tested: IE & Firefox. It appears they don't seem to fill the button widths. I can delete references to the Background images and the navigation menu all seems to work very nicely, I just don't have the images which provide rounded corners for the buttons.

Therefore, I am now stuck and would welcome any help, please. How can I get the navigation menu with buttons to change and revert properties between clicks and also display the background images properly.

The code I currently have in place which I'm stuck with is as follows:-

#sidebar li{list-style:none;}
#sidebar .widget_nav_menu a:link {color: ;  background:#262626 url(images/menu_left.gif) no-repeat top left; font-size:13px; text-transform:none; font-style: italic; margin-bottom:10px; padding:8px 5px 5px 10px; height:17px; width:250px; display:block; }
#sidebar .widget_nav_menu a:visited {color: ;  background:#161616 url(images/menu_left_hover.jpg) no-repeat top left; font-size:13px; text-transform:none; font-style: italic; margin-bottom:10px; padding:8px 5px 5px 10px; height:19px; width:250px;display:block;}
#sidebar .current_page_item a:visited {background:#161616 url(images/menu_left_hover.jpg) no-repeat top left; color: ; font-size:13px; text-transform:none; font-style: italic; margin-bottom:10px; padding:8px 5px 5px 10px; height:17px; width:250px; display:block}
#sidebar .widget_nav_menu a:hover {color:#cccccc; background:#161616 url(images/menu_left_hover.jpg) no-repeat top left;}
#sidebar .widget_nav_menu a:active {color:#ccc; background:#262626 url(images/menu_left.gif) no-repeat top left;}

Thank-you very much,

Regards,

Robin.


The background image on the visited link is actually no longer available on the latest browsers as it poses a privacy risk. With the usage of a separate background image, one could log the information of clients history.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜