[gatewiki-commits] SF.net SVN: gatewiki:[1739] trunk
|
View:
New views
1 Messages
—
Rating Filter:
Alert me
|
 |
[gatewiki-commits] SF.net SVN: gatewiki:[1739] trunk
by ian_roberts
::
Rate this Message:
Revision: 1739
http://gatewiki.svn.sourceforge.net/gatewiki/?rev=1739&view=rev Author: ian_roberts Date: 2009-10-24 10:35:47 +0000 (Sat, 24 Oct 2009) Log Message: ----------- Improvements to drop down menus. Now works in IE 6 (except that if the horizontal menu bar wraps onto a second line, the drop down menus from the first line don't hide the second-line items they pop over - this works correctly in standards-compliant browsers). Also tidied up the topSeparator and menu bar widths so they match, which involved going back to a <div class="horizontal menu"> containing a <ul>, rather than putting the class on the <ul> directly. Modified Paths: -------------- trunk/cow/grails-app/views/layouts/cowpage.gsp trunk/cow/web-app/css/page.css trunk/site-plugins/gau/grails-app/views/layouts/cowguest.gsp Added Paths: ----------- trunk/cow/web-app/css/ie-menus.css Modified: trunk/cow/grails-app/views/layouts/cowpage.gsp =================================================================== --- trunk/cow/grails-app/views/layouts/cowpage.gsp 2009-10-23 19:53:17 UTC (rev 1738) +++ trunk/cow/grails-app/views/layouts/cowpage.gsp 2009-10-24 10:35:47 UTC (rev 1739) @@ -10,15 +10,29 @@ <link rel="stylesheet" href="${createLinkTo(dir:'css',file:'prototip/prototip.css')}" /> + <g:if test="${leftBar}"> + <!-- shift the top bar over to miss the left bar --> + <style type="text/css" media="screen"> + .horizontal ul { + padding-left: 10em; + } + + .horizontal ul ul { + padding-left: 0; + } + </style> + </g:if> <!--[if lt IE 7]> <style type="text/css" media="screen"> + /* I'd like to put this in the ie-menus.css but need to use a gsp tag to + * generate the behaviour url value. + */ body { behavior: url('<g:resource dir="_images/menu" file="csshover.htc" />'); font-size: 100%; } - - ul.menu li a {height: 1%;} </style> + <link rel="stylesheet" href="${resource(dir:'css',file:'ie-menus.css')}" /> <![endif]--> <g:javascript src="prototype/prototype.js"/> Added: trunk/cow/web-app/css/ie-menus.css =================================================================== --- trunk/cow/web-app/css/ie-menus.css (rev 0) +++ trunk/cow/web-app/css/ie-menus.css 2009-10-24 10:35:47 UTC (rev 1739) @@ -0,0 +1,18 @@ +/* Miscellaneous fixes for things IE < 8 screws up in the menus. This css is + * conditionally included by IE only. + */ + +.vertical ul li { + float:left; + width:100%; +} + +.menu ul li a { + height: 1%; +} +/* Have to float the first-level a's to get them to appear in a line... */ +.horizontal ul li a {float:left;} +.horizontal ul ul li a {float:none;} + +/* ... but this makes the drop-downs appear in the wrong place. To fix: */ +.horizontal ul ul {clear:left;} Modified: trunk/cow/web-app/css/page.css =================================================================== --- trunk/cow/web-app/css/page.css 2009-10-23 19:53:17 UTC (rev 1738) +++ trunk/cow/web-app/css/page.css 2009-10-24 10:35:47 UTC (rev 1739) @@ -45,8 +45,8 @@ } #topSeparator { clear: both; - width: 99%; - padding: 6px; + width: 100%; + padding: 4px 0; background: #578BB8; } #sideBarsAndMain { @@ -71,8 +71,8 @@ } #footer { clear: both; - padding: 4px; - width: 99%; + padding: 4px 0; + width: 100%; background: #578BB8; text-align: center; } @@ -169,31 +169,37 @@ } /* Menu support */ -ul.menu, ul.menu ul { +.menu, .menu ul { list-style: none; background-color: #578BB8; margin: 0; padding: 0; } -ul.vertical { +.horizontal { + width: 100%; + float: left; +} + +.vertical ul { /* Absolute positioning to overlay the border of the main div. */ position: absolute; width: 10em; } -ul.horizontal { - width: 100%; +.horizontal ul { position: relative; float: left; } .horizontal li { + display: inline; float: left; } -.horizontal ul li { +.horizontal ul ul li { width: 100%; + display: block; float: none; } @@ -205,6 +211,8 @@ border-bottom: 1px solid #778; margin: 0; color: #000; + /* to push menu bar items behind overlapping popups */ + z-index: 100; } .menu a:hover { @@ -214,7 +222,7 @@ .menu li { position: relative; - font: bold 14px Verdana; + font: bold 14px Verdana,Arial,sans-serif; } .horizontal a.submenu, @@ -229,55 +237,49 @@ } .vertical a.submenu, -.horizontal ul a.submenu { +.horizontal ul ul a.submenu { background-image: url('../_images/menu/right.gif'); } -.menu ul { +.menu ul ul { position: absolute; - width: 160px; + width: 10em; display: none; + z-index: 200; } -.menu ul li { - font: normal 14px Verdana; +.menu ul ul li { + font: normal 14px Verdana,Arial,sans-serif; + z-index: 300; } -.menu ul li a { +.menu ul ul li a { padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray; } -.horizontal ul { - z-index: 500; -} - -.vertical ul { - z-index: 250; -} - /* Pop all vertical menus and all second-level-and-beyond horizontal ones out * to the right. First level horizontal drop-downs are already in the right * place. */ -.vertical ul, .horizontal ul ul { +.vertical ul ul, .horizontal ul ul ul { top: 0; left: 100%; } /* The hover magic */ -.menu li:hover ul ul, .menu ul li:hover ul ul, .menu ul ul li:hover ul ul, -.menu ul ul ul li:hover ul ul { +.menu ul ul ul li:hover ul ul, +.menu ul ul ul ul li:hover ul ul { display: none; } -.menu li:hover ul, .menu ul li:hover ul, .menu ul ul li:hover ul, -.menu ul ul ul li:hover ul { +.menu ul ul ul li:hover ul, +.menu ul ul ul ul li:hover ul { display: block; } Modified: trunk/site-plugins/gau/grails-app/views/layouts/cowguest.gsp =================================================================== --- trunk/site-plugins/gau/grails-app/views/layouts/cowguest.gsp 2009-10-23 19:53:17 UTC (rev 1738) +++ trunk/site-plugins/gau/grails-app/views/layouts/cowguest.gsp 2009-10-24 10:35:47 UTC (rev 1739) @@ -10,15 +10,29 @@ <link rel="stylesheet" href="${createLinkTo(dir:'css',file:'prototip/prototip.css')}" /> + <g:if test="${leftBar}"> + <!-- shift the top bar over to miss the left bar --> + <style type="text/css" media="screen"> + .horizontal ul { + padding-left: 10em; + } + + .horizontal ul ul { + padding-left: 0; + } + </style> + </g:if> <!--[if lt IE 7]> <style type="text/css" media="screen"> + /* I'd like to put this in the ie-menus.css but need to use a gsp tag to + * generate the behaviour url value. + */ body { behavior: url('<g:resource dir="_images/menu" file="csshover.htc" />'); font-size: 100%; } - - ul.menu li a {height: 1%;} </style> + <link rel="stylesheet" href="${resource(dir:'css',file:'ie-menus.css')}" /> <![endif]--> <g:javascript src="prototype/prototype.js"/> @@ -99,32 +113,30 @@ <!-- header menus --> <div id="header"> ${header} - <ul class="horizontal menu"> - <!-- shift the top bar over if there is a left bar --> - <g:if test="${leftBar}"> - <li style="width: 10em"> </li> - </g:if> - <li><a href="/family/" class="submenu">Products</a> + <div class="horizontal menu"> <ul> - <li><a href="/family/developer.html">GATE Developer</a></li> - <li><a href="/family/embedded.html">GATE Embedded</a></li> - <li><a href="/teamware">GATE Teamware</a></li> - <li><a href="/family/process.html">The GATE Process</a></li> - <li><a href="http://gatecloud.net/">GATE Cloud</a></li> - <li><a href="http://gatewiki.sf.net/">GATE Wiki</a></li> + <li><a href="/family/" class="submenu">Products</a> + <ul> + <li><a href="/family/developer.html">GATE Developer</a></li> + <li><a href="/family/embedded.html">GATE Embedded</a></li> + <li><a href="/teamware">GATE Teamware</a></li> + <li><a href="/family/process.html">The GATE Process</a></li> + <li><a href="http://gatecloud.net/">GATE Cloud</a></li> + <li><a href="http://gatewiki.sf.net/">GATE Wiki</a></li> + </ul> + </li> + <li><a href="/customisation/">Services</a></li> + <li><a href="/support.html" class="submenu">Support</a> + <ul> + <li><a href="/mail/">Community-based</a></li> + <li><a href="/customisation/">For business</a></li> + </ul> + </li> + <li><a href="/download/">Download</a></li> + <li><a href="/documentation.html">Documentation</a></li> + <li><a href="/people">About Us</a></li> </ul> - </li> - <li><a href="/customisation/">Services</a></li> - <li><a href="/support.html" class="submenu">Support</a> - <ul> - <li><a href="/mail/">Community-based</a></li> - <li><a href="/customisation/">For business</a></li> - </ul> - </li> - <li><a href="/download/">Download</a></li> - <li><a href="/documentation.html">Documentation</a></li> - <li><a href="/people">About Us</a></li> - </ul> + </div> </div> <!-- sep, left/right bars, body and footer --> This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. ------------------------------------------------------------------------------ Come build with us! The BlackBerry(R) Developer Conference in SF, CA is the only developer event you need to attend this year. Jumpstart your developing skills, take BlackBerry mobile applications to market and stay ahead of the curve. Join us from November 9 - 12, 2009. Register now! http://p.sf.net/sfu/devconference _______________________________________________ gatewiki-commits mailing list gatewiki-commits@... https://lists.sourceforge.net/lists/listinfo/gatewiki-commits |
| Free embeddable forum powered by Nabble | Forum Help |
