Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation What's controlling the background here?

    I'm running a WordPress website with the UberMenu plug-in installed. I'm trying to code it so that when you hover over the green left hand menu then hover over an item in the drop down, the background on that submenu item will turn completely that dark green. I'd also like the dotted border to stretch 100% of the way across.

    I've tried pinpointing the problem in Chrome, Opera, and Firefox with no help.

    Do you have any ideas?

  • #2
    New Coder
    Join Date
    Jun 2011
    Posts
    46
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Just on first glance, you definitely need to declare a doctype to even have a shot at IE displaying correctly. Give that a shot and I'll check back in later.

    http://www.w3schools.com/tags/tag_DOCTYPE.asp

  • #3
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by Hanscraft View Post
    I'm running a WordPress website with the UberMenu plug-in installed. I'm trying to code it so that when you hover over the green left hand menu then hover over an item in the drop down, the background on that submenu item will turn completely that dark green. I'd also like the dotted border to stretch 100% of the way across.

    I've tried pinpointing the problem in Chrome, Opera, and Firefox with no help.

    Do you have any ideas?
    Sorry I'm short on time to double check this and in WP its HARD to make some adjustments because the code is dynamically written through PHP instead of hard coded. Anyways, My first guess is the fact that the two items on the submenu have a difference between them in so far as the fact that one of them has a INLINE CSS style attached to it that the other doesn't.

    Code:
    <li id="menu-item-90" class="menu-item menu-item-type-post_type menu-item-object-page ss-nav-menu-item-depth-1">
    <a href="http://s248198300.onlinehome.us/dlc/community-partnerships/community-services/">
    <span class="wpmega-link-title">Community Services</span>
    </a>
    </li>
    <li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page ss-nav-menu-item-depth-1" style="margin-right: 0pt;"> 
    <a href="http://s248198300.onlinehome.us/dlc/community-partnerships/profiles-of-organizations/">
    <span class="wpmega-link-title">Profiles of Organizations</span>
    </a>
    </li>

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    use following code for green sub menu <a> element

    Code:
    a {
    display:block;
    }
    share CSS code and html for your green sub menu..... ll b able to give you exact solution



  • #5
    New Coder
    Join Date
    May 2010
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The doctype is HTML5 which can be read about here: http://www.w3schools.com/html5/tag_doctype.asp

    Thanks for responding!

  • #6
    New Coder
    Join Date
    May 2010
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation @vikram1vicky

    This is the CSS for the menu:

    Code:
    /*** CONFIG ***/
    
    /* Menu Bar */
    #megaMenu ul.megaMenu{
     	background-color:#3ba600; 
    }
    
    /* Top Level Tab Background, Color, Size about the Font*/
    #megaMenu ul.megaMenu > li > a{
    	color:#fff;
    	/*line-height:2.5em;*/
    	font-size:13px;
    	font-weight:normal;
    }
    
    /* Link Hover Underline */
    #megaMenu ul li a:hover{
    	text-decoration:none;
    }
    
    #megaMenu ul.megaMenu > li > a{
    	border-color:#fff;
    	border-style: dotted;
    	border-width: 0px 0px 1px 0px;
    	border-top:1px solid transparent;
    }
    
    /* Top Level Tab Background, Color :hover */
    #megaMenu ul.megaMenu > li:hover > a,
    #megaMenu ul.megaMenu > li > a:hover,
    #megaMenu ul.megaMenu > li.megaHover > a{	
    	background-color:#5b9400; 
    	color:#fff;
    	
    	border-color: #fff;
    	border-style: dotted;
    	border-width: 0px 0px 1px 0px;
    	
    }
    
    
    
    
    
    /* Sub Menu - Normal - Width*/
    #megaMenu ul li.ss-nav-menu-reg ul{
    	min-width:100px;
    }
    
    
    
    /* Sub Menu Background, Box Shadow */
    #megaMenu li.ss-nav-menu-mega ul.sub-menu.sub-menu-1,
    #megaMenu ul.sub-menu{
    
    	background-color:#5b9400;
    
    	/*box-shadow:0px 0px 6px #666;
    	-moz-box-shadow:0px 0px 6px #666;
    	-webkit-box-shadow:0px 0px 6px #666;*/
    }
    
    /* Sub Menu Border */
    #megaMenu ul li.ss-nav-menu-mega ul.sub-menu.sub-menu-1,
    #megaMenu ul li.ss-nav-menu-reg ul.sub-menu{
    	border-color:#fff;
    	border-style: solid;
    	border-width: 0px 0px 0px 0px;
    	/*margin-top:-1px;*/
    }
    
    
    #megaMenu ul li.ss-nav-menu-reg ul.sub-menu ul{
    	border-width: 0px 0px 0px 0px;
    	/*margin-top:-1px;*/
    }
    
    /* Normal Link Color */
    #megaMenu ul li.ss-nav-menu-mega ul ul.sub-menu li a,
    #megaMenu ul ul.sub-menu li{
    	color: #000;
    	background:transparent;
    }
    
    /* Normal Link Hover Color */
    #megaMenu ul li.ss-nav-menu-mega ul ul.sub-menu li a:hover,
    #megaMenu ul ul.sub-menu > li:hover > a{
    	color:#000;	
    }
    
    /* Header Color, Size, Weight */
    #megaMenu ul li.ss-nav-menu-mega ul.sub-menu-1 > li > a,
    #megaMenu ul li.ss-nav-menu-mega ul.sub-menu-1 > li:hover > a,
    #megaMenu ul li.ss-nav-menu-mega ul ul.sub-menu .ss-nav-menu-header > a,
    .wpmega-widgetarea h2.widgettitle{
    	font-size:12px;
    /* To change the color of the sub menu links */
    	color:#fff;
    	font-weight:bold;
    }
    
    #megaMenu ul.megaMenu > li.ss-nav-menu-reg ul.sub-menu > li > ul.sub-menu{
    	top:-1px;
    }
    
    
    #megaMenu ul li.ss-nav-menu-mega ul.sub-menu li ul.wpmega-postlist div.wpmega-postlist-content{
    	color:#fff;
    }
    #megaMenu ul li.ss-nav-menu-mega ul.sub-menu li ul.wpmega-postlist div.wpmega-postlist-title,
    #megaMenu ul .widget .textwidget,
    #megaMenu ul .wpmega-nonlink{
    	color: #fff;
    }
    
    
    
    /* Vertical Menu */
    
    #megaMenu.megaMenuVertical ul.megaMenu{
    	border-bottom:0px solid #fff;
    }
    
    
    #megaMenu.megaMenuVertical ul.megaMenu li.ss-nav-menu-mega ul.sub-menu.sub-menu-1 a
    /* #megaMenu.megaMenuVertical ul.megaMenu > li > a:hover, */ 
    /* #megaMenu.megaMenuVertical ul.megaMenu > li.megaHover > a */{
    	/*background-color: #668800; */
    	border-color:#fff;
    	border-style: dotted;
    	border-width: 0px 0px 1px 0px;
    }
    
    /* Controls the hover background for the sub menu links. */
    #megaMenu.megaMenuVertical ul.megaMenu li.ss-nav-menu-mega ul.sub-menu.sub-menu-1 a:hover {
    	background-color:#3e8400;
    }
    
    #megaMenu.megaMenuVertical ul.megaMenu li.ss-nav-menu-mega ul.sub-menu.sub-menu-1,
    #megaMenu.megaMenuVertical ul.megaMenu li.ss-nav-menu-reg ul.sub-menu{
    	border-top-width:0px;
    }
    
    
    /* Me trying to get the borders working on the sub menu */
    (I've fussed around with commenting things in and out to try and figure what's controlling what)

    and this is the long php code (not sure where HTML is?) which I think should cover it:

    PHP Code:
    <?php 

    /*
    Plugin Name: UberMenu - WordPress Mega Menu Plugin
    Plugin URI: http://wpmegamenu.com
    Description: Create highly customizable Mega Menus through an easy-to-use WordPress Plugin
    Version: 1.0.3
    Author: Chris Mavricos, SevenSpark
    Author URI: http://sevenspark.com
    License: You should have purchased a license from http://codecanyon.net/item/ubermenu-wordpress-mega-menu-plugin/154703?ref=sevenspark
    */

    /*  Copyright 2010  Chris Mavricos, SevenSpark (email : chris@sevenspark.com) */

    /* Constants */
    define('WPMEGA_NAV_LOCS',     'wp-mega-menu-nav-locations');
    define('WPMEGA_SETTINGS',     'wp-mega-menu-settings');
    define('WPMEGA_STYLES',     'wp-mega-menu-styles');
    define('WPMEGA_PLUGIN_URL'WP_PLUGIN_URL.'/'.str_replace(basename__FILE__),"",plugin_basename(__FILE__)));
    define('WPMEGA_TT',         WPMEGA_PLUGIN_URL.'timthumb/tt.php');

    /* Load Required Files */
    require_once('wpMegaWalker.php');                //Handles Menu Walkers for UberMenu front end and Menu Management Backend
    require_once('wp-uber-menu-admin.php');            //Handles Administrative functionality
    require_once('wp-uber-menu-shortcodes.php');    //Adds useful shortcodes
    require_once('ss_style_generator.php');            //Helps generate user-defined CSS styles

    $WPMEGA_DEMO FALSE//TRUE;                            //This should be FALSE for most users
    if($WPMEGA_DEMO) require_once('demo.php'); 

    /*
     * Initialization Procedures
     */
    function wpmega_init(){

        
    //Actions
        
    add_action('wp_print_styles''wpmega_load_css');
        
    add_action('init''wpmega_load_js');    
        
    add_action('wp_head''wpmega_insert_css'100);                //for the inline CSS option
        
    add_action('wp_head''wpmega_iefix');                            //You can safely disable this if you are including it elsewhere
        
        //Filters
        
    add_filter('wp_nav_menu_args''wpmega_menu_filter'500);      //filters arguments passed to wp_nav_menu
        
        //Register Sidebar Widgets if necessary - now done in a separate hook for better compatibility with theme sidebars
        //wpmega_register_sidebars();
    }
    add_action'plugins_loaded''wpmega_init');

    add_action'after_setup_theme''wpmega_register_sidebars');

    /*
     * Add Support for Thumbnails on Menu Items
     *
     * This function adds support without override the theme's support for thumbnails
     * Note we could just call add_theme_support('post-thumbnails') without specifying a post type,
     * but this would make it look like users could set featured images on themes that don't support it
     * so we don't want that.
     */
    function wpmega_support_thumbs(){
        
        global 
    $_wp_theme_features;
        
    $post_types = array('nav_menu_item');
        
        
    $alreadySet false;
        
        
    //Check to see if some features are already supported so that we don't override anything
        
    if(isset($_wp_theme_features['post-thumbnails']) && is_array($_wp_theme_features['post-thumbnails'][0])){
            
    $post_types array_merge($post_types$_wp_theme_features['post-thumbnails'][0]);
        }
        
    //If they already tuned it on for EVERY type, then we don't need to do anything more
        
    elseif(isset($_wp_theme_features['post-thumbnails']) && $_wp_theme_features['post-thumbnails'] == 1){
            
    $alreadySet true;
        }
        
        if(!
    $alreadySetadd_theme_support('post-thumbnails'$post_types);
    }
    add_action'after_setup_theme''wpmega_support_thumbs'500);    //go near the end, so we don't get overridden

    /*
     * Load CSS Styles
     */
    function wpmega_load_css(){
        
    $tmp WP_PLUGIN_URL.'/'.str_replace(basename__FILE__),"",plugin_basename(__FILE__));
        
    wp_enqueue_style('wpmega-basic',     $tmp.'styles/basic.css',                     false'1.0''all');
        
        
    $settings wpmega_getSettings();
        if(
    $settings['wpmega-style'] == 'preset' || empty($settings['wpmega-style'])){                
            
            
    $id = empty($settings['wpmega-style-preset']) ? $id 'grey-white' $settings['wpmega-style-preset'];        
            if(!empty(
    $id)){
                global 
    $wpmega_stylePresets;
                
    $href $wpmega_stylePresets[$id]['path'];
                
    wp_enqueue_style('wpmega-'.$id$hreffalse1.0'all'); 
            }        
        } 
    }

    /*
     * Apply IE Fixes
     */
    function wpmega_iefix(){
        
    ?>
        <!--[if lt IE 9]>
        <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
        <![endif]-->
        <?php 
    }

    /*
     * Load JavaScript
     */
    function wpmega_load_js(){
        
    $tmp WP_PLUGIN_URL.'/'.str_replace(basename__FILE__),"",plugin_basename(__FILE__));
        
    wp_enqueue_script('jquery');                                // Load jQuery
        
    wp_enqueue_script('wpubermenu'$tmp.'js/wpmegamenu.min.js');    // UberMenu 
        
    wp_enqueue_script('hoverintent'$tmp.'js/hoverIntent.js');    // Hover Intent
        //wp_enqueue_script('thickbox');                                // Thickbox
    }

    /*
     * Insert User-Generated CSS, if required
     */
    function wpmega_insert_css(){
        
    $settings get_option(WPMEGA_SETTINGS);
        if(
    $settings['wpmega-style'] == 'inline'){
            
    ?>
            <style type="text/css">
                <?php echo wpmega_getMegaMenuCSS(); ?>        
            </style>        
            <?php
        
    }
    }

    /*
     * Apply options to the Menu via the filter
     */
    function wpmega_menu_filter($args){

        
    $settings wpmega_getSettings();
        
        
    //Check to See if this Menu Should be Megafied
        
    $location $args['theme_location'];
        
    $activeLocs get_option(WPMEGA_NAV_LOCS, array()); 
        
        
    //In the Event that the LOCATION is empty, that means the theme author has not 
        //created the menu using the location properly, so we'll go ahead and megafy the menu
        
    if($args['megaMenu'] != true && !empty($location) && !in_array($location$activeLocs)) return $args;    //megaMenu setting for manual wp_nav_menu
        
        
    $args['walker']             = new wpMegaWalker();
        
    $args['container']             = 'div';
        
    $args['container_id']         = 'megaMenu';
        
    $args['container_class']     = 'megaMenuContainer megaMenu-nojs';
        
    $args['menu_class']            = 'megaMenu';
        
        if(
    $settings['wpmega-orientation'] == 'vertical')    $args['container_class'].= ' megaMenuVertical';
        else                                                 
    $args['container_class'].= ' megaMenuHorizontal';
        
        if(
    $settings['wpmega-transition'] == 'fade')        $args['container_class'].= ' megaMenuFade';
        
        if(
    $settings['wpmega-trigger'] == 'click')            $args['container_class'].= ' megaMenuOnClick';
        else                                                
    $args['container_class'].= ' megaMenuOnHover';
            
        return 
    $args;
    }

    /*
     * Get UberMenu's settings
     */
    function wpmega_getSettings(){
        
    $settings get_option(WPMEGA_SETTINGS);
        
    $settings apply_filters('wpmega_settings_filter'$settings);
        return 
    $settings;
    }

    /*
     * Get the Post Thumbnail Information
     */
    function wpmega_get_post_thumbnail_info($id){
        
    $i get_post($id);
        
        
    $upath wpmega_get_upload_path();    
        
    $img_url get_bloginfo('url').'/'.$upath.'/'.get_post_meta($id"_wp_attached_file"$single true);
        
    $img_title str_replace('"','\''$i->post_title);    
        
        return array(
            
    'url'        =>    $img_url,
            
    'title'        =>    $img_title,
        );
    }

    /*
     * Get the Post Thumbnail Image
     */
    function wpmega_getPostImage($id$w=30$h=30){
        
        if(empty(
    $w)) $w 30; if(empty($h)) $h 30;
        
        if (
    has_post_thumbnail$id ) ){
            
    $image wp_get_attachment_image_srcget_post_thumbnail_id$id ), 'single-post-thumbnail' );
            
    $src $image[0];
                    
            
    $settings get_option(WPMEGA_SETTINGS);
            if(
    $settings['wpmega-usetimthumb'] == 'on'){    //echo '<pre>'.wpmega_tt($src, $w, $h).'</pre>';
                
    return wpmega_tt($src$w$h);
            }
            else return 
    '<img height="'.$h.'" width="'.$w.'" src="'.$src.'" alt="" />';
        }
        return 
    '';
    }

    /*
     * Get the Upload Path
     */
    function wpmega_get_upload_path(){
        
    $upath get_option('upload_path');
        if(
    $upath == ''$upath 'wp-content/uploads';
        else 
    $upath trim($upath'/');
        
        return 
    $upath;
    }

    /*
     * Variable Dump Utility
     */
    if(!function_exists('ss_dump')){
        function 
    ss_dump($var){
            echo 
    '<pre>'
            
    print_r($var);
            echo 
    '</pre>';
        }
    }

    /*
     * TimThumb function
     */
    function wpmega_tt($src$w$h$title=''$alt=''$zc=1){  //, $rel=''){
        
        
    if(stristr(trim($src), 'http://') != 0){
            
    $src get_bloginfo('url').trim($src);
        }
        
        
    $img '<img src="'.WPMEGA_TT.
                    
    '?src='.$src.
                    
    '&amp;w='.$w.
                    
    '&amp;h='.$h.
                    
    '&amp;zc='.$zc.
                    
    '" alt="'.$alt.'" title="'.$title.'"';
        
    $img.= '/>';
        return 
    $img;
    }


    /* Registering Sidebars */
    function wpmega_register_sidebars(){
        if(
    function_exists('register_sidebars')){
            
    $settings wpmega_getSettings();
            
    $numSidebars $settings['wpmega-sidebars'];
            if(!empty(
    $numSidebars)){
                if(
    $numSidebars == 1){
                    
    register_sidebar(array(
                        
    'name'          => __('UberMenu Widget Area 1'),
                        
    'id'            => 'wpmega-sidebar',
                        
    'before_title'  => '<h2 class="widgettitle">',
                        
    'after_title'   => '</h2>' 
                    
    ));                
                }
                else{
                    
    register_sidebars$numSidebars, array(
                        
    'name'          => __('UberMenu Widget Area %d'),
                        
    'id'            => 'wpmega-sidebar',
                        
    'before_title'  => '<h2 class="widgettitle">',
                        
    'after_title'   => '</h2>' 
                    
    ));
                }
            }
        }
    }
    /* 
     * Show a sidebar
     */
    function wpmega_sidebar($name){
        
        if(
    function_exists('dynamic_sidebar')){
            
    ob_start();
            echo 
    '<ul id="wpmega-'.sanitize_title($name).'">';
            
    dynamic_sidebar($name);        
            echo 
    '</ul>';
            return 
    ob_get_clean();
        }
        return 
    'none';
    }

    /*
     * List the available sidebars
     */
    function wpmega_sidebar_list(){
        
        
    $sb = array();
        
    $settings wpmega_getSettings();
        
    $numSidebars $settings['wpmega-sidebars'];
        
        for(
    $k 0$k $numSidebars$k++){
            
    $val 'UberMenu Widget Area '.($k+1);
            
    $sb[$val] = $val;
        }
        return 
    $sb;
    }

    /*
     * Show a sidebar select box
     */
    function wpmega_sidebar_select($id){    
        
        
    $fid 'edit-menu-item-sidebars-'.$id;
        
    $name 'menu-item-sidebars['.$id.']';
        
    $selection get_post_meta$id'_menu_item_sidebars'true);
        
        
    $ops wpmega_sidebar_list();
        if(empty(
    $ops)) return '';
        
        
    $html.= '<select id="'.$fid.'" name="'.$name.'" class="edit-menu-item-sidebars">';
        
        
    $html.= '<option value=""></option>';
        foreach(
    $ops as $opVal => $op){
            
    $selected $opVal == $selection 'selected="selected"' '';
            
    $html.= '<option value="'.$opVal.'" '.$selected.' >'.$op.'</option>';
        }
                
        
    $html.= '</select>';
        
        return 
    $html;
    }

    /*
     * Count the number of widgets in a sidebar area
     */
    function wpmega_sidebar_count($index){
        
        global 
    $wp_registered_sidebars$wp_registered_widgets;

        if ( 
    is_int($index) ) {
            
    $index "sidebar-$index";
        } else {
            
    $index sanitize_title($index);
            foreach ( (array) 
    $wp_registered_sidebars as $key => $value ) {
                if ( 
    sanitize_title($value['name']) == $index ) {
                    
    $index $key;
                    break;
                }
            }
        }

        
    $sidebars_widgets wp_get_sidebars_widgets();

        if ( empty(
    $wp_registered_sidebars[$index]) || !array_key_exists($index$sidebars_widgets) || !is_array($sidebars_widgets[$index]) || empty($sidebars_widgets[$index]) )
            return 
    false;

        
    $sidebar $wp_registered_sidebars[$index];
        
        return 
    count($sidebars_widgets[$index]);
    }

  • #7
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Have to tried with that code??

  • #8
    New Coder
    Join Date
    May 2010
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry for the delay in responding!

    I tried adding display:block to several lines of code (one part at a time) and nothing changed. So the code is still untouched from where I posted before.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •