CodeVerge.Net Beta


   Explore    Item Entry    Members      Register  Login  
NEWSGROUP
.NET
Algorithms-Data Structures
Asp.Net
C Plus Plus
CSharp
Database
HTML
Javascript
Linq
Other
Regular Expressions
VB.Net
XML

Free Download:




Zone: > NEWSGROUP > Asp.Net Forum > general_asp.net.master_pages_themes_and_navigation_controls Tags:
Item Type: NewsGroup Date Entered: 8/1/2006 10:17:36 PM Date Modified: Subscribers: 0 Subscribe Alert
Rate It:
(NR, 0)
XPoints: N/A Replies: 1 Views: 14 Favorited: 0 Favorite
Can Reply:  No Members Can Edit: No Online: Yes
2 Items, 1 Pages 1 |< << Go >> >|
BHendry
Asp.Net User
Best practice for navigation menu using images...8/1/2006 10:17:36 PM

0/0

I'm just getting started with .NET and wondering what the best approach is for this scenario:

Simple site with a navigation menu down the left side with 4-10 menu options (no subitems). I want to use images for the menu items so I can have total control over the appearance of the fonts. I plan to have the image change on mouseover (and when the user has navigated to the respective menu item). I will eventually want the menu to display choices dynamically based on logged in permissions.

From researching the forums I can tell that the built-in asp menu control offers a lot of the functionality I want, but using images-only instead of text didn't seem very intuitive.

Any suggestions on a direction to head in appreciated.
sbyard
Asp.Net User
Re: Best practice for navigation menu using images...8/2/2006 2:09:43 PM

0/0

A standard practice is to have a UL element containing LI elements relating to each menu item

Each LI item contains an A element (a linkbutton is fine if you want to manage redirects or other functionality in code)  Set the same text as your images, or whatever you want.

For non-CSS or aural broswers, your users now have appropriate menu access

OK - funky styling time.

Using CSS, set the style (and thus) background image for each A (or link button) to the default image.  Set the text to be off-screen by altering the left margin to say -8000.

Set the css psuedo class ":hover" to display the mouse over image.  You can also use a single double width image (with both the default and hover images side by side), and set the background image to the left for default, right for hover.

Most decent CSS books will have this and the "sliding doors" technique in for nice looking menu's

E.g. see "CSS Mastery" ISBN-13 pbk): 978-1-59059-614-2 availabe in the UK/US


If it was easy, everybody would be doing it.
2 Items, 1 Pages 1 |< << Go >> >|


Free Download:

Books:
Special Edition Using Macromedia Studio 8 Authors: Sean Nicholson, Kristin Henry, Pages: 722, Published: 2005
Web Application Design Handbook: Best Practices for Web-based Software Authors: Susan L. Fowler, Victor R. Stanwick, Pages: 658, Published: 2004
Web Design in a Nutshell: A Desktop Quick Reference Authors: Jennifer Niederst Robbins, Pages: 796, Published: 2006
Foundation PHP for Dreamweaver 8 Authors: David Powers, Pages: 510, Published: 2005
Professional Community Server Authors: Wyatt Preul, Keyvan Nayyeri, Jose Lema, Jim Martin, Pages: 311, Published: 2007
Focal Easy Guide to Flash MX 2004: For New Users and Professionals Authors: Birgitta Hosea, Pages: 224, Published: 2004
Building Web Sites All-in-One Desk Reference For Dummies: All-in-one Desk Reference for Dummies Authors: Doug Sahlin, Claudia Snell, Pages: 768, Published: 2006
Special Edition Using FileMaker 8: Special Edition Authors: Scott Love, Steve Lane, Bob Bowers, Pages: 890, Published: 2006
Beginning CSS: Cascading Style Sheets for Web Design Authors: Richard York, Pages: 630, Published: 2005
EMarketing EXcellence: Planning and Optimising Your Digital Marketing Authors: Dave Chaffey, Paul Smith, Pages: 528, Published: 2008

Web:
WAC Tutorial: Best Practices -- Navigation This is because this is an image navigation -- each entry in the menu is a WAC Best Practices Logo small graphic. As a general design rule, avoid using ...
Firefox Accessibility Extension Documentation: Navigation: Menu ... Selecting an item in the list, by clicking on the item or by using the arrow keys, ... If a navigation bar is identified for the use of HTML Best Practices, ...
Simply Code » Accessible navigation using images Apr 18, 2008 ... Taged with accessible navigation, css navigation, images, menu. Using images for website navigation is not the best practice since search ...
Web Development Best Practices | Virginia Tech Skip Menu. Skip to Navigation; Skip to Main Content ... Provide alternate text equivalents for all images using the alt attribute in HTML. ...
CSS Navigation Menus | Web Design Software Intelligent Menus Using some very simple PHP and CSS you can create intelligent menus that are ... with a special focus on web standards and best practices. ...
Best practices for producing high quality PDF files document has tags before applying this, under the View menu select Navigation Tabs > Tags.) Provide alternative text for all images. You can do this using ...
Authoring Accessible Documents | Introduction to Best Practice ... Authoring Accessible Documents. Navigation Menu Starts ... are a number of best practice techniques which can be followed to make images more accessible. ...
Common Look and Feel Standards - Crosswalk Table Policy ... Jan 5, 2007 ... Common Look and Feel Best Practices - Navigation and Format .... area and side menu(s) specified using a Cascading Style Sheet is Verdana. ...
Webtutorial-navigation Feb 13, 2008 ... Accessible dynamic menus can be created using




Search This Site:










login control - can i clear the username on login failure?

open url in new window

web site administration tool

bug tracker?

forcing the user to logon

treeview in asp.net?

future of ttt authentication module?

control must be in server form

protecting content

object level security - where do i get information?

publishform appearing multiple times on taskbar

good book suggestions for learning .net 3.5 and vs 2008

does visual studio 2005 fully support application developed with asp.net 1.1 ?

editing web.sitemap at runtime

new module - feedback please!

good idea? moving data from web.config to the machine.config

installer: text turning black on error.

help, i need to pass on user name and password to sql

user and custom ctrl

do i have to disable membership if i don't want to use it? there is no "enable=false" property with it

club db not showing in server explorer

is it possible to call aspx from asp ?

menu control, statichoverstyle issue with image background

change expiration time from days/weeks to hours

xml data editor

syntax error in store procedure

problems getting a dropdownlist.selectedvalue in a wss toolpart

ddos attack

regarding aspnetdb.mdb

creating object data sources in the style of the existing ones

 
All Times Are GMT