Re: svn: /web/php/trunk/ images/shade.png include/header.inc include/layout.inc js/common.js js/jquery.hoverIntent.minified.js styles/structure.css
styles/theme.css

On Thu, Dec 30, 2010 at 01:45, Stewart Lord <stewey@ambitious.ca> wrote: > > On 2010-12-29, at 8:09 AM, Richard Quadling wrote: > >> Is it me, or do you now have to click twice to activate the dropdowns? >> >> Sequence for me using Google Chrome 10.0.612.3 dev and FF 3.6.13 >> >> 1 - Make sure beta site is used in >> http://docs.php.net/my.php >> 2 - Load http://docs.php.net/ >> 3 - Click once on Downloads - Downloads page loads. >> 4 - Click once on any of the dropdowns (Documentation, Community or >> Help) - "current" styling is removed from Downloads and no dropdown. >> 5 - Click once on any of the dropdowns (Documentation, Community or >> Help) - Dropdown opens with the "current" styling on the dropdown >> option. >> >> So, 2 issues really, >> >> 1 - The "current" styling moves with the click, rather than staying >> with the current page and having some other highlight for the revealed >> dropdown. >> 2 - The dropdown requires 2 clicks. > > > Hi Richard, > > Thanks for the repro steps. It's not just you; I'm seeing this too. > > I'll see what I can do to fix it. As you say, we might need another state to distinguish > 'current' versus 'expanded' sections. > The JS seems unnecessary complicated to me.. If we move the megadropdown item into its div, and simply show/hide the js becomes heckofalot simpler, and ignores the doubleclick issue. See attached patch. -Hannes

Index: js/common.js =================================================================== --- js/common.js (revision 306918) +++ js/common.js (working copy) @@ -1,34 +1,17 @@ $(document).ready(function() { - // slide mega drop-downs up/down. - $("#headmenu li:has(div.children)").click(function(event) { - // don't follow link. + $(".parent .menu-link").click(function(event) { event.preventDefault(); + var selectedid = $(this).parent().attr("id"); + var selectedmenu = "." + selectedid; - var clickedMenu = $(this); - var activeMenu = $('#headmenu li.current'); - var container = $('#mega-drop-down #menu-container'); - - // function to activate the clicked menu. - var activate = function(){ - clickedMenu.addClass('current'); - clickedMenu.find("div.children").appendTo(container); - container.find("div.children").slideUp(0).slideDown("fast"); - }; - - // if there is an active menu, deactivate it first. - if (activeMenu.length) { - activeMenu.removeClass('current'); - var children = container.find("div.children"); - if (children) { - children.slideUp('fast', function(){ - children.appendTo(activeMenu); - if (activeMenu[0] != clickedMenu[0]) - activate(); - }); - } + // Current menu clicked again, close it + if ($(selectedmenu).hasClass("current")) { + $("#menu-container .children").slideUp().removeClass("current"); } else { - activate(); + // Slide the current menu up (if any), and slide the selected one down + $("#menu-container .current").slideUp().removeClass("current"); + $(selectedmenu).slideDown().addClass("current"); } }); Index: styles/structure.css =================================================================== --- styles/structure.css (revision 306909) +++ styles/structure.css (working copy) @@ -164,6 +164,9 @@ margin-left: 175px; padding-bottom: 12px; } +.children { + display: none; +} footer .footmenu { float: right; Index: include/header.inc =================================================================== --- include/header.inc (revision 306905) +++ include/header.inc (working copy) @@ -47,16 +47,31 @@ <li class="<?php echo $curr == "downloads" ? "current" : ""?>"> <a href="/downloads.php" class="menu-link">Downloads</a> </li> - <li class="parent <?php echo $curr == "docs" ? "current" : ""?>"> + <li id="menu-docs" class="parent <?php echo $curr == "docs" ? "current" : ""?>"> <a href="/docs.php" class="menu-link">Documentation</a> - <div class="children"><div class="children-1"><div class="children-2"> + </li> + <li id="menu-community" class="parent <?php echo $curr == "community" ? "current" : ""?>"> + <a href="/community.php" class="menu-link">Community</a> + </li> + <li id="menu-help" class="parent <?php echo $curr == "help" ? "current" : ""?>"> + <a href="/support.php" class="menu-link">Help</a> + </li> + + </ul> +<br style="clear: both;" /> +</div> + +<div id='mega-drop-down'> + <div id='menu-container'> + <!-- {{{ Docs Menu --> + <div class="children menu-docs"><div class="children-1"><div class="children-2"> <?php doc_toc($lang); ?> <br style="clear: both;" /> </div></div></div> - </li> - <li class="parent <?php echo $curr == "community" ? "current" : ""?>"> - <a href="/community.php" class="menu-link">Community</a> - <div class="children"><div class="children-1"><div class="children-2"> + <!-- }}} --> + + <!-- {{{ Community menu --> + <div class="children menu-community"><div class="children-1"><div class="children-2"> <?php news_toc(array('news')) ?> <?php news_toc(array('conferences', 'papers')) ?> <dl> @@ -73,9 +88,6 @@ <dl> <dt><a href="/mailing-lists.php">Mailing lists</a></dt> <dd><a href="/unsub.php">Unsubscribe from mailing list</a></dd> - <!-- FIXME: This links.php stuff should be removed? --> - <dt><a href="/links.php">PHP related sites</a></dt> - <dd><a href="http://planet-php.net">Planet PHP</a></dd> <dt><a href="#">About PHP.net</a></dt> <dd><a href="/sites.php">Other PHP.net sites</a></dd> <dd><a href="/my.php">My PHP.net</a></dd> @@ -86,10 +98,9 @@ </dl> <br style="clear: both;" /> </div></div></div> - </li> - <li class="parent <?php echo $curr == "help" ? "current" : ""?>"> - <a href="/support.php" class="menu-link">Help</a> - <div class="children"><div class="children-1"><div class="children-2"> + <!-- }}} --> + <!-- {{{ Help menu --> + <div class="children menu-help"><div class="children-1"><div class="children-2"> <dl> <dt><a href="#">Navigation tips</a></dt> <dd><a href="/sidebars.php">Search sidebars</a></dd> @@ -118,14 +129,7 @@ </dl> <br style="clear: both;" /> </div></div></div> - </li> - - </ul> -<br style="clear: both;" /> -</div> - -<div id='mega-drop-down'> - <div id='menu-container'> + <!-- }}} --> </div> </div>