How do I implement the new mega menu in my site? I've been wanting to do one of these for years! :)

Thanks,
Kelley

Hi Kelley
So the code for the Mega Menu is now in the ectcart.js file but you will need this to kick it off in the HEAD section...

<script>
ect_megamenu('#FFF');
</script>

The #FFF is the background colour of the "hamburger" which in this case is white.

The build the menu using <ul> / <li> elements as below. The best thing to do is to use this sample and alter it bit by bit.
There is basic styling for the menu itself in the ectcart.css but as the menu bar is dependent on the them, that isn't really covered. But if you have a look through the Premium Responsive templates here and let me know one you like and I'll post the CSS here.

Vince

<div class="ectmegamenu">
<ul>
<!-- 2 links, no drop downs -->
<li><a href="default.asp">Home</a></li>
<li><a href="about.asp">About</a></li>
<!-- first mega menu display - 4 columns -->
<li><a href="products.asp">Products</a>
<ul>
<li><a href="products.asp"><i class="w3-margin-right fa fa-chevron-circle-right"></i>   Layout #1</a>
<ul>
<li><a href="proddetail.asp?prod=testproduct">Blue jeans boot cut</a></li>
<li><a href="proddetail.asp?prod=testproduct">Blue jeans relaxed</a></li>
</ul>
</li>
<li><a href="products2.asp"><i class="w3-margin-right fa fa-chevron-circle-right"></i>   Layout #2</a>
<ul>
<li><a href="proddetail2.asp?prod=testproduct">Black sneakers</a></li>
<li><a href="proddetail2.asp?prod=testproduct">Blue sneakers</a></li>
</ul>
</li>
</ul>
</li>
<!-- second mega menu display - 4 columns -->
<li><a href="categories.asp">Categories</a>
<ul>
<li><a href="products.asp"><i class="w3-margin-right fa fa-chevron-circle-right"></i>   Blue Jeans</a>
<ul>
<li><a href="proddetail.asp?prod=testproduct">Blue jeans boot cut</a></li>
<li><a href="proddetail.asp?prod=testproduct">Blue jeans relaxed</a></li>
</ul>
</li>
<li><a href="products.asp"><i class="w3-margin-right fa fa-chevron-circle-right"></i>   Cools Sneakers</a>
<ul>
<li><a href="proddetail.asp?prod=testproduct">Black sneakers</a></li>
<li><a href="proddetail.asp?prod=testproduct">Blue sneakers</a></li>
</ul>
</li>
<li><a href="products.asp"><i class="w3-margin-right fa fa-chevron-circle-right"></i>   Drill Bits</a>
<ul>
<li><a href="proddetail.asp?prod=testproduct">Drill bit arrow</a></li>
<li><a href="proddetail.asp?prod=testproduct">Drill bit pointy</a></li>
</ul>
</li>
<li><a href="categories.asp"><i class="w3-margin-right fa fa-chevron-circle-right"></i>   All categories</a>
<ul>
<li><a href="products.asp">Blue jeans</a></li>
<li><a href="products.asp">Cool sneakers</a></li>
<li><a href="products.asp">Drill bits</a></li>
</ul>
</li>
</ul>
</li>
<!-- third mega menu display - 1 column -->
<li><a href="#">Services</a>
<ul>
<li>
<ul>
<li><a href="clientlogin.asp">Your Account</a></li>
<li><a href="orderstatus.asp">Order Status</a></li>
<li><a href="tracking.asp">Order tracking</a></li>
<li><a href="giftcertificate.asp">Gift Certificates</a></li>
<li><a href="affiliate.asp">Affiliates</a></li>
</ul>
</li>
</ul>
</li>
<!-- single link display -->
<li><a href="cart.asp">View Cart</a></li>
</ul>
</div>

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

OK, I saw this in the source code of one of the responsive templates. So, the menu needs to be created manually rather than dynamically, like the other CSS menus created from the categories set up in the database. The script goes in the head section of each page and the list menu goes on the page where you want it to appear.

I like the Premium Responsive Design STYLES. Thanks, Vince.

May I suggest you add these instructions in your site under General Help, How it Works or Tutorials? I looked for it everywhere and couldn't find it.

Also, I was wondering if you might post an example of how one could add an image for an ad for a product as one of the menu items. To the far right of the menu, for example. A great demonstration of this is on the Estee Lauder site at https://www.esteelauder.com/

Kelley

Hi Kelley
Here is the CSS for the Styles Mega Menu...

/* Mega Menu */
div.ectmegamenu{
background-color:#FFF;
}
div.ectmegamenu > ul > li{
background-color:#FFF;
color:#000;
font-size:1.0em;
padding:10px 0;
}
div.slidercaption{
bottom:10px;
top:auto;
}
div.ectmegamenu > ul > li, div.ectmegamenu > ul > li > ul > li{
text-transform:uppercase;
}
div.ectmegamenu > ul > li > ul > li > ul > li{
text-transform:none;
}
.ectmegamenu > ul > li:hover{
background:#f2f2f4;
}

And yes, I'll get these in the general help files as soon as I can.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Thanks, Vince!