Skip to content

Instantly share code, notes, and snippets.

@benjamin-hull
Created October 30, 2012 22:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save benjamin-hull/3983383 to your computer and use it in GitHub Desktop.
Save benjamin-hull/3983383 to your computer and use it in GitHub Desktop.
<!-- Using raw static navigation -->
<ul id="eCommerceNavBarMenu">
<li class="topLevel navfirstitem">
<a class="topLevel" href="&#47;online&#47;shop&#47;new-in">
New In
</a>
</li>
<li class="navSpacer"></li>
<li class="topLevel ">
<a class="topLevel" href="&#47;online&#47;shop&#47;shoes">
Shoes
</a>
<ul class="ecommerceMegaMenu Shoes">
<div style="width:55em;"><!-- floated parents need a width (total of children) -->
<div style="float:left;"><!-- container 1 -->
<ul class="topLevel">
<li class="subLevel navfirstitem"><strong>Shop By Category</strong></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/shoes/heeled-shoes">Heeled Shoes</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/shoes/platform-shoes">Platform Shoes</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/shoes/flat-shoes">Flat Shoes</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/shoes/party-shoes">Party Shoes</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/shoes/court-shoes">Court Shoes</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/shoes/peep-toe-shoes">Peep Toe Shoes</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/shoes/trainers">Trainers</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/shoes/wedge-shoes">Wedge Shoes</a></li>
</ul>
</div>
<div style="margin: 10px 0 0 18em"><!-- container 2 -->
<ul class="topLevel">
<li class="subLevel navfirstitem"><strong>Get Inspired</strong></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/new-in">New Arrivals</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/best-sellers">Best Sellers</a></li>
<li class="subLevel "><a class="subLevel" href="/online/control/eCommerceContent?contentId=SP_TRENDS_HUB">Trends</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/killer-heels">Killer Style</a></li>
</ul>
</div>
<div style="padding: 0 10px 0 0;"><!-- container 3 -->
<img src="/osafe_theme/images/user_content/images/MegaMenu/2012/20121019_grange.jpg" alt="Grange - ladies trainer" width="180" height="210" border="0"/>
</div>
<p><a href="http://prod.modainpelle.com/online/control/eCommerceProductDetail?productId=GRANGE">This week’s top rated shoe 'Grange' received top marks from customers for look and quality »</a></p>
</div> </ul>
</li>
<li class="navSpacer"></li>
<li class="topLevel ">
<a class="topLevel" href="&#47;online&#47;shop&#47;boots">
Boots
</a>
<ul class="ecommerceMegaMenu Boots">
<div style="width:55em;"><!-- floated parents need a width (total of children) -->
<div style="float:left;"><!-- container 1 -->
<ul class="topLevel">
<li class="subLevel navfirstitem"><strong>Shop By Category</strong></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/boots/heeled-boots">Heeled Boots</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/boots/ankle-boots">Ankle Boots</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/boots/flat-boots">Flat Boots</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/boots/shoe-boots">Shoe Boots</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/boots/wellington-boots">Wellington Boots</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/boots/wedge-boots">Wedge Boots</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/boots/calf-boots">Calf Boots</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/boots/knee-high-boots">Knee High Boots</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/boots/winter-boots">Winter Boots</a></li>
</ul>
</div>
<div style="margin: 10px 0 0 18em"><!-- container 2 -->
<ul class="topLevel">
<li class="subLevel navfirstitem"><strong>Get Inspired</strong></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/new-in">New Arrivals</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/best-sellers">Best Sellers</a></li>
<li class="subLevel "><a class="subLevel" href="/online/control/eCommerceContent;jsessionid=BCB8AE652C21AC8C0B87AA611755515E.jvm1?contentId=SP_TRENDS_HUB">Trends</a></li>
</ul>
</div>
<div style="padding: 0 10px 10px 0;"><!-- container 3 -->
<img src="/osafe_theme/images/user_content/images/MegaMenu/2012/20121003_hiker.jpg" alt="Hiker - ladies knee high boot" width="180" height="240" border="0"/>
</div>
<p><a href="http://prod.modainpelle.com/online/control/eCommerceProductDetail?productId=HIKER">Get country chic this winter with equestrian inspired boot styles »</a></p>
</div> </ul>
</li>
<li class="navSpacer"></li>
<li class="topLevel ">
<a class="topLevel" href="&#47;online&#47;shop&#47;sandals">
Sandals
</a>
<ul class="ecommerceMegaMenu Sandals">
<div style="width:37em;"><!-- floated parents need a width (total of children) -->
<div style="float:left;"><!-- container 1 -->
<ul class="topLevel">
<li class="subLevel navfirstitem"><strong>Shop By Category</strong></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/sandals/flat-sandals">Flat Sandals</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/sandals/heeled-sandals">Heeled Sandals</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/sandals/wedge-sandals">Wedge Sandals</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/sandals/gladiator-sandals">Gladiator Sandals</a></li>
</ul>
</div>
<div style="margin: 10px 0 10px 18em"><!-- container 2 -->
<img src="/osafe_theme/images/user_content/images/MegaMenu/2012/20121003_free_delivery.gif" alt="Grange - ladies trainer" width="180" height="180" border="0"/>
</div>
</div> </ul>
</li>
<li class="navSpacer"></li>
<li class="topLevel ">
<a class="topLevel" href="&#47;online&#47;shop&#47;bags">
Bags
</a>
<ul class="ecommerceMegaMenu Bags">
<div style="width:37em;"><!-- floated parents need a width (total of children) -->
<div style="float:left;"><!-- container 1 -->
<ul class="topLevel">
<li class="subLevel navfirstitem"><strong>Shop By Category</strong></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/bags/shoulder-bags">Shoulder Bags</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/bags/clutch-bags">Clutch Bags</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/bags/cross-body-bags">Cross Body Bags</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/bags/tote-bags">Tote Bags</a></li>
</ul>
</div>
<div style="margin: 10px 0 0 18em"><!-- container 2 -->
<img src="/osafe_theme/images/user_content/images/MegaMenu/2012/20121003_milobag.jpg" alt="Milobag - must-have ladies bag" width="180" height="180" border="0"/>
</div>
<p><a href="http://prod.modainpelle.com/online/control/eCommerceProductDetail?productId=MILOBAG">Studs are a must-have feature on accessories for Autumn/Winter, Milobag is really versatile and a great day-to-evening bag »</a></p>
</div> </ul>
</li>
<li class="navSpacer"></li>
<li class="topLevel ">
<a class="topLevel" href="&#47;online&#47;shop&#47;accessories">
Accessories
</a>
<ul class="ecommerceMegaMenu Accessories">
<div style="width:37em;"><!-- floated parents need a width (total of children) -->
<div style="float:left;"><!-- container 1 -->
<ul class="topLevel">
<li class="subLevel navfirstitem"><strong>Shop By Category</strong></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/accessories/scarves">Scarves</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/accessories/gift-ideas">Gift Ideas</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/accessories/shoe-care">Shoe Care</a></li>
</ul>
</div>
<div style="margin: 10px 0 0 18em"><!-- container 2 -->
<img src="/osafe_theme/images/user_content/images/MegaMenu/2012/20121003_gift_voucher.gif" alt="Gift Vouchers" width="180" height="110" border="0"/>
</div>
<p><a href="http://prod.modainpelle.com/online/control/eCommerceProductDetail?productId=GIFT_VC_50">The perfect gift for the shoe lover in your life »</a></p>
</div> </ul>
</li>
<li class="navSpacer"></li>
<li class="topLevel ">
<a class="topLevel" href="&#47;online&#47;shop&#47;wedding">
Wedding
</a>
<ul class="ecommerceMegaMenu Wedding">
<div style="width:18em; padding-top:10px;"><!-- floated parents need a width (total of children) -->
<div style="float:left;"><!-- container 1 -->
<ul class="topLevel">
<li class="subLevel "><a class="subLevel" href="/online/shop/wedding/bridesmaid-shoes">Bridesmaid Shoes</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/wedding/bridal-shoes">Bridal Shoes</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/wedding/wedding-shoes">Wedding Shoes</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/wedding/bridal-accessories">Bridal Accessories</a></li>
</ul>
</div>
</div> </ul>
</li>
<li class="navSpacer"></li>
<li class="topLevel ">
<a class="topLevel" href="&#47;online&#47;shop&#47;brands">
Brands
</a>
<ul class="ecommerceMegaMenu Brands">
<div style="width:30em; padding-top:10px;"><!-- floated parents need a width (total of children) -->
<div style="float:left; width:12em;"><!-- container 1 -->
<ul class="topLevel">
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/adele-marie">Adele Marie</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/armani">Armani</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/ash">Ash</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/australia-luxe">Australia Luxe</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/bronx">Bronx</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/camper">Camper</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/daniel">Daniel</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/diesel">Diesel</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/enzo">Enzo</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/fly-london">Fly London</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/hunter">Hunter</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/juicy-couture">Juicy Couture</a></li>
</ul>
</div>
<div style="margin: 0 0 0 12em; width:12em;"><!-- container 2 -->
<ul class="topLevel">
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/lotus">Lotus</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/lotus-from-australia">Love from Australia</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/gift-ideas">Gift Ideas</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/luxury-rebel">Luxury Rebel</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/miz-mooz">Miz Mooz</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/riva">Riva</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/rubber-duck">Rubber Duck</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/sam-edelman">Sam Edelman</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/scholl">Scholl Care</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/smith-and-canova">Smith and Canova</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/tory-burch">Tory Burch Ideas</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/brands/zandra-rhodes">Zandra Rhodes</a></li>
</ul>
</div>
</div> </ul>
</li>
<li class="navSpacer"></li>
<li class="topLevel ">
<a class="topLevel" href="&#47;online&#47;shop&#47;sale">
Sale
</a>
<ul class="ecommerceMegaMenu Sale">
<div style="width:33em;"><!-- floated parents need a width (total of children) -->
<div style="float:left;"><!-- container 1 -->
<ul style="width:15em;" class="topLevel">
<li class="subLevel navfirstitem"><strong>Shop By Category</strong></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/sale/sale-boots">Sale Boots</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/sale/sale-shoes">Sale Shoes</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/sale/sale-sandals">Sale Sandals</a></li>
<li class="subLevel "><a class="subLevel" href="/online/shop/sale/sale-bags">Sale Bags</a></li>
</ul>
</div>
<div style="margin: 10px 0 10px 15em"><!-- container 2 -->
<img src="/osafe_theme/images/user_content/images/MegaMenu/2012/20121003_sale.gif" alt="Autumn Reductions - Sale now on" width="180" height="180" border="0"/>
</div>
</div> </ul>
</li>
<li class="navSpacer"></li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment