É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 .= ' (' . $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.