Other sites
25 February 2021
English
|
عربي
Login
|
Register
Home
|
Newsroom
|
Contact Us
Office of the Minister of State for Administrative Reform (OMSAR)
Website Standards and Guidelines
About this Site
Policy
Background
Context
Objective
Purpose / Rationale
Applicability
Policy Statement
Principles
Legal Context
Sustainability and Monitoring
Exemptions
Review of The Policy
Standards & Guidelines
Implementation and Compliance
Identifiers
Design
Accessibility
Development
Hosting
Content and Services
Privacy and Copyright
Promotion
Maintenance
Documentation and Training
Audit and Review
Toolkit
Design Manual
Templates & Components
Design Layouts
How To Use The Toolkit
Compliance Matrix
Tools & Resources
Compliance Tests
Glossary
Forums
»
Toolkit
»
Design Manual
»
Navigation & Link States
»
Side Navigation & Text Links
Design Manual
Homepage
Alternative Main Area
Alternative Side Navigation & Skinning
Variations With Different Colors
Variations With Background Image
Homepage Areas
Variations of Headers & Footer
Variations of News/Main Area
Main Content Column Modules
Left Side Column Modules
Section Landing Page
Section Landing Page Areas
Content Page
Content Page Areas
Content Page With Cross Links & Text Styling
Other Sub Pages
Listing Pages & Details
Gallery Pages & Details
Form Page
Collapsible Content Listing Page
Search Result Page
Grid & Measurements
Typography: Font
Typography: Sizes
Color Schemes
Color schemes applied (1)
Color schemes applied (2)
Color schemes applied (3)
Color schemes applied (4)
Color schemes applied (5)
Navigation & Link States
Main Navigation
Side Navigation & Text Links
Other Languages: English
Templates & Components
Design Layouts
How To Use The Toolkit
Compliance Matrix
Tools & Resources
Download all Templates & Components
Download all Design Layouts
Download The Design Manual
Download The Compliance Matrix
How To Use The Toolkit
Side Navigation & Text Links
Font
+
-
The side navigation bar uses clear
typography
and colored bars for roll-over states. The text is Tahoma regular, 14pt on white.
a. Roll-over and down state
When the mouse goes over a menu item, its tab changes to the main color.
b. Roll-over on drop-down levels
The drop-down menu has two levels.
The first level is aligned with the main level and gets underlined on roll-over and down state
The 2nd level is tabbed in to provide an obvious hierarchy and gets highlighted with a 50% shade of the roll-over color
c. Visited state
Once a navigation link has been 'visited' the text goes gray (the same gray as the tab color).
d. Top level visited state
Once a top level navigation link has been 'visited' the text in that tab becomes light gray.
e. Text links styles
The text links color is based on the secondary color (which is contrasting with the main color). It becomes 50% lighter on roll-over and gray on visited state.
Beware that this side navigation could also work as a main navigation should there be too many links not fitting in the main gray bar.
Send Your Feedback
Last updated on: 12/09/2011 - 01:05 PM
Please
login
to start checking and adding Comments
Close
Username
Password
Not a member? Click
here
to register.
All rights reserved ©
Sitemap
|
Copyright
|
Privacy
|
Disclaimer
This site is hosted by the
Office of the Minister of State for Administrative Reform
(OMSAR).