Update drop down menu

Worked out a way to add the featured images into the drop down nav using
jquery to add an image tag.

diff --git a/functions.php b/functions.php
index da4f409..6718484 100644 (file)
--- a/functions.php
+++ b/functions.php
@@ -123,8 +123,8 @@ class Feature_Top_Bar_Walker extends Walker_Nav_Menu {
         // Insert style to display page's thumbnail
         $item_style = '';
         if ($depth == 0 && has_post_thumbnail((int)$object->object_id)) {
-            $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id((int)$object->object_id), 'medium');
-            $item_style .= "<style>#menu-item-".$object->ID." > .dropdown:before { background-image: url('".$thumbnail[0]."');</style>";
+            $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id((int)$object->object_id), 'bpla-drop-down');
+            //$item_style .= "<style>#menu-item-".$object->ID." > .dropdown:before { background-image: url('".$thumbnail[0]."');</style>";
         }
         //$output .= ( 0 == $depth ) ? '<li class="divider"></li>' : '';
         $classes = empty( $object->classes ) ? array() : (array) $object->classes;
@@ -135,13 +135,23 @@ class Feature_Top_Bar_Walker extends Walker_Nav_Menu {
         if ( in_array( 'divider', $classes ) ) {
             $item_html = preg_replace( '/<a[^>]*>( .* )<\/a>/iU', '', $item_html );
         }
-        if ($item_style)
+        if ($item_style) {
             $output .= $item_style;
+        }
+        if ($depth == 0 && has_post_thumbnail((int)$object->object_id) && $object->has_children) {
+            $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id((int)$object->object_id), 'bpla-drop-down');
+            $item_html .= '<script>var img_for_menu_' . $object->ID . ' = "' . $thumbnail[0] . '";</script>';
+            //$item_html .= '<pre>' . print_r($object, true) . '</pre>';
+        }
         $output .= $item_html;
     }
 
     function start_lvl( &$output, $depth = 0, $args = array() ) {
-        $output .= "\n<ul class=\"sub-menu dropdown\">\n";
+        if ($depth == 0) {
+            $output .= "\n<ul class=\"sub-menu dropdown\">\n";
+            $output .= "\n<li class=\"image-placeholder\" style=\"position: absolute; left: 20px; top: 22px;width: 219px;height: 169px;border-bottom:none;border: 4px solid green;\">";
+            $output .= "</li>\n";
+        }
     }
 
 }
@@ -297,5 +307,10 @@ function mytheme_search_loop() {
 }
 
 add_action('thematic_searchloop', 'mytheme_search_loop');
+add_action('after_setup_theme', 'bpla_theme_setup');
+function bpla_theme_setup()
+{
+    add_image_size( 'bpla-drop-down', 219, 169, true );
+}
 // End of the Contextual/Highlight Search functions
 ?>

diff --git a/js/app.js b/js/app.js
index c9b9788..2c28fa6 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -17,4 +17,12 @@ $(document).ready(function () {
         $(this).toggleClass('open');
         $(this).siblings('ul').toggleClass('open');
     });
+    $('.top-bar-section').find('ul.sub-menu.dropdown').each(function (){
+        var menuImg = $(this).parent('li').prop('id');
+        var menuNum = menuImg.match(/\d+/)[0];
+        var menuImgSrc = 'img_for_menu_' + menuNum;
+        $(this).find('li.image-placeholder').html('<img src="' + eval(menuImgSrc) + '">');
+        console.log('ul = ' + menuImg);
+        console.log('menu-id = ' + menuNum);
+    });
 });

diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index 741d565..dde383c 100644 (file)
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -8,4 +8,12 @@ $(document).ready(function () {
         $(this).toggleClass('open');
         $(this).siblings('ul').toggleClass('open');
     });
+    $('.top-bar-section').find('ul.sub-menu.dropdown').each(function (){
+        var menuImg = $(this).parent('li').prop('id');
+        var menuNum = menuImg.match(/\d+/)[0];
+        var menuImgSrc = 'img_for_menu_' + menuNum;
+        $(this).find('li.image-placeholder').html('<img src="' + eval(menuImgSrc) + '">');
+        console.log('ul = ' + menuImg);
+        console.log('menu-id = ' + menuNum);
+    });
 });