Skip to content

Instantly share code, notes, and snippets.

@avishai84

avishai84/dynamic-Nav-CTA

Created October 31, 2017 18:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save avishai84/db6d43f2f7a2f103ff1dc1be3243932a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save avishai84/db6d43f2f7a2f103ff1dc1be3243932a to your computer and use it in GitHub Desktop.
Download ZIP
dynamic-Nav-CTA
Raw
dynamic-Nav-CTA
<!-- dynamic shop bottom CTA-Nav 11/1/2017 -->
<style type="text/css">
.giftShopGlobalBottomNav{
max-width:1280px;
margin:0 auto;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 16px;
background-color:#a2202b;
}
.giftShopGlobalBottomNav img{
width: 100%;
display:block;
}
.giftShopGlobalBottomNav ul.CTAmenu--fall17 > li.CTAlist[data-style-at-lg="inline list"] .CTAbutton{
color:#fff;
padding-top: 1.5em;
padding-bottom: 1.5em;
}
.giftShopGlobalBottomNav ul.CTAmenu--fall17 > li.CTAlist.underline > ul.CTAdropdownList li a{
color: #a2202b;
background-color: #fff;
padding:1em 2em;
}
.giftShopGlobalBottomNav ul.CTAmenu--fall17 > li.CTAlist.underline > ul.CTAdropdownList li a:hover{
border-bottom-color: #a2202b;
}
/* CTA MOBILE */
@media(max-width:767px){
.wcd-overflow-x{
overflow-x:scroll;
}
.giftShopGlobalBottomNav{
overflow-y: hidden;
}
.giftShopGlobalBottomNav ul.CTAmenu--fall17 {
width: 1330px;
}
.giftShopGlobalBottomNav .wrapperCTA {
padding-bottom: 2em;
}
.giftShopGlobalBottomNav ul.CTAmenu--fall17 > li.CTAlist > ul.CTAdropdownList {
display: inline;
height: auto;
width:1330px;
height:auto;
}
.giftShopGlobalBottomNav ul.CTAmenu--fall17 > li.CTAlist > ul.CTAdropdownList li {
border-bottom: none;
width: auto;
margin: 0 .25em;
}
.giftShopGlobalBottomNav ul.CTAmenu--fall17>li.CTAlist.underline>ul.CTAdropdownList li a {
padding: .5em 1em;
}
.giftShopGlobalBottomNav ul.CTAmenu--fall17 > li.CTAlist > .CTAbutton {
border-bottom: none;
text-align: left;
padding-left: 1.25em;
visibility: hidden;
}
/* static text */
.staticText.sds_hide-at-lg{
font-family: "Maax Medium","Helvetica Neue",Helvetica,Arial,sans-serif;
text-transform: uppercase;
text-decoration: none;
font-size: 1em;
letter-spacing: 1px;
font-weight: 500;
color:#fff;
position: absolute;
top: 20%;
left: 4.5%;
}
}
/* CTA DESKTOP */
@media(min-width:768px){
.giftShopGlobalBottomNav .wrapperCTA {
margin: 0 auto;
text-align: center;
width: 100%;
}
.giftShopGlobalBottomNav ul.CTAmenu--fall17 > li.CTAlist.underline > ul.CTAdropdownList li a{
color: #a2202b;
background-color: #fff;
padding:1em 2em;
}
.giftShopGlobalBottomNav ul.CTAdropdownList {
width: 58%;
}
}
@media(min-width:922px){
.giftShopGlobalBottomNav ul.CTAdropdownList {
width: 68%;
}
}
@media(min-width:1093px){
.giftShopGlobalBottomNav ul.CTAdropdownList {
width: 81%;
}
}
@media(min-width:1280px){
.giftShopGlobalBottomNav ul.CTAdropdownList {
width: 70%;
}
}
</style>
<!-- Gift Shop Nav -->
<div class="sds_relative">
<div class="staticText sds_hide-at-lg">for everybody on your list</div>
<div class="giftShopGlobalBottomNav">
<div class="wrapperCTA">
<ul class="CTAmenu--fall17">
<li class="CTAlist underline" data-style-at-lg="inline list">
<span class="CTAbutton sds_show-at-lg">for everybody on your list</span>
<ul class="CTAdropdownList">
<li><a href="/browse/category.do?cid=1093820#department=136" onclick="wcd_addTracking('GiftGuide_BottomNav_W_W','');">women</a></li>
<li><a href="/browse/category.do?cid=1093833" onclick="wcd_addTracking('GiftGuide_BottomNav_W_Body','');">gapbody</a></li>
<li><a href="/browse/category.do?cid=1093935" onclick="wcd_addTracking('GiftGuide_BottomNav_W_GapFit','');">gapfit</a></li>
<li><a href="/browse/category.do?cid=1093921" onclick="wcd_addTracking('GiftGuide_BottomNav_W_Mat','');">maternity</a></li>
<li><a href="/browse/category.do?cid=1093838#department=136" onclick="wcd_addTracking('GiftGuide_BottomNav_W_M','');">men</a></li>
<li><a href="/browse/category.do?cid=1093891#department=48" onclick="wcd_addTracking('GiftGuide_BottomNav_W_G','');">girls</a></li>
<li><a href="/browse/category.do?cid=1093886#department=16" onclick="wcd_addTracking('GiftGuide_BottomNav_W_B','');">boys</a></li>
<li><a href="/browse/category.do?cid=1086184#department=165" onclick="wcd_addTracking('GiftGuide_BottomNav_W_TG','');">toddler girl</a></li>
<li><a href="/browse/category.do?cid=1086185#department=165" onclick="wcd_addTracking('GiftGuide_BottomNav_W_TB','');">toddler boy</a></li>
<li><a href="/browse/category.do?cid=1087979#department=166" onclick="wcd_addTracking('GiftGuide_BottomNav_W_BabyGirl','');">baby girl</a></li>
<li><a href="/browse/category.do?cid=1087981#department=166" onclick="wcd_addTracking('GiftGuide_BottomNav_W_BabyBoy','');">baby boy</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
// Gift Card Guide dynamic Menu CTA
// Launch Date 11/1/2017
// Author: Avishai Taashur, WCD
function loopThroughCTAGiftShop(prefixName){
var giftCTA = jQuery('.giftShopGlobalBottomNav .CTAmenu--fall17 .CTAdropdownList li > a');
jQuery(giftCTA).each(function(event, name) {
var onKlickName = name.attributes.onclick.nodeValue;
var replcInfoTid = onKlickName.replace('_W_', prefixName);
jQuery(this).attr('onclick', replcInfoTid);
});
}
var divisionCIDBottomNav = gidLib.getQuerystringParam('cid');
function wcdUpdateCTAGiftGuide(divisionName){
// get current division
var division = divisionName;
switch (division) {
case '1093820':
loopThroughCTAGiftShop('_W_');
break;
case '1093833':
loopThroughCTAGiftShop('_Body_');
break;
case '1093935':
loopThroughCTAGiftShop('_GapFit_');
break;
case '1093921':
loopThroughCTAGiftShop('_Mat_');
break;
case '1093838':
loopThroughCTAGiftShop('_M_');
break;
case '1093891':
loopThroughCTAGiftShop('_G_');
break;
case '1093886':
loopThroughCTAGiftShop('_B_');
break;
case '1086184':
loopThroughCTAGiftShop('_TG_');
break;
case '1086185':
loopThroughCTAGiftShop('_TB_');
break;
case '1087979':
loopThroughCTAGiftShop('_BabyGirl_');
break;
case '1087981':
loopThroughCTAGiftShop('_BabyBoy_');
break;
}
}
jQuery(document).on("ready", function() {
wcdUpdateCTAGiftGuide(divisionCIDBottomNav);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment