Version imprimable du sujet

Cliquez ici pour voir ce sujet dans son format original

Forum osCommerce-fr _ Contributions OsC2.3 _ Mega Menu - Image multi css

Écrit par : kakashi 24 Jan 2012, 15:59

Hello,

j'essaye de développer un mega menu, vous pouvez vois la capture écran ci dessous
Le problème est l'organisation du text qui part en vrille, j'ai essayé plusieurs choses, mais je galère au niveau css et peut être au niveau des div.

Donc avis aux expert dev, css, si vous voulez bien !!

The screen shot



Comment l'installer :

Vous devez télécharger ce script : http://www.geektantra.com/2010/05/jquery-megamenu-2/
la démo est ici : http://www.geektantra.com/projects/jquery-megamenu-2/
Attention, c'est une installation brut.

Dans votre header.php:


Code
        $header .= '<script type="text/javascript" src="'ext/javascript/jquery_megamenu_2_1/javascripts/jquery.megamenu.js" /></script>' . "\n";
        $header .= '<script type="text/javascript">' . "\n";
        $header .= 'jQuery(document).ready(function(){';
        $header .= 'jQuery(".megamenu").megamenu({';
        $header .= 'activate_action: "mouseover",';
        $header .= 'deactivate_action: "mouseleave",';
        $header .= 'show_method: "slideDown",';
        $header .= 'hide_method: "slideUp",';
        $header .= 'justify: "left",';
        $header .= 'enable_js_shadow: false,';
        $header .= 'shadow_size: 3,';
        $header .= 'mm_timeout: 250';
        $header .= '});';
        $header .= '});' . "\n";
        $header .= '</script>' . "\n";
        echo $header;


stylesheet :

Code
<style>
/*
  jQuery MegaMenu Plugin
  Author: GeekTantra
  Author URI: [url="http://www.geektantra.com"]http://www.geektantra.com[/url]
*/

div.searchMegaDropDown {
  float:right;
  padding-right:5px;
  padding-top:10px;
  padding-bottom:7px;
  background-color: #a39993;
}


div.hr, span.hr{
  height: 3px;
  width:100%;
  background: #b43079;
}

div.hr hr {
  display: none;
}


div.backgroundPageDropDown {
  background-color: #a39993;
  height:43px;
}

div.PageDropDown {
  float:left;
  background-color: #a39993;
}


ul.megamenu {
  background-color: #a39993;
  margin: 0px auto;
  padding: 5px 0px 5px 0px;
  list-style: none;
  display: none;
  width:720px
}




ul.megamenu li.mm-item {
  background-color: #a39993;
  border-right: 1px solid #dadada;
  padding: 0 68px 0 68px; /* ecart entre les liens de categories */

}

ul.megamenu li {
  margin: 0;
  padding: 0;
}

ul.megamenu li.clear-fix {
  float: none;
  clear: both;
  margin: 0;
  padding: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}


ul.megamenu a.mm-item-link:link, ul.megamenu a.mm-item-link:visited {
  position: relative;
  display: inline-block;
  color: #FFF;  
  padding: 8px 16px; /* changer ici pour l'image et l'espacer */
  margin: 0 0 0 0;
  text-decoration: none;
  text-transform:uppercase;
  z-index: 600;
  font-size: 14px;
  font-weight:bold;
}

ul.megamenu a.mm-item-link-hover:link {  
  background:url("../../../../../image/template/karawan2011/imy_con_menu_dropdown.gif") no-repeat  !important;
  background-position:left  !important;
}


ul.megamenu a.mm-item-link-hover:visited {
width:500px;
}



ul.megamenu div.mm-item-content {
  background-color: #c7bbb8;
  padding: 0px;
  margin-top:-8px;
  position: absolute;
  border: 4px solid #7e736f;
  z-index: 600;
  left:0 !important; /* ne pas supprimer */

}

.mm-js-shadow {
  background-color: #555;
  position: absolute;
  z-index: 600;
}


.mm-content-base {
  background-color: #eae6e4;
  position: relative;
  padding: 10px;
  height:305px; /* hauteur du tableau */
  z-index: 600;
}



#list-content, #list-content ul {
  margin: 0px;
  padding-left: 10px;
  margin-top:10px;

}

#list-content li {
  margin: 0px;
  padding: 10px 20px 20px 20px;  

}

#paragraph-content li{
  margin: 0px;
  padding: 0px;
  width: 50%; /* Important concernalt les liens des sous  catégories niveau 1 */
  font-size:14px;
  font-weight:bold;  
/* padding-bottom: 50px; espace entre les liens */
}


#paragraph-content, #quote-content {
  text-align: left;
/*      padding-bottom: 50px; espace entre les paragraphes */

}

.megacolumn {
    width: 860px; /* lageur du tableau */
    float: left;
}


.megacolumnSubSubCategories {
    width: 310px;
    float:left;

}

