Re: [PHP-WEBMASTER] 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
[email protected] (Hannes Magnusson)
| Newsgroups | php.webmaster |
|---|---|
| Message-ID | <[email protected]> |
On Thu, Dec 30, 2010 at 01:45, Stewart Lord <[email protected]> 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
megadropfix.patch.txt
(text/plain, 5.1 KB)
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>