- Add a new feature to our top horizontal navigation menu -- a drop down

navigation boxes. This is implemented in pure CSS and does not require
  javascript, etc.
- Tested with all modern browsers (firefox, opera, safari, chrome, ie7+)
  where this feature works w/o problems. IE6 doesn't display drop down
  menus but has no regressions against the original implementation.
- The drop down menus probably need some polishing, but for this we need
  someone with more design skills ;)
- I believe this will allow our users to navigate through the web site
  more efficiently and quickly

- Note that this change should to be ported by our translation teams to
  their localized versions of web site. For this reason I am not
  removing now deprecated parts of modified style sheets as these need to
  be kept until after localized pages will be ported to these new menus;
  otherwise they will be rendered pretty badly.

Reviewed by:	www@, doc@
This commit is contained in:
Daniel Gerzo 2009-07-06 22:09:22 +00:00
parent 5ceac95da7
commit 767d46fd8c
Notes: svn2git 2020-12-08 03:00:23 +00:00
svn path=/www/; revision=34514
3 changed files with 147 additions and 14 deletions

View file

@ -1,6 +1,6 @@
/*
* FreeBSD.org - Fixes for Internet Explorer
* $FreeBSD$
* $FreeBSD: www/en/layout/css/iefixes.css,v 1.3 2005/11/23 14:22:06 keramida Exp $
*/
/*Win IE fix \*/
@ -8,6 +8,9 @@
* html #TOPNAVLIST li { margin: 0 0.5em 0 -0.5em; }
* html #topnavlist li { margin: 0 0.5em 0 -0.5em; }
* html #MENU ul.first { border-left: 0; }
* html #MENU li { margin: 0.2em 0 -1em 0; }
* html #languagenavlist li { padding: 0 0.1em 0 0.4em; }
* html #languagenavlist li.last-child { padding: 0 0em 0 0.4em; }

View file

@ -1,7 +1,7 @@
/*
* FreeBSD.org - Navigation (and List) Styles
*
* $FreeBSD: www/en/layout/css/navigation.css,v 1.5 2008/01/15 21:18:19 murray Exp $
* $FreeBSD: www/en/layout/css/navigation.css,v 1.6 2008/01/16 02:10:22 murray Exp $
*/
/* Site Navigation */
@ -71,6 +71,77 @@
padding-left: 0;
}
/* New drop-down menu implementation */
#MENU {
width: 100%;
float: left;
height: 29px;
font-size: 0.9em;
margin: 5px 0 2px 0;
font-weight: bold;
}
#MENU ul {
list-style: none;
margin: 0;
padding: 0px 10px 2px 10px;
float: left;
border-left: 1px solid #B4B4B4;
}
#MENU ul:first-child {
padding-left: 0;
border: 0;
}
#MENU a {
display: block;
padding: 0px 3px;
color: #666;
text-decoration: none;
}
#MENU a:hover {
color: #990000;
}
#MENU li {
position: relative;
}
#MENU ul ul {
position: absolute;
background-color: #e5e5e5;
padding: 2px;
border: 0;
width: 10em;
z-index: 500;
}
#MENU ul ul li {
border-top: 1px solid #B4B4B4;
padding: 4px 0 4px 0;
}
#MENU ul ul ul {
top: 0;
left: 100%;
background: #e5e5e5;
}
div#MENU ul ul,
div#MENU ul li:hover ul ul,
div#MENU ul ul li:hover ul ul {
display: none;
}
div#MENU ul li:hover ul,
div#MENU ul ul li:hover ul,
div#MENU ul ul ul li:hover ul {
display: block;
}
/* Language selection */
#LANGUAGENAV, #languagenav {