.megacolumn-content {
    padding: 10px 0 10px;
    color:#78615A !important;
    width: 110%;  
    float:none !important;
    font-size:14px!important;


}



.megacolumn-content p {
    padding-bottom:10px!important;
    text-align:left;
}



#mega_c1, #mega_c2 {
padding-top:10px;

/*
    border-right: 1px dotted #000;
    overflow: hidden;
*/    
}

.megawrapper {
    width: 860px;
    float:left;

}
/* ******************************

             MULTI CSS

**********************************/

.megawapperImage1 {
    width: 860px;
    height:305px;
    float:left;
    background:url("../../../../../image/template/karawan2011/my_image_1.png") no-repeat scroll 710px 200px  !important;
}

.megawapperImage2 {
    width: 860px;
    height:305px;
    float:left;
    background:url("../../../../../image/template/karawan2011/my_image_2.png") no-repeat scroll 710px 100px  !important;
}


.megawapperImage3 {
    width: 860px;
    height:200px;
    float:left;
    background:url("../../../../../image/template/karawan2011/my_image3.png") no-repeat scroll 710px 5px  !important;
}


.megawrapper ul {
/*    background-image: none;    */
    position: relative;
    top: auto;
    padding-bottom: 10px;
}

.megawrapper ul li {
/*    background-color: transparent;*/

}

.megawrapper ul li a{
    height: 1%;
    position: relative;

}

.megawrapper ul li a:hover {
    height: 1%;
    position: relative;
    width:100%;

}

/* sous sous catégorie */

.megawrapperSubSubCategories {
/*
    background-position: bottom;
    background-repeat: repeat-x;
    padding-top: 15px;
    width: 860px;
    float:left;
*/
}

.megawrapperSubSubCategories ul a{
    font-size:12px;
    text-transform:none;
    color: #78615A !important;
    font-weight:normal;
    font-family:Arial, Helvetica, sans-serif;    
}


.megawrapperSubSubCategories li a{
    font-size:12px;
    text-transform:none;
    color: #78615A !important;
    font-weight:normal;
    font-family:Arial, Helvetica, sans-serif;    
}



.megawrapperSubSubCategories ul li a:hover {
    color: #78615A !important;
    font-size:12px;
    font-weight:normal;        
    font-family:Arial, Helvetica, sans-serif;    

}

</style>


Now the script in yoour header or a files :

Code
// Create the root unordered list
     function tep_make_catsf_ullist($rootcatid = 0, $maxlevel = 4){
       global $idname_for_menu, $cPath_array, $show_full_tree, $languages_id;

        $show_full_tree = true;
        $idname_for_menu = 'megamenu';  // see superfish.css
        $classname_for_selected = ''; // see superfish.css
        $classname_for_parent = ''; //see superfish.css

// Global Variables
     $GLOBALS['this_level'] = 0;
// Modify category query if not fetching all categories (limit to root cats and selected subcat tree)
        if (!$show_full_tree) {
          $parent_query = 'AND (c.parent_id = "0"';
          if (isset($cPath_array)) {
            $cPath_array_temp = $cPath_array;
            foreach($cPath_array_temp AS $key => $value) {
              $parent_query .= ' OR c.parent_id = "'.$value.'"';
            }
            unset($cPath_array_temp);
          }
          $parent_query .= ')';  
  } else {
          $parent_query = '';
  }

  $result = tep_db_query('select c.categories_id,
                                       cd.categories_name,
                                       c.parent_id
                                from ' . TABLE_CATEGORIES . ' c,
                                     ' . TABLE_CATEGORIES_DESCRIPTION . ' cd
                                where c.categories_id = cd.categories_id
                                and c.virtual_categories = 0
                                and cd.language_id="' . (int)$languages_id .'"
                                '.$parent_query.'
                                order by sort_order,
                                         cd.categories_name
                                ');
  
  while ($row = tep_db_fetch_array($result)) {  
          $table[$row['parent_id']][$row['categories_id']] = $row['categories_name'];
        }
        $output .= '<ul class="'.$idname_for_menu.'">'; // categorie sf_mmenu
        $output .= '<li>';
        $output .= tep_make_catsf_ulbranch($rootcatid, $table, 0, $maxlevel);
// Close off nested lists
        for ($nest = 0; $nest <= $GLOBALS['this_level']; $nest++) {
          $output .= '</li>';
          $output .= '</ul>';
  }

        return $output;
      }

// Create the branches of the unordered list
      function tep_make_catsf_ulbranch($parcat, $table, $level, $maxlevel) {
        global $cPath_array, $classname_for_selected, $classname_for_parent, $valCpathCss;
        $list = $table[$parcat];

        while(list($key,$val) = each($list)){
          if ($GLOBALS['this_level'] != $level) {
            if ($GLOBALS['this_level'] < $level) {
             $output .= "\n";
             $output .= '<ul id="paragraph-content">';
             $output .= '<li class="list-content">';
            $output .= '<div>';

             if ($GLOBALS['this_level'] == 0) {
               $output .= '<div class="megawrapper">';  
               $output .= '<div class="megawapperImage'.$valCpathCss.'">';  
               $output .= '<div  id="mega_c2" class="megacolumn-content">';
             }
             if ($GLOBALS['this_level'] == 1) {
               $output .= '<div class="megawrapperSubSubCategories"
  
    
style="    
    padding-top:10px !important;
    width:500px !important;    
    margin-left:-90px !important;
padding-bottom:10px !important;
    border-right: 1px solid #bfb9b7 !important;
font-weight:bold !important;
font-size:12px !important;
font-weight:bold !important;
font-size:12px !important;
   "
>';

                $output .= '<div  style="">';
                $output .= '<div style="
    ">';
             }

             if ($GLOBALS['this_level'] == 2) {
               $output .= '<div style="      margin-left:-70px!important;
    padding-top:10px!important;
          width:275px!important;      
/*
    padding-top:10px!important;
     padding-bottom:10px!important;
float:none!important;
  
*/    
     " >';
               $output .= '<div>';
               $output .= '<div>';
             } else {
               $output .= '';
             }





          $output .= '<ul>';  
  
            } else {
              for ($nest = 1; $nest <= ($GLOBALS['this_level'] - $level); $nest++) {
               $output .= '</div>';
               $output .= '</div>';
               $output .= '</div>';
               $output .= '</div>';
               $output .= '</li>';
               $output .= '</ul>';
    
              } // end for  
            } // end if
            $GLOBALS['this_level'] = $level;
          }  // end if
          if (isset($cPath_array) && in_array($key, $cPath_array) && $classname_for_selected) {
            $this_cat_class = ' class="'.$classname_for_selected.'"';
          } else {
            $this_cat_class = '';
          }

//          $output .= '<li class="cat_lev_'.$level.'"><a href="';
             $output .= '<li><a href="'; // affichage du lien
  


  
          if (!$level) {
            unset($GLOBALS['cPath_set']);
            $GLOBALS['cPath_set'][0] = $key;
            $cPath_new = 'cPath=' . $key;
            $valCpathCss = implode("_", array_slice($GLOBALS['cPath_set'], 0, ($level+1)));
          } else {
            $GLOBALS['cPath_set'][$level] = $key;
            $cPath_new = 'cPath=' . implode("_", array_slice($GLOBALS['cPath_set'], 0, ($level+1)));
          }
  
          if (tep_has_category_subcategories($key) && $classname_for_parent) {
            $this_parent_class = ' class="'.$classname_for_parent.'"';
          } else {
            $this_parent_class = '';
          }  

// entete couleur du menu
          $output .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '"'.$this_parent_class.' >'.$val;
  
          if (SHOW_COUNTS == 'true') {
            $products_in_category = tep_count_products_in_category($key);
            if ($products_in_category > 0) {
                $output .= '&nbsp;(' . $products_in_category . ')';
            }
          }

          $output .= '</a>';
          if (!tep_has_category_subcategories($key)) {
             $output .= '</li>';
          }      
      
          if ((isset($table[$key])) AND (($maxlevel > $level + 1) OR ($maxlevel == '0'))) {
            $output .= tep_make_catsf_ulbranch($key,$table,$level + 1,$maxlevel);
          }
        } // End while loop
        return $output;
      }

// Initialize HTML and info_box class if displaying inside a box
// Generate a bulleted list (uses configuration options above)
      $categories_string = tep_make_catsf_ullist();
       $header_template = '<!-- header template  megamenu start -->';
       $header_template .= '<div class="clear"></div>';
       $header_template .= '<div class="backgroundPageDropDown">';  
       $header_template .= '<div class="PageDropDown" >';
       $header_template .=  $categories_string; // display the categories
  
       $header_template .= '</div>'; // end PageDropDown
       $header_template .= '<div class="searchMegaDropDown">';
       $header_template .= tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get');
       $header_template .= tep_image_submit('button_quick_find.png', MODULE_BOXES_SEARCH_BOX_TITLE, 'align="top"') . ' '. tep_draw_input_field('keywords', '', 'size="60" maxlength="30" style="width: 90px;"') . tep_draw_hidden_field('search_in_description', '1') . tep_hide_session_id() . tep_image_submit('button_quick_find_ok.png', MODULE_BOXES_SEARCH_BOX_TITLE, 'align="top"') .'</a>';
       $header_template .= '</form>';
       $header_template .= '</div>'; // end search
       $header_template .= '</div>'; // end backgroundPageDropDown
       $header_template .= '<div class="clear" style="padding-top:0; padding-bottom:0;"></div>';
       $header_template .= '<div class="hr"></div>' . "\n";
       $header_template .= '<!-- header template megamenu  end -->' . "\n";

echo   $header_template;


Cela devrait fonctionner.

Propulsé par Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)