Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 1 of 2
HumboldtLocals.com
 
mrjohnnycake
Member
 
Avatar
Total Posts:  35
Joined:  2007-10-28
Arcata, CA. USA
 

After over a year of dreaming, building, and testing, my new Magento store is up and running (albeit with just a handful of products as of this posting).

http://www.humboldtlocals.com

I’m interested in hearing feedback about the menu system.  It’s not auto-populating but I don’t feel like that will be necessary.  Any other feedback would also be great.

Thanks.

Dave.

Image Attachments
logo_email.gif
 
Magento Community Magento Community
Magento Community
Magento Community
 
TomC
Sr. Member
 
Total Posts:  191
Joined:  2007-12-01
 

HOLY COW - How did you develop that menu navigation system?  ... It looks fantastic !!!

Which theme did you start out with/from?

 
Magento Community Magento Community
Magento Community
Magento Community
 
mrjohnnycake
Member
 
Avatar
Total Posts:  35
Joined:  2007-10-28
Arcata, CA. USA
 

Thanks for the feedback.

I just started with one of the default templates, can’t remember which.  In the end the template doesn’t matter, in my opinion.  I ended up changing designs halfway through anyways.

The menu is common on a lot of popular sites.  There are different variations of it around but I started with some code and after a good solid week of only working on the menu it came around.

Anyone looking to implement their own menu mark my words; USE STATIC BLOCKS!  You can do this menu or any other one just fine other way but using static blocks makes it much easier to edit down the line.  I learned that the hard way.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Voot
Sr. Member
 
Total Posts:  261
Joined:  2008-03-20
Long Beach, CA
 

Wow, great menu system. I’ve been meaning to figure out a way to create this same menu. Almost all of the popular site have this feature. You said your using static blocks, so when you create a new category will the menu auto populate?

 
Magento Community Magento Community
Magento Community
Magento Community
 
mrjohnnycake
Member
 
Avatar
Total Posts:  35
Joined:  2007-10-28
Arcata, CA. USA
 

As I said earlier, it does not auto-populate.  I think if you set it up right the first time there is no need to auto-populate.  But it does take more work.

By using static blocks it just makes it easier to edit rather than having the menu files in the app folder hidden under multiple levels.  I did find that static blocks seemed to make implementing javascript and html much easier.

By the way Vutha, I like your theme designs.  Very nice.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Nicolas8241
Jr. Member
 
Total Posts:  9
Joined:  2008-10-23
 

I got this message error with Adobe Flash Player 10 on Firefox 3 (everything works fine though)
TypeError: Error #1010: A term is undefined and has no properties.
at preloader_fla::MainTimeline/loadComplete()

 
Magento Community Magento Community
Magento Community
Magento Community
 
jeff.d
Sr. Member
 
Total Posts:  103
Joined:  2008-05-26
 

This is easily the best navagation I have seen on a Magento store. I get a flashing “FlashEff” text in the upper left in Firefox 3. Everything still works though....great work

 
Magento Community Magento Community
Magento Community
Magento Community
 
TomC
Sr. Member
 
Total Posts:  191
Joined:  2007-12-01
 

MrJohnnyCake . . . . I don’t suppose you might be willing to provide a tutorial as to how you created your menu navigation scheme.

cheese

 
Magento Community Magento Community
Magento Community
Magento Community
 
mrjohnnycake
Member
 
Avatar
Total Posts:  35
Joined:  2007-10-28
Arcata, CA. USA
 

Bummer about the flash problems.  I’ll have to figure that out.  I have minimal past experience with Flash so I suppose I can’t ask for much.  If anyone has any advice I’d appreciate it.  The movie uses ActionScript 3 and I know that’s pretty new so browsers might not be up to speed yet.

@TomC, I would give detailed info but it’s been a while since I completed it and I’d have to retrace my steps.  Here’s what I do remember.

1- It is implemented in the same way as the static block “footer_links” is.  Figure out how footer_links is placed into the design and go from there.  A search on footer_links will give you good help.  What you want to do is create a new static block and place it into the design similar to how the footer_links block is inserted and move it to where you want it to show up (in my case it’s inserted in the header).

2- My static block is regular old html and also calls out javascript.  I will say that Magento didn’t like some of my java scripts so I know I had to change so of the java code to agree with it.  That was a pain to figure out but it works just fine now.

3- Like anything else, the menu relies heavily on css.  Css is you best friend.

Those three things are it.  A static block, let’s say it’s called menu_nav, is called out in multiple files in the design parts of your app folder, a static block is made in the back end, and a css file gives the overall look and feel.  If I remember more I’ll post it.  Otherwise feel free to ask some specifics and I’ll gladly help.

For all of the people freaking out on designing in Magento, yes there is a learning curve but I had little to no knowledge of php and xml layouts.  My site isn’t the best in the world or anything but I think it does show that if I can do it you can do it.  Don’t give up.  Magento is too great of a program to switch to something easier to learn.  Believe me, I wanted to give up lots of times.  But every time I came back to the realization that there is simply nothing else out there comparable.

 
Magento Community Magento Community
Magento Community
Magento Community
 
tjscgroup
Sr. Member
 
Avatar
Total Posts:  146
Joined:  2008-09-24
United Kingdom
 

The one word that springs to mind is Supercalifragilisticexpialidocious

Would you consider releasing this via MagentoConnect?

 
Magento Community Magento Community
Magento Community
Magento Community
 
radders
Sr. Member
 
Total Posts:  162
Joined:  2008-03-23
 

Yes I agree, the menu looks excellent!  I didn’t see any problems testing this on Firefox 3.

Has anyone tested this in IE 6? I gather that plenty of corporates still use that though I wish they wouldn’t. Are you able to follow through your idea by using a different colour stylesheet for each of the main categories? At the moment everything reverts to blue once you have selected your category.

 
Magento Community Magento Community
Magento Community
Magento Community
 
mrjohnnycake
Member
 
Avatar
Total Posts:  35
Joined:  2007-10-28
Arcata, CA. USA
 

@tjscgroup
I wouldn’t know how to go about putting it on MagentoConnect.  I did it all by hand and don’t know how to automate something like that.  My biz should be fully stocked and ready to go in a few days (calling it the “Thank God these dang elections are over” sale).  After that I’ll look into retracing my steps and putting up some code on here.

@radders
I think what you are asking is when someone clicks on a category then will that tab remain a different color from the normal blue tab.  If that’s what you mean then no, I would like to do that but as of yet haven’t figured it out.  I suppose it’s possible but I spent a solid week on getting the menu to work and have spent the rest of the time not wanting to touch it again.  I’ll probably work that out in the future though.  As far as testing goes i sent the link to hundreds of people and fixed all the bug reports that came back.  I know it doesn’t work with Firefox 1.0 and IE5 and below but so far none of my Google Analytics data says that anyone under the age of 110 use those versions anyways so I’m not too worried about it.  Aside from that I did multiple test with browsershots.org and they looked good.

Thanks for all the kind feedback everyone.

 
Magento Community Magento Community
Magento Community
Magento Community
 
mrjohnnycake
Member
 
Avatar
Total Posts:  35
Joined:  2007-10-28
Arcata, CA. USA
 

Okay, I decided to be a nice open-source guy since I’ve got so much help from forum posts on here.

Originally I didn’t want to show the steps because I forgot them.  But then I remembered the find feature in my text editor and found everything I needed.  Here it is:

---------------------------------------------------------

1- Create a static block.  Call it menu or whatever you want for the block title.  My identifier is top-nav so I’ll stick with that for this tutorial so go ahead and call it that or else remember to change your code accordingly.  Here is the html for the block (make sure you read after the jump to understand the javascript part of it. Also know that I had to remove most of the categories to make it fit into this post).

<html>
<
head>
<
script type="text/javascript">
     
jQuery.noConflict();
</script>
</head>

<
body>

<
script language="JavaScript" type="text/javascript">
<!--
var 
jsImageTagPrepend '<img src="';
var 
jsImageSrcPrepend '';
var 
jsContextRoot 'web';
var 
catId '';
//-->
</script>
<script type="text/javascript"jQuery(document).ready(function() {
activatemenu
("#navblog","blogmenudone""#menublog""#navbloglink""blogover");
activatemenu("#navlocals","localsmenudone""#menulocals""#navlocalslink""localsover");
activatemenu("#navetc","etcmenudone""#menuetc""#navetclink""etcover");
activatemenu("#navfd","fdmenudone""#menufd""#navfdlink""fdover");
activatemenu("#navhg","hgmenudone""#menuhg""#navhglink""hgover");
activatemenu("#navcf","cfmenudone""#menucf""#navcflink""cfover");
});
</script>


<div id="mainnav">
<
ul id="mainmenu">
<
li id="navhg">
<
a href="/hg" id="navhglink">
home and garden
</a
</
li>
<
li id="navcf">
<
a href="/cf" id="navcflink">
clothes and fashion
</a
</
li>
<
li id="navfd">
<
a href="/fd" id="navfdlink">
food and drink</a>
</
li>
<
li id="navetc">
<
a href="/etc" id="navetclink">
etc and more
</a
</
li>
<
li id="navlocals">
<
a href="/locals" id="navlocalslink">
locals</a>
</
li
<
li id="navblog">
<
a href="#" id="navbloglink">
</
a>
</
li>
</
ul>
</
div>


<
div id="navrollovers">

<
div id="menuhg">
<
div class="submenuleft">
<
h2><a href="/hg/hg-new-products">New Products</a></h2>
</
div>

<
div class="submenucontent" style="position:relative;">
<
h2><a href="/hg/home-decor">Home Decor</a></h2>
<
ul>
<
li><a href="/hg/home-decor/art-pieces">Art Pieces</a></li>
</
ul>
</
div>

<
div class="submenucontent">
<
h2><a href="/hg/art">Wall Art</a></h2>
<
ul>
<
li><a href="/hg/art/paintings">Paintings</a></li>
</
ul>
</
div>

<
div class="dropPromo">
<
a href="/hg"><img src="{{skin url='images/menu/hg_promo.jpg'}}" alt="Promo" /></a>
</
div>
</
div>



<
div id="menucf">
<
div class="submenuleft">
<
h2><a href="/cf/cf-new-products">New Products</a></h2>
</
div>

<
div class="submenucontent" style="position:relative;">
<
h2><a href="/cf/jewelry">Jewelry</a></h2>
<
ul>
<
li><a href="/cf/jewelry/earrings">Earrings</a></li>
</
ul>
</
div>

<
div class="submenucontent">
<
h2><a href="/cf/womens">Women's Clothing</a></h2>
<ul>
<li><a href="/cf/womens/dresses">Dresses</a></li>
</ul>
</div>

<div class="submenucontent">
<h2><a href="/cf/mens">Men'
s Clothing</a></h2>
<
ul>
<
li><a href="/cf/mens/m-shirts">T-Shirts</a></li>
</
ul>
</
div>

<
div class="submenucontent">
<
h2><a href="/cf/childrens">Childrens</a></h2>
<
ul>
<
li><a href="/cf/childrens/c-shirts">Shirts</a></li>
</
ul>
</
div>

<
div class="submenucontent">
<
h2><a href="/cf/accessories">Accessories</a></h2>
<
ul>
<
li><a href="/cf/accessories/handbags">Handbags</a></li>
</
ul>
</
div>

<
div class="dropPromo">
<
a href="/cf"><img src="{{skin url='images/menu/hg_promo.jpg'}}" alt="Promo" /></a>
</
div>
</
div>



<
div id="menufd">
<
div class="submenuleft">
<
h2><a href="/fd/fd-new-products">New Products</a></h2>
</
div>

<
div class="submenucontent" style="position:relative;">
<
h2><a href="/fd/food">Delicious Foods</a></h2>
<
ul>
<
li><a href="/fd/food/cheese">Cheese</a></li>
</
ul>
</
div>

<
div class="submenucontent">
<
h2><a href="/fd/sauces-and-spreads">SaucesSpreads and Spices</a></h2>
<
ul>
<
li><a href="/fd/sauces-and-spreads/condiments">Condiments</a></li>
</
ul>
</
div>

<
div class="submenucontent">
<
h2><a href="/fd/sweets">For Your Sweet Tooth</a></h2>
<
ul>
<
li><a href="/fd/sweets/chocolates">Chocolates</a></li>
</
ul>
</
div>

<
div class="submenucontent">
<
h2><a href="/fd/drinks">For Your Thirst</a></h2>
<
ul>
<
li><a href="/fd/drinks/coffee">Coffees</a></li>
</
ul>
</
div>

<
div class="dropPromo">
<
a href="/fd"><img src="{{skin url='images/menu/hg_promo.jpg'}}" alt="Promo" /></a>
</
div>
</
div>



<
div id="menuetc">
<
div class="submenuleft">
<
h2><a href="/etc/etc-new-products">New Products</a></h2>
</
div>

<
div class="submenucontent" style="position:relative;">
<
h2><a href="/etc/health-and-beauty">Health and Beauty</a></h2>
<
ul>
<
li><a href="/etc/health-and-beauty/soaps">Soaps</a></li>
</
ul>
</
div>

<
div class="submenucontent">
<
h2><a href="/etc/music">Music Makers</a></h2>
<
ul>
<
li><a href="/etc/music/cds">CDs</a></li>
</
ul>
</
div>

<
div class="submenucontent">
<
h2><a href="/etc/toys">Toys and Games</a></h2>
<
ul>
<
li><a href="/etc/toys/marbles">Marbles</a></li>
</
ul>
</
div>

<
div class="submenucontent">
<
h2><a href="/etc/pets">For The Pets</a></h2>
<
ul>
<
li><a href="/etc/pets/treats">Treats</a></li>
</
ul>
</
div>

<
div class="submenucontent">
<
h2><a href="/etc/other">Other</a></h2>
<
ul>
<
li><a href="/etc/other/sports">Sports</a></li>
</
ul>
</
div>

<
div class="dropPromo">
<
a href="/etc"><img src="{{skin url='images/menu/hg_promo.jpg'}}" alt="Promo" /></a>
</
div>
</
div>

</
div>
</
body>
</
html>
 
Magento Community Magento Community
Magento Community
Magento Community
 
mrjohnnycake
Member
 
Avatar
Total Posts:  35
Joined:  2007-10-28
Arcata, CA. USA
 

I had to remove the last two tabs so it would fit in one post but I think you’ll figure it out.  Keep you eyes on the div’s if it gets confusing.

The javascript will take some explaining since it was the biggest hurdle I faced.  JQuery doesn’t agree with part of Magento.  Basically its the “$” in the script since one of Magento’s scripts is already using that.  It’s looking like JQuery is much to big to fit into one post so I’ll just include the file in this post.

1- Download JQuery.js from the bottom of this post.

2- In the main Magento folder (the one in public_html or wherever the base install is located), go into the “js” folder and create a folder called “custom”.  Put the javascript file in there.

3- Create a new text file called dropdowns.js and put the following code into it and save it.  Then put that java file into the custom folder as well.

var hgmenudone 0; var cfmenudone 0; var fdmenudone 0; var etcmenudone 0; var localsmenudone 0; var blogmenudone 0
function 
activatemenu(idstoredlocationmenulinkoverclassovercontenttoload{
    
var trackerID;
    
jQuery(id).mouseover(function() {                     
        
if(eval(storedlocation) == 0) {
            
if (contenttoload{
                loadcontent
(contenttoloadmenu)
            
}
            trackerID 
window.setTimeout('showMenu("' storedlocation '","' menu '","' linkover '","' classover '")',350);
        
else 
            window
.clearTimeout(trackerID); }
       }
);
        
jQuery(id).mouseout(function() {
            window
.clearTimeout(trackerID);
            
trackerID window.setTimeout('clearMenu("' storedlocation '","' menu '","' linkover '","' classover '")',250);
       
}); 
        
jQuery(menu).mouseover(function() {
            window
.clearTimeout(trackerID);
            
jQuery(menu).show("");
            
jQuery(linkover).addClass(classover);
            if(
jQuery.browser.msie{
                jQuery
("input.formhider").addClass("hideform");jQuery("select.formhider").addClass("hideform");
            
}
       }
); 
        
jQuery(menu).mouseout(function() {
            window
.clearTimeout(trackerID);
            
trackerID window.setTimeout('clearMenu("' storedlocation '","' menu '","' linkover '","' classover '")',250);
       
});    
}

function showMenu(storedlocationmenulinkoverclassover{
        eval(storedlocation
+"=1;");
        
jQuery(menu).slideDown("fast"); 
        
jQuery("div").remove(".errorform");
        
jQuery("div").remove(".errorform2");    
        
jQuery(linkover).addClass(classover);
        if(
jQuery.browser.msie{
            jQuery
("input.formhider").addClass("hideform");jQuery("select.formhider").addClass("hideform");
        
}
}
 
function clearMenu(storedlocationmenulinkoverclassover{
        eval(storedlocation
+"=0;");
        
jQuery(menu).stop();
        
jQuery(menu).hide("");
        
jQuery(linkover).removeClass(classover);
        
jQuery("div").remove(".errorform");
        
jQuery("div").remove(".errorform2");    
        if(
jQuery.browser.msie{
            jQuery
("input.formhider").removeClass("hideform");jQuery("select.formhider").removeClass("hideform");
        
}
}
function loadcontent(pageid{
        jQuery
(id).load(page);
}

Note that the only thing you’ll have to change is the very top line.  It’ll work as it is but you’ll probably want to change your menu names and when you do that make sure you also change them on the top line of dropdowns.js.

File Attachments
jQuery.js  (File Size: 53KB - Downloads: 126)
 
Magento Community Magento Community
Magento Community
Magento Community
 
mrjohnnycake
Member
 
Avatar
Total Posts:  35
Joined:  2007-10-28
Arcata, CA. USA
 

Next up is the css file.  Create a copy of your menu.css and put it somewhere safe.  Delete the original menu.css file and replace it with the file included at the bottom of this post.  Remember if you change the menu names to change them in the css file as well.  A simple find and replace will work wonders.

You’re almost there.

File Attachments
menu.css  (File Size: 14KB - Downloads: 277)
 
Magento Community Magento Community
Magento Community
Magento Community
 
mrjohnnycake
Member
 
Avatar
Total Posts:  35
Joined:  2007-10-28
Arcata, CA. USA
 

1- Open up app/.../layout/cms.xml.  I don’t know what yours looks like but in my file I put this code just under default and just above the footer_links reference.

<reference name="top-nav">
         <
block type="cms/block" name="cms_top-nav" before="top-nav">
                 <
action method="setBlockId"><block_id>top-nav</block_id></action>
            </
block>
</
reference>

2- Open up app/.../layout/page.xml.  Put this code where you need it.  Keep that file open after you’re done doing this step.

<block type="cms/block" name="top-nav" as="topNav">
                    <
action method="setBlockId"><block_id>top-nav</block_id></action>
                </
block>

For instance, here is what that part of my page.xml file looks like.

<block type="page/html_header" name="header" as="header">
                <
block type="page/template_links" name="top.links" as="topLinks"/>
                <
block type="cms/block" name="top-nav" as="topNav">
                    <
action method="setBlockId"><block_id>top-nav</block_id></action>
                </
block>  
</
block>

<
block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>

3- The last part is to tell Magento/your theme where to find those javascript files.  In page.xml put in this code in the top “actions” area.

<action method="addJs"><script>custom/dropdowns.js</script></action>
<
action method="addJs"><script>custom/jQuery.js</script></action>

Here is what my code looks like.

<block type="page/html_head" name="head" as="head">
                <
action method="addJs"><script>prototype/prototype.js</script></action>
                <
action method="addJs"><script>prototype/validation.js</script></action>
                <
action method="addJs"><script>scriptaculous/builder.js</script></action>
                <
action method="addJs"><script>scriptaculous/effects.js</script></action>
                <
action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
                <
action method="addJs"><script>scriptaculous/controls.js</script></action>
                <
action method="addJs"><script>scriptaculous/slider.js</script></action>
                <
action method="addJs"><script>varien/js.js</script></action>
                <
action method="addJs"><script>varien/form.js</script></action>
                <
action method="addJs"><script>varien/menu.js</script></action>
                <
action method="addJs"><script>mage/translate.js</script></action>
                <
action method="addJs"><script>mage/cookies.js</script></action>
                <
action method="addJs"><script>custom/dropdowns.js</script></action>
                <
action method="addJs"><script>custom/jQuery.js</script></action>
                <
action method="addCss"><stylesheet>css/reset.css</stylesheet></action>
                <
action method="addCss"><stylesheet>css/boxes.css</stylesheet></action>
                <
action method="addCss"><stylesheet>css/clears.css</stylesheet></action>
                <
action method="addCss"><stylesheet>css/menu.css</stylesheet></action>

                <
action method="addItem"><type>skin_css</type><name>css/iestyles.css</name><params/><if>IE</if></action>
                <
action method="addItem"><type>skin_css</type><name>css/ie7.css</name><params/><if>IE 7</if></action>
                <
action method="addItem"><type>skin_css</type><name>css/ie7minus.css</name><params/><if>lt IE 7</if></action>

                <
action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
                <
action method="addItem"><type>js</type><name>varien/iehover-fix.js</name><params/><if>lt IE 7</if></action>

                <
action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
            </
block>

Unless I forgot something that is it! The javascript part is the most confusing and but also the most important since it makes the menu work.  After the first person tests this let me know how it worked so I know if I need to update this.

Hope this helps someone.

Dave.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 1 of 2