Mega Menu - Image multi css |
Bienvenue invité ( Connexion | Inscription )
Mega Menu - Image multi css |
24 Jan 2012, 15:59
Message
#1
|
|
Ceinture blanche OSC Groupe : Membres Messages : 19 Inscrit : 28-October 10 Membre no 28192 |
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 .= ' (' . $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. -------------------- |
|
Version bas débit | Nous sommes le : 28th March 2024 - 11:20 |
Ce site est déclaré auprès de la commision Nationale de l'Informatique et des Libertés (déclaration n°: 1043896) |