summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
author@himerus2010-12-23 18:08:05 -0500
committer@himerus2010-12-23 18:08:05 -0500
commitdf006f5dea951be6cdefb076ec1ad7105391ebe8 (patch)
tree1eafc261af00bfbf7fab1f27ff49e11874e79604
parentb7c6bfe8c42d100e5cbe11cf77c99154492d5ced (diff)
Making menu system modifications; removing current jQuery behavior; pushing to build on new Omega implementation;
-rw-r--r--css/gamma.css155
-rw-r--r--js/gamma.js79
-rw-r--r--preprocess/preprocess-html.inc5
3 files changed, 52 insertions, 187 deletions
diff --git a/css/gamma.css b/css/gamma.css
index bb86968..21b8d5c 100644
--- a/css/gamma.css
+++ b/css/gamma.css
@@ -45,140 +45,83 @@
width: 960px;
margin: 0;
min-height: 36px;
+ position: relative;
}
-/* Main setup for top level menu items */
-#region-menu ul {
+#region-menu ul.main-menu {
font-family: 'Adobe Garamond Pro', Georgia, 'Times New Roman', serif;
- margin: 0;
- padding: 0;
- width: auto;
- line-height: auto;
- float: right;
-}
-/* Main setup for sub level menu items */
-#region-menu ul li ul,
-#region-menu ul li ul li ul,
-#region-menu ul li ul li ul li ul {
- font-family: Helvetica,Verdana,Arial,sans-serif;
- margin: 0;
- padding: 0;
- line-height: 14px;
- overflow: visible;
- text-align: left;
- height: 1px;
- height: auto;
- float: none;
-}
-#region-menu ul li ul {
- border: 1px solid #454545;
- border-top: 0;
- display: none;
- position: absolute;
- z-index: 5;
-}
-
-#region-menu ul li ul li ul,
-#region-menu ul li ul li ul li ul {
- border-top: 1px solid #EEE;
- display: block;
+ background: transparent;
border: 0;
+ float: right;
}
-/* positioning for sub level menu items */
-#region-menu ul li ul li ul,
-#region-menu ul li ul li ul li ul {
- position: relative;
-}
-
-#region-menu ul li {
- display: block;
- float: left;
- clear: none;
+#region-menu ul.main-menu li {
margin-left: 1px;
font-size: 24px;
padding: 0;
- overflow: hidden;
-}
-
-#region-menu ul li ul li,
-#region-menu ul li ul li ul li,
-#region-menu ul li ul li ul li ul li {
- font-size: 14px;
- margin: 0;
- margin-top: 1px;
- padding: 0;
- display: block;
- float: none;
- clear: both;
- list-style-type: none;
- list-style-image: none;
+ position: relative;
}
-#region-menu ul li ul li.first {
- margin-top: 0;
+#region-menu ul.main-menu li a {
+ padding: 10px 15px;
+ background: #FFF;
}
-#region-menu ul li ul li ul li:first,
-#region-menu ul li ul li ul li ul li:first {
- margin-top: 1px;
+#region-menu ul.main-menu li a:hover,
+#region-menu ul.main-menu li.active-trail a,
+#region-menu ul.main-menu li.active a {
+ background: #EEE;
}
-#region-menu ul.links li a {
- background: none;
- border: 0;
+#region-menu ul.main-menu li ul {
+ border: 1px solid #454545;
+ border-top: 0px;
+ background: #EEE;
}
-#region-menu ul li a {
- display: block;
- padding: 10px 15px;
- text-decoration: none;
+#region-menu ul.main-menu li ul li ul {
position: relative;
-}
-
-#region-menu ul li ul li a {
- background: #DDD url('../i/bullet-454545.png') no-repeat 6px 50%;
- color: #454545;
+ left:0;
+ top:0;
display: block;
- padding: 8px 4px 8px 32px;
-}
- #region-menu ul li ul li ul li a {
- background: #DDD url('../i/bullet-454545.png') no-repeat 32px 50%;
- display: block;
- padding: 8px 4px 8px 64px;
- }
- #region-menu ul li ul li ul li ul li a {
- background: #DDD url('../i/bullet-454545.png') no-repeat 64px 50%;
- text-decoration: none;
- display: block;
- padding: 8px 4px 8px 96px;
- }
-
-#region-menu ul li {
- background: #8c8c8c;
+ border: 0;
}
-#region-menu ul li.active,
-#region-menu ul li.active-trail {
- background: #EEE;
+#region-menu ul.main-menu li ul li a {
+ padding: 5px 10px;
}
-
-#region-menu ul li a {
- color: #EEE;
+#region-menu ul.main-menu li ul li ul li a {
+ padding-left: 20px;
}
+#region-menu ul.main-menu li ul li ul li ul li a {
+ padding-left: 30px;
+}
+#region-menu ul.main-menu li ul li ul li ul li ul li a {
+ padding-left: 40px;
+}
+#region-menu ul.main-menu li ul li ul li ul li ul li ul li a {
+ padding-left: 50px;
+}
+#region-menu ul.main-menu li ul li {
+ font-size: 14px;
-#region-menu ul li.active a,
-#region-menu ul li.active-trail a {
- color: #454545;
}
/* Rounded Top Right Corner of the top level menu items. */
-#region-menu ul > li.last,
-#region-menu ul > li.last > a {
+#region-menu ul.main-menu > li.last,
+#region-menu ul.main-menu > li.last > a {
border-radius: 0 15px 0 0;
-moz-border-radius: 0 15px 0 0;
-webkit-border-radius: 0 15px 0 0;
}
/* Rounded Bottom Left & Right corners for the last item in a dropdown */
-#region-menu ul > li > ul,
-#region-menu ul > li > ul > li.last,
-#region-menu ul > li > ul > li.last a {
+#region-menu ul.main-menu > li > ul,
+#region-menu ul.main-menu > li > ul > li.last,
+#region-menu ul.main-menu > li > ul > li.last a {
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
}
+/* Remove the rounded corners (in gamma) for the 3rd and futher level menus as they appear "inline" */
+#region-menu ul.main-menu > li > ul > li > ul,
+#region-menu ul.main-menu > li > ul > li > ul > li.last,
+#region-menu ul.main-menu > li > ul > li > ul > li.last a {
+ border-radius: 0;
+ -moz-border-radius: 0;
+ -webkit-border-radius: 0;
+}
/* End Primary Nav & Dropdowns */
diff --git a/js/gamma.js b/js/gamma.js
index f45d694..e03ec35 100644
--- a/js/gamma.js
+++ b/js/gamma.js
@@ -8,85 +8,6 @@
* @todo Make sure the menus accomodate menus that are only 2 wide on the top level.
*/
$(document).ready(function(){
- // even up the menus to a non decimal width value
- // this happens because we don't define specific CSS width
- // and rely on padding to give us a nice width
- $('#region-menu .links:first > li').each(function(){
- var currentWidth = $(this).innerWidth();
- $(this).width(Math.round(currentWidth));
- });
- // make the menu sexy
- $('#region-menu .links:first > li').hover(
- // hover in
- function(){
- if(!$(this).hasClass('active-trail')) {
- $(this).children('a').stop().animate({
- "color": "#454545",
- }, 1000, function() {
- });
- $(this).addClass('hovering').stop().animate({
- "backgroundColor": "#DDD",
- }, 150, function() {
-
- });
- }
- // find the position of the parent LI in the menu
- var parentIndex = $('#region-menu .links:first > li').index(this);
- // find the number of total items in the menu
- var totalNum = $('#region-menu .links:first > li').size();
- // each dropdown is the width of the next 3 menu items by default
- // if the menu item is one of the last two, we need to change the way
- // the width and positioning is calculated.
- if(totalNum - parentIndex < 3) {
- // this menu item is one of the last two, and we need to calculate differently.
- // find offset of the parent LI
- var leftItem = totalNum - 3;
- var rightItem = totalNum - 1;
- var offset = $('#region-menu .links:first > li:eq('+leftItem+')').offset();
- // get the left offset of the parent LI
- var leftOffset = offset.left - 1;
- // grab the appropriate indexes for the left and right positions of the menu
- var rightIndex = rightItem;
- }
- else {
- // Default implementation
- // find offset of the parent LI
- var offset = $(this).offset();
- // get the left offset of the parent LI
- var leftOffset = offset.left - 1;
- // grab the appropriate indexes for the left and right positions of the menu
- var rightIndex = parentIndex + 2;
- }
- // get the left offset of the last menu item to line up with
- var offsetLast = $('#region-menu .links:first > li:eq('+rightIndex+')').offset();
- var lastLeftOffset = offsetLast.left;
- // get the width of the last item
- var rightWidth = $('#region-menu .links:first > li:eq('+rightIndex+')').outerWidth();
- // create the "right offset" of the last item
- var rightOffset = lastLeftOffset + rightWidth;
- // determine the true width of the dropdown menu
- var menuWidth = rightOffset - leftOffset - 1;
- // move the child menu to the appropriate position and size
- $(this).addClass('isPositioned').children('ul').css('width', menuWidth).css('left', leftOffset).slideDown('normal');
- console.log(leftOffset);
- },
- // hover out
- function(){
- $(this).stop().children('ul').slideUp('normal').end();
- // don't re-animate the active item
- if(!$(this).hasClass('active-trail')) {
- $(this).children('a').stop().animate({
- "color": "#EEE",
- }, 1000, function() {
-
- });
- $(this).animate({
- "backgroundColor": "#8d8c8c",
- }, 1000, function() {
- $(this).removeClass('hovering');
- });
- }
- });
/**
* Respect primary menu trails, regardless of menu structure
*/
diff --git a/preprocess/preprocess-html.inc b/preprocess/preprocess-html.inc
index eef39d1..b18928f 100644
--- a/preprocess/preprocess-html.inc
+++ b/preprocess/preprocess-html.inc
@@ -5,7 +5,8 @@
* preprocess-block.inc is an alternate location for storage on items
* to be ran during hook_preprocess_html.
*/
+
+// add jQuery UI elements to make the primary menu pop
drupal_add_js('misc/ui/jquery.effects.core.min.js');
drupal_add_js('misc/ui/jquery.effects.bounce.min.js');
-
-$vars['scripts'] = drupal_get_js(); \ No newline at end of file
+//$vars['scripts'] = drupal_get_js(); \ No newline at end of file