0
I try to develop a mega menu, you can see the screen in attachment.
my problem is the text. I am not strong in css. i think this contribution can be usefull if it works correctly.
yo must adapt in function.
The screen shot
[img]http://jmr-location.fr/osc/mega_menu.png[/img]
How to install :
Before you must download this jquery script : http://www.geektantra.com/2010/05/jquery-megamenu-2/
the demo is here : http://www.geektantra.com/projects/jquery-megamenu-2/
now in your header.php:
$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;
Now the stylesheet :
<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 :
// 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;
that's all. It must work.
Edited by Gyakutsuki, 24 January 2012, 14:54.
