Kgn_Explodemenu - Version 0.1.0

Version Notes

New Explode Menu

Download this release

Release Info

Developer Magento Core Team
Extension Kgn_Explodemenu
Version 0.1.0
Comparing to
See all releases


Version 0.1.0

Files changed (3) hide show
  1. app/design/frontend/default/default/template/catalog/navigation/top.phtml +211 -0
  2. package.xml +18 -0
  3. skin/frontend/default/default/css/explodemenu.css +75 -0
app/design/frontend/default/default/template/catalog/navigation/top.phtml ADDED
@@ -0,0 +1,211 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /**
3
+ * Magento Commercial Edition
4
+ *
5
+ * NOTICE OF LICENSE
6
+ *
7
+ * This source file is subject to the Magento Commercial Edition License
8
+ * that is available at: http://www.magentocommerce.com/license/commercial-edition
9
+ * If you did not receive a copy of the license and are unable to
10
+ * obtain it through the world-wide-web, please send an email
11
+ * to license@magentocommerce.com so we can send you a copy immediately.
12
+ *
13
+ * DISCLAIMER
14
+ *
15
+ * Do not edit or add to this file if you wish to upgrade Magento to newer
16
+ * versions in the future. If you wish to customize Magento for your
17
+ * needs please refer to http://www.magentocommerce.com for more information.
18
+ *
19
+ * @category design
20
+ * @package base_default
21
+ * @copyright Copyright (c) 2010 Magento Inc. (http://www.magentocommerce.com)
22
+ * @license http://www.magentocommerce.com/license/commercial-edition
23
+ */
24
+ ?>
25
+ <?php
26
+ /**
27
+ * Top menu for store
28
+ *
29
+ * @see Mage_Catalog_Block_Navigation
30
+ */
31
+ ?>
32
+ <?php
33
+ /**
34
+ * $this->renderCategoriesMenuHtml() supports optional arguments:
35
+ * int Level number for list item class to start from
36
+ * string Extra class of outermost list items
37
+ * string If specified wraps children list in div with this class
38
+ */
39
+ ?>
40
+
41
+ <?php //DebugBreak(); ?>
42
+
43
+ <link rel="stylesheet" href="<?php echo $this->getSkinUrl('css/explodemenu.css'); ?>" type="text/css" media="screen" />
44
+
45
+ <?php $_menu = $this->renderCategoriesMenuHtml(0,'level-top') ?>
46
+ <?php if($_menu): ?>
47
+ <div class="nav-container">
48
+ <ul id="nav">
49
+ <?php
50
+ global $sm_cat_depth;
51
+ $sm_cat_depth = 0;
52
+ $i_count = 1;
53
+ $k=1;
54
+ $icount = 0;
55
+
56
+ $nav_class = new Mage_Catalog_Block_Navigation;
57
+
58
+ $current_cat = $this->getCurrentCategory();
59
+
60
+ foreach ($this->getStoreCategories() as $_category)
61
+ {
62
+ if ($_category->getIsActive())
63
+ {
64
+ $li_class = str_replace(' ', '_', $this->htmlEscape($_category->getName()));
65
+ $a_class = '';
66
+
67
+
68
+
69
+ if(method_exists($_category, 'getChildrenCategories')) $childrens = $_category->getChildrenCategories();
70
+ else $childrens = $_category->getChildren();
71
+
72
+ $icount = $childrens->count();
73
+
74
+ if($nav_class->isCategoryActive($_category))
75
+ {
76
+ $li_class = 'active';
77
+ if($_category->getName() == $current_cat->getName())
78
+ {
79
+ $sm_cat_depth = 1;
80
+ }
81
+
82
+ }
83
+ $over ='over';
84
+
85
+ if($icount==1){
86
+ $count_width = ($icount*240);
87
+
88
+ }elseif($icount<=3){
89
+ $count_width = ($icount*220);
90
+ }else{
91
+ $count_width = (3*220);
92
+ }
93
+ if($count_width>=660)
94
+ $count_width = (3*220);
95
+
96
+ $lengthcss = '';
97
+ if(strlen($_category->getName())<15)
98
+ {
99
+ $lengthcss = 'oneline ';
100
+ }
101
+
102
+ echo '<li id="dmenu" ic="'.$k.'" class="'.$lengthcss.' level0 level-top nav-'.$k.' nav-'.$count_width.' '.$li_class.' nav-'.$k.''.$li_class.'"><a href="'.$nav_class->getCategoryUrl($_category).'" class="'.$lengthcss.' level-top mark' . $i_count . '">'.$this->htmlEscape($_category->getName()).'</a>';
103
+
104
+ if($childrens)
105
+ {
106
+ $children_second = '';
107
+ $l = 1;
108
+ $o = 1;
109
+ foreach ($childrens as $children)
110
+ {
111
+ $li_class = '';
112
+ if($nav_class->isCategoryActive($children))
113
+ {
114
+ $li_class = $li_class.' active';
115
+
116
+ if($children->getName() == $current_cat->getName())
117
+ {
118
+ $sm_cat_depth = 2;
119
+ }
120
+ }
121
+ if ($children->getIsActive())
122
+ {
123
+ if($l==1) $lcss = 'first'; else $lcss = '';
124
+ if(empty($lcss)) { if($l == $childrens->count()) $lcss = 'last'; else $lcss = ''; }
125
+
126
+ $children_second .= '<li class="level1 nav-1-'.$l.' '.$lcss.' '. str_replace(' ', '_', $this->htmlEscape($children->getName())) .' '.$li_class.' "><a href="'.$nav_class->getCategoryUrl($children).'">'.$this->htmlEscape($children->getName()).'</a>';
127
+ $l++;
128
+ if(method_exists($children, 'getChildrenCategories')) $sub_childrens = $children->getChildrenCategories();
129
+ else $sub_childrens = $children->getChildren();
130
+ if($sub_childrens)
131
+ {
132
+ $children_third= '';
133
+ foreach ($sub_childrens as $sub_children)
134
+ {
135
+ $li_class = '';
136
+ if($nav_class->isCategoryActive($sub_children))
137
+ {
138
+ $li_class = 'active';
139
+
140
+ if($sub_children->getName() == $current_cat->getName())
141
+ {
142
+ $sm_cat_depth = 3;
143
+ }
144
+ }
145
+ if ($sub_children->getIsActive())
146
+ {
147
+
148
+ if($o==1) $ocss = 'first'; else $ocss = '';
149
+ if(empty($ocss)) { if($o == $sub_childrens->count()) $ocss = 'last'; else $ocss = ''; }
150
+
151
+ $children_third .= '<li class="level2 nav-2-2-'.$o.' '.$ocss.' '.$li_class.'"><a href="'.$nav_class->getCategoryUrl($sub_children).'">'.$this->htmlEscape($sub_children->getName()).'</a></li>'."\n";
152
+ $o++;
153
+ }
154
+ }
155
+ if(!empty($children_third))
156
+ {
157
+ //$children_second .= '<div class="drop"><div class="t"><div class="bg-tl"></div><div class="bg-tr"></div></div>';
158
+ $children_second .= '<div class="window-inner">';
159
+ $children_second .= '<ul class="level1">' . $children_third . '</ul>';
160
+ $children_second .= '</div>';
161
+ }
162
+ }
163
+
164
+ $children_second .= '</li>'."\n";
165
+ }
166
+ }
167
+ if(!empty($children_second))
168
+ {
169
+ //echo '<div class="drop"><div class="t"><div class="bg-tl"></div><div class="bg-tr"></div></div>';
170
+
171
+ //echo '<div class="submenu" style="width:'.$count_width.'px;"><div class="submenu-inner">';
172
+ echo '<div class="submenu men'.$count_width.'" style="width:'.$count_width.'px;"><div class="submenu-inner">';
173
+ echo '<ul class="level0">' . $children_second . '</ul>';
174
+ echo '</div></div>';
175
+ //echo '</div></div>';
176
+ }
177
+ }
178
+ echo '</li>'."\n";
179
+ $k++;
180
+ $i_count++;
181
+ }
182
+ }
183
+ ?>
184
+
185
+ </ul>
186
+ </div>
187
+ <?php endif ?>
188
+ <script type="text/javascript">
189
+ function showHeight(h) {
190
+ jQuery(".submenu-side").height(h);
191
+ }
192
+ jQuery(document).ready(function() {
193
+
194
+ jQuery(".submenu-side").each(function () {
195
+ if (jQuery(this).cssClass == 'submenu-r sidebar')
196
+ jQuery(this).height(eval(jQuery(this).parent().height()) - eval(70));
197
+ else
198
+ jQuery(this).height(eval(jQuery(this).parent().height()) - eval(30));
199
+ });
200
+ });
201
+
202
+ jQuery('li#dmenu').mouseover(function() {
203
+ $count_val = jQuery(this).attr('ic');
204
+ jQuery(this).addClass('hover'+$count_val);
205
+ });
206
+ jQuery('li#dmenu').mouseout(function() {
207
+ $count_val = jQuery(this).attr('ic');
208
+ jQuery(this).removeClass('hover'+$count_val);
209
+ });
210
+
211
+ </script>
package.xml ADDED
@@ -0,0 +1,18 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?xml version="1.0"?>
2
+ <package>
3
+ <name>Kgn_Explodemenu</name>
4
+ <version>0.1.0</version>
5
+ <stability>stable</stability>
6
+ <license uri="http://www.opensource.org/licenses/osl-3.0.php">OSL v3.0</license>
7
+ <channel>community</channel>
8
+ <extends/>
9
+ <summary>Explode Menu extension changes the default menu display into Exploded Menu.</summary>
10
+ <description>Explode Menu extension changes the default menu display into Exploded Menu.</description>
11
+ <notes>New Explode Menu</notes>
12
+ <authors><author><name>kgn technologies</name><user>auto-converted</user><email>tejas@kgntechnologies.com</email></author></authors>
13
+ <date>2011-09-26</date>
14
+ <time>10:41:41</time>
15
+ <contents><target name="magedesign"><dir name="frontend"><dir name="default"><dir name="default"><dir name="template"><dir name="catalog"><dir name="navigation"><file name="top.phtml" hash="42257059899407849682e9a66a41abe4"/></dir></dir></dir></dir></dir></dir></target><target name="mageskin"><dir name="frontend"><dir name="default"><dir name="default"><dir name="css"><file name="explodemenu.css" hash="a4f068c90418ce97f61daad040390489"/></dir></dir></dir></dir></target></contents>
16
+ <compatible/>
17
+ <dependencies/>
18
+ </package>
skin/frontend/default/default/css/explodemenu.css ADDED
@@ -0,0 +1,75 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .nav-container{ padding:0px 0px; float:left; width:100%; z-index:8;}
2
+ #nav{ background:none; padding:0px;}
3
+ #nav li.level-top{ margin:0px 6px 0px 0px; padding:0px; height:40px; z-index:10;}
4
+ #nav a.level-top{ border:none; background:#4690a6; color:#fff; font-weight:normal; width:110px; padding:5px 10px; text-align:center;white-space:wrap; font-size:14px; line-height:14px; height:30px; margin:0px; font-family:"Myriad Pro"; font-weight:normal;}
5
+
6
+ #nav li.last{ margin:0px;}
7
+ #nav li.over a.level-top,#nav li a.level-top:hover,#nav li.over a.level-top, #nav li.active a.level-top{ border:none; background:#a1d3de; color:#4690a6; padding:5px 10px; text-align:center;white-space:wrap; font-size:14px; line-height:14px; height:30px; margin:0px;}
8
+ #nav li.level-top a.oneline,#nav li.level-top a.oneline:hover,#nav li.active a.oneline,#nav ul li.over a.oneline,#nav ul li:hover a.oneline{ line-height:30px;}
9
+ #nav a span:hover,#nav a:hover span{color:#4690a6;}
10
+
11
+ #nav a.level-top span{ background:none; padding:0px; white-space:normal; width:100%; text-align:center;}
12
+ #nav li.over a.level-top span, #nav li.active a.level-top span{ padding:0px; height:40px; margin-left:0px;}
13
+
14
+ /* 2nd Level */
15
+ #nav ul,
16
+ #nav div { position:absolute; width:240px; top:40px; left:-10000px; background:#fbfbfb; padding:5px 11px 10px; border:4px solid #a1d3de; }
17
+ #nav div ul { position:static; width:auto; background:none; padding:0; border:0 !important; }
18
+
19
+ #nav ul li { float:none; height:auto; display:block; border:0px solid #e2e2e2; }
20
+ #nav ul li.category-title{ border-bottom:1px solid #6d6e70; margin: 0px 0px 5px; padding:4px 0px 8px; color:#6d6e70; font-weight:bold; font-size:16px;}
21
+ #nav ul li.last { border-bottom:0; }
22
+ #nav ul li.parent { background:none; }
23
+ #nav ul li a { display:block; font-size:14px; line-height:20px; padding:0px 0px; text-decoration:none !important; color:#4690a6;}
24
+ #nav ul li.last > a { padding-bottom:0; }
25
+ #nav ul li a:hover { color:#4690a6; font-weight:bold;}
26
+ #nav ul li a span {}
27
+ #nav ul li.over a.over { color:#d02600; }
28
+ #nav ul li.active > a { color:#d02600; }
29
+
30
+ /* 2nd Level */
31
+ #nav div.submenu,#nav div { position:absolute; top:40px; left:-10000px; overflow:hidden; padding:0px; float:left; background:#fbfbfb; padding:5px 5px 10px 15px ; border:4px solid #a1d3de; }
32
+ div.submenu-con{ float:left; width:100%; margin:0px; padding:0px; position:relative;}
33
+ #nav div.submenu div.submenu div.submenu-inner{ margin:0px; padding:0px; width:100%;}
34
+
35
+ /** Menu Position **/
36
+ #nav li.nav-750{ position:static;}
37
+
38
+ #nav li.hover1 div.men750{ left:-2px;}
39
+ /* menu */
40
+ #nav div.submenu ul,#nav div ul{ position:static; overflow:hidden; width:100%; padding:0px 0px 0px 0px; border:0px solid #aeaeae; border:none !important; z-index:9999 !important; float:left; margin-bottom:0px !important;}
41
+ #nav div.submenu ul ul,#nav div ul ul{ padding:0px;}
42
+ #nav div ul ul,#nav div.submenu div.submenu ,#nav div div { position:static; width:100%; background:none; padding:0; border:0 !important; }
43
+ #nav div.submenu div.submenu ,#nav div.submenu div.submenu ul{ position:static; padding:0px; border:0px solid #aeaeae; background:none; border-top:0; width:200px !important; float:left; }
44
+ #nav div.submenu ul.level0 div.submenu-btm{ display:none;}
45
+ #nav ul li ,#nav ul li.parent { display:block; border-bottom:0px solid #e2e2e2; float:left; height:auto; width:210px; margin-right:10px; padding:0px 0px 0px 0px; display:block;}
46
+ #nav .men240 ul li { width:230px;}
47
+ #nav ul li a { font-size:16px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; color:#6d6e70; line-height:20px; padding:3px 0px 5px 0px; text-decoration:none !important; border-bottom:1px solid #6d6e70; min-height:22px; position:static; float:left; width:100%; display:block; position:relative;}
48
+ #nav ul li.last > a { padding-bottom:5px; }
49
+ #nav ul li a:hover { color:#6d6e70; }
50
+ #nav ul li a span {}
51
+ #nav ul li.over a.over { color:#8d8d8d; background:none; }
52
+ #nav ul li.active > a { color:#6d6e70; background:none; }
53
+
54
+ /* 3rd+ Level */
55
+ #nav ul ul,
56
+ #nav ul div { top:0px; border-top:0px solid #aeaeae; left:0px; width:210px; background:none; padding:8px 0px 0px; margin:0px; position:relative; }
57
+
58
+ #nav ul ul li,
59
+ #nav ul div ul li{ background:none; padding:0px; float:left; width:210px;}
60
+
61
+ #nav ul ul li a,
62
+ #nav ul div ul li a{ float:left; width:100%; margin:0px; padding:0px 0px; background:none; line-height:17px; border:none; font-size:14px; font-weight:normal; color:#4690a6; position:relative; z-index:9999 !important; }
63
+ #nav ul ul li a:hover,
64
+ #nav ul div ul li a:hover,#nav ul div ul li.over a.over,#nav ul div ul li.active > a{ font-weight:bold; color:#4690a6;}
65
+
66
+ /* Show Menu */
67
+ #nav li .shown-sub,#nav li div.shown-sub,#nav li.ove div,#nav li .shown-sub ul.shown-sub,
68
+ #nav li .shown-sub li div.shown-sub{ left:0px; z-index:991; }
69
+ #nav li .shown-sub .shown-sub { left:0px; }
70
+ #nav li.nav-5 .shown-sub,#nav li.nav-5 div.shown-sub,#nav li.nav-6 .shown-sub,#nav li.nav-6 div.shown-sub,#nav li.nav-7 .shown-sub,#nav li.nav-7 div.shown-sub,#nav li.nav-8 .shown-sub,#nav li.nav-8 div.shown-sub,#nav li.nav-9 .shown-sub,#nav li.nav-9 div.shown-sub{ right:0px; left:auto; z-index:991; }
71
+
72
+ /********** Navigation > */
73
+
74
+ /** Menu hover **/
75
+