Commit: 46c9d053ff204dd97f0b0044a96329e86e386bea
Author: Stewart Lord <[email protected]> Wed, 29 Dec 2010 07:25:58
+0000
Parents: d9f9949e25ff56a84ca0538a77b8c117f6b538fc
Branches: master
Link:
http://git.php.net/?p=web/php.git;a=commitdiff;h=46c9d053ff204dd97f0b0044a96329e86e386bea
Log:
Modified the 'mega' drop-down menu to open on click instead of 'hover intent'.
This should provide a better (more solid) user experience and allows us to
remove the hover intent plugin. All third-party JS is now loaded via CDN.
Previously the menu faded in/out, now it slides up/down pushing page content
out of the way. Additionally, restyled the menu container so that it spans
the full width of the page (menu contents are still constrained to ~960px).
The menu now has a high-impact dark-grey background with off-white text.
Split the community menu into four columns of links instead of three.
Removed some inline styles from header.inc. Tweaked news_toc() to support
an optional $sections argument that allows the caller to specify which
sections it wants rendered.
Removed shade.png as it is no longer used. The only graphic used by the new
layout is now sprites.png.
Changed paths:
D images/shade.png
M include/header.inc
M include/layout.inc
M js/common.js
D js/jquery.hoverIntent.minified.js
M styles/structure.css
M styles/theme.css
diff --git a/images/shade.png b/images/shade.png
deleted file mode 100644
index 8fc29d9..0000000
Binary files a/images/shade.png and /dev/null differ
diff --git a/include/header.inc b/include/header.inc
index 95b5b3e..5a6aed6 100644
--- a/include/header.inc
+++ b/include/header.inc
@@ -21,7 +21,6 @@
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js";></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js";></script>
- <script type="text/javascript"
src="/js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="/js/common.js<?php echo $v?>"></script>
<base href="<?php echo $_SERVER["BASE_PAGE"] ?>" />
@@ -58,7 +57,8 @@
<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">
- <?php news_toc() ?>
+ <?php news_toc(array('news')) ?>
+ <?php news_toc(array('conferences', 'papers')) ?>
<dl>
<dt><a href="http://wiki.php.net/";>PHP Wiki</a></dt>
<dd><a href="http://wiki.php.net/rfc";>Write a RFC</a></dd>
@@ -88,23 +88,25 @@
<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">
- <dl style="width: 250px;">
+ <dl>
<dt><a href="#">Navigation tips</a></dt>
<dd><a href="/sidebars.php">Search sidebars</a></dd>
<dd><a href="/urlhowto.php">URL Howto</a></dd>
<dd><a href="/tips.php">Quick Reference tips</a></dd>
<dd><a href="/sites.php">Other PHP sites</a></dd>
</dl>
- <dl style="width: 250px;">
+ <dl>
<dt><a href="#">Support</a></dt>
<dd><a href="/mailing-lists.php">Mailing lists</a></dd>
<dd><a href="/support.php">General resources</a></dd>
</dl>
- <dl style="width: 250px;">
+ <dl>
<dt><a href="http://bugs.php.net/";>Bugs</a></dt>
<dd><a href="http://bugs.php.net/report.php";>Report a bug</a></dd>
<dd><a href="http://bugs.php.net/how-to-report.php";>How to file a bug
report</a></dd>
<dd><a href="http://bugs.php.net/search.php";>Search reported
bugs</a></dd>
+ </dl>
+ <dl>
<dt><a href="/license/index.php">License information</a></dt>
<dd><a href="/license/contrib-guidelines-code.php">Contributor
Guidelines</a></dd>
<dd><a href="/license/distrib-guidelines-code.php">Distribution
Guidelines</a></dd>
@@ -118,6 +120,11 @@
<br style="clear: both;" />
</div>
+<div id='mega-drop-down'>
+ <div id='menu-container'>
+ </div>
+</div>
+
<div id="layout">
<?php
if (!empty($SIDEBAR_DATA)) {
diff --git a/include/layout.inc b/include/layout.inc
index 0982efc..22e513d 100644
--- a/include/layout.inc
+++ b/include/layout.inc
@@ -827,20 +827,20 @@ function site_footer_beta($config = array())
require dirname(__FILE__) . "/footer.inc";
}
-function news_toc() {
+function news_toc($sections = null) {
include dirname(__FILE__) . "/pregen-news.inc";
$items = array(
- array(
+ "news" => array(
"title" => "News",
"link" => "/archive/",
"children" => print_news($NEWS_ENTRIES, "frontpage", 3, null,
true),
),
- array(
+ "conferences" => array(
"title" => "Conferences",
"link" => "/conferences/",
"children" => print_news($NEWS_ENTRIES, "conferences", 3, null,
true),
),
- array(
+ "papers" => array(
"title" => "Call for Papers",
"link" => "/conferences/",
"children" => print_news($NEWS_ENTRIES, "cfp", 3, null, true),
@@ -848,7 +848,13 @@ function news_toc() {
);
echo "<dl>\n";
- foreach($items as $menu) {
+ foreach($items as $section => $menu) {
+
+ // only print requested sections.
+ if (is_array($sections) && !in_array($section, $sections)) {
+ continue;
+ }
+
echo "<dt><a href='{$menu["link"]}'>{$menu["title"]}</a></dt>\n";
foreach($menu["children"] as $child) {
echo "<dd><a
href='{$child["permlink"]}'>{$child["title"]}</a></dd>\n";
diff --git a/js/common.js b/js/common.js
index 28e6c60..73905f2 100644
--- a/js/common.js
+++ b/js/common.js
@@ -1,11 +1,35 @@
$(document).ready(function() {
- // fade in/out mega drop-downs.
- $("#headmenu li:has(div.children)").hoverIntent({
- interval: 100,
- timeout: 200,
- over: function(){$(this).find("div.children").fadeIn(250);},
- out: function(){$(this).find("div.children").fadeOut(250);}
+ // slide mega drop-downs up/down.
+ $("#headmenu li:has(div.children)").click(function(event) {
+ // don't follow link.
+ event.preventDefault();
+
+ 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();
+ });
+ }
+ } else {
+ activate();
+ }
});
// remove default search text on focus.
diff --git a/js/jquery.hoverIntent.minified.js
b/js/jquery.hoverIntent.minified.js
deleted file mode 100644
index f86ad87..0000000
--- a/js/jquery.hoverIntent.minified.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
-* hoverIntent r5 // 2007.03.27 // jQuery 1.1.2+
-* <http://cherne.net/brian/resources/jquery.hoverIntent.html>
-*
-* @param f onMouseOver function || An object with configuration options
-* @param g onMouseOut function || Nothing (use configuration options object)
-* @author Brian Cherne <[email protected]>
-*/
-(function($){$.fn.hoverIntent=function(f,g){var
cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var
cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY;};var
compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return
cfg.over.apply(ob,[ev]);}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}};var
delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return
cfg.out.apply(ob,[ev]);};var handleHover=function(e){var
p=(e.type=="mouseover"?e.fromElement:e.toElement)||e.relatedTarget;while(p&&p!=this){try{p=p.parentNode;}catch(e){p=this;}}if(p==this){return
false;}var ev=jQuery.extend({},e);var
ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);}if(e.type=="mouseover"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob);},cfg.interval);}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob);},cfg.timeout);}}};return
this.mouseover(handleHover).mouseout(handleHover);};})(jQuery);
\ No newline at end of file
diff --git a/styles/structure.css b/styles/structure.css
index fc80bd9..0d08818 100644
--- a/styles/structure.css
+++ b/styles/structure.css
@@ -71,32 +71,32 @@ h1 {
}
#headnav li.parent a.menu-link {
- padding-right: 22px;
+ padding-right: 25px;
}
#headnav li.parent .children {
display: none;
- z-index: 1000;
- position: absolute;
- top: 71px;
- left: 50%;
- margin-left: -470px;
- width: 940px;
}
-#headnav li.parent .children .children-1 {
- margin: 1px 5px 5px 5px;
- border: 2px solid;
- border-top: none;
- line-height: 1.4;
- padding: 10px 15px 15px 15px;
+#mega-drop-down div.children {
+ border-bottom-width: 12px;
+ border-bottom-style: solid;
+ padding-bottom: 1em;
}
-#headnav li.parent .children .children-2 {
- width: 920px;
+#mega-drop-down div.children-1 {
+ width: 960px;
margin: 0 auto;
}
+#mega-drop-down div.children dl {
+ width: 225px;
+}
+
+#mega-drop-down div.children dt {
+ border-top: none;
+}
+
#headnav .myphp {
float: left;
position: absolute;
diff --git a/styles/theme.css b/styles/theme.css
index 3e430df..364c543 100644
--- a/styles/theme.css
+++ b/styles/theme.css
@@ -59,33 +59,12 @@ a:hover {
background: url(/images/sprites.png) 0 0;
}
-#headnav li.parent .children {
- background: url('/images/shade.png');
- -moz-border-radius-bottomleft: 5px;
- -moz-border-radius-bottomright: 5px;
- -webkit-border-bottom-left-radius: 5px;
- -webkit-border-bottom-right-radius: 5px;
- border-bottom-left-radius: 5px;
- border-bottom-right-radius: 5px;
-}
-
-#headnav li.parent .children .children-1 {
- background: #fff;
- border-color: #604080;
- -moz-border-radius-bottomleft: 5px;
- -moz-border-radius-bottomright: 5px;
- -webkit-border-bottom-left-radius: 5px;
- -webkit-border-bottom-right-radius: 5px;
- border-bottom-left-radius: 5px;
- border-bottom-right-radius: 5px;
-}
-
#headnav li.parent a.menu-link {
- background: url(/images/sprites.png) no-repeat 100% 7px;
+ background: url(/images/sprites.png) no-repeat 100% 11px;
}
#headnav li.parent.current a.menu-link {
- background-position: 100% -23px;
+ background-position: 100% -19px;
}
#headnav a.menu-link {
@@ -178,9 +157,9 @@ h1 a:hover {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top: 1px solid #f6f6f6;
- box-shadow: 0px 3px 3px #ccc;
- -webkit-box-shadow: 0px 3px 3px #ccc;
- -moz-box-shadow: 0px 3px 3px #ccc;
+ box-shadow: 0px 2px 2px #555;
+ -webkit-box-shadow: 0px 2px 2px #555;
+ -moz-box-shadow: 0px 2px 2px #555;
}
.ui-autocomplete .ui-state-hover {
@@ -282,3 +261,18 @@ pre.info {
background-color: #efefef;
}
+/**
+ * Mega drop-down menu
+ */
+#mega-drop-down {
+ background-color: #222;
+ border-color: #c3add9;
+}
+
+#mega-drop-down dt a {
+ color: #eee;
+}
+
+#mega-drop-down a {
+ color: #ccc;
+}
\ No newline at end of file--
PHP Webmaster List Mailing List (http://www.php.net/)
To unsubscribe, visit: http://www.php.net/unsub.php
![[PHP-WEBMASTER] com web/php: Modified the 'mega' drop-down menu to open on click instead of 'hover intent'. This should provide a better (more solid) user experience and allows us to remove the hover intent plugin. All third-party JS is now loaded via CDN.: images/shade.png include/header.inc include/layout.inc js/common.js js/jquery.hoverIntent.minified.js styles/structure.css styles/theme.css](/search?l=php-webmaster@lists.php.net&q=subject:%22%5C%5BPHP%5C-WEBMASTER%5C%5D+com+web%5C%2Fphp%5C%3A+Modified+the+%27mega%27+drop%5C-down+menu+to+open+on+click+instead+of+%27hover+intent%27.+This+should+provide+a+better+%5C%28more+solid%5C%29+user+experience+and+allows+us+to+remove+the+hover+intent+plugin.+All+third%5C-party+JS+is+now+loaded+via+CDN.%5C%3A+images%5C%2Fshade.png+include%5C%2Fheader.inc+include%5C%2Flayout.inc+js%5C%2Fcommon.js+js%5C%2Fjquery.hoverIntent.minified.js+styles%5C%2Fstructure.css+styles%5C%2Ftheme.css%22&o=newest){kind=link}
