Cebu Jobs (2)
DLL Files (2)
Andrew (1)
Email Delivery (1)
Greg (1)Want to Test Your Website?
Learn how to increase visitor action, reduce site confusion for new visitors, and get those new visitors returning back for more! Get BWI's Usability and Design Analysis.
Text Menu with Style
By Robert Campbell on Thursday, July 17th, 2008
Previous: Image or Text
Next: Text and Your Target
My last post was about how a site missed the opportunity to use text in their menu. They used graphics, and SEO wise, it not a great idea. It will also fail you if someone visits your site, and their browser does not load images. An example of this might be a pda. Well, here is a great example of making your menu with text, but still giving it some style. Check out this Website Design Company.
If you look at the left menu underneath the logo you will see the menu items appear like graphics, especially when you hover over, but really, they are not images. They are text with style. The style has not been made with the usual CSS style sheet, but with JavaScript. I did a little check of my stats from one of my busier sites, and found 98% of the visitor’s browsers supported JavaScript. I think you are safe to use. In the case of the Michigan design site, they also supported their menu with just plain text in the footer of the site. Double SEO factor, and usability supported.
If you are looking for some cool JavaScript’s to give similar effects as Michigan Website Design, check out Script.aculo.us
Like this post? Get usability and design tips delivered by email straight to you. Full feed articles are delivered, and are managed by Google's Feedburner service.
Just Posted! Validating HTML Killed a Plugin
Related
Category: Usability & Design Tags: images, javascript, seo, text
Hi, thank you for the great review of our site!
However, I programmed the site and wanted to point out one thing that was incorrect from your post. The entire navigation of our site is done solely in CSS, without the assistance of JavaScript. This is including the hover effects on the navigation, the check marks next to visited links, and the rest.
I would be happy to provide you with the code I used to build this navigation for you and your readers to evaluate. Or you can review the files on http://tmprod.com or email me at dean(at)tmprod.com with any questions.
Thanks again for the review!
Hmmm, will have to check again. I looked at your style sheet, and saw no reference to the mouseover image that came up when hovering the link. I didn’t see any check boxes either.
If you want to look in the file http://tmprod.com/styles/main.css under the sections entitled Main Navigation and Secondary Navigation, you will notice that all anchor tags in the banner navigation and sidebar navigation are all made into block level elements and the hover effects are applied to the :hover pseudo-class for those elements.
Also, if you look at the sidebar navigation in any of the sections of the site (sans the blog) you will see that as you visit a page, it will leave a red check mark next to that page. This was accomplished using CSS as well.
I believe that the only piece of JavaScript I have attached to any link is the drop down for the AJAX newsletter signup in the mast of the page.
You can search for =Main Nav or =Secondary Nav to quickly access those areas of the main.css file.
Well I apologize to all! You had more than one style sheet going there. For those of you interested here is a quick link: http://tmprod.com/styles/gallery.css. JavaScript not required, just good old fashion CSS.
Thanks for clarifying Robert! The gallery.css file is actually only for the lightbox css we have on our portfolio pages, and scattered a couple other places. You’ll be able to see all the CSS in the main.css file as pointed out above.
Thanks again!
I guess I am out of it today. Time to take a nap.
Sorry Robert but I believe Robert won this battle!
[...] a look at “Text Menu with Style”- it’s a great review and an example of the dedication and type of work TM can develop for [...]
Sorry Robert but I really- no really I do believe that “Dean” won this battle!
I knew you meant Dean, but since my apparent theme of the post is “sleeping at the wheel”, I didn’t correct.