Hiding Certain Brochure Pages in Mega Menu

[jeffnurse]

I had previously used the AUG tip which allowed us to choose which brochure pages we showed in the side menus. I had set the variable etc and all worked fine.

Since upgrading to Swift ( I believe) we now we have brochure pages showing in the information section on the Mega Menu, which I like, however I can't work out how and where to place the variable now to allow this same system to work with Swift. I'd like to prevent some brochure pages from showing, as before. Any help or advice appreciated.

Thanks
Jeff

[John Ennals]

The brochure page link layout(s) should be in Design Library | Brochure Page Links

John

[jeffnurse]

Thanks for the response John. I looked at the library, tried applying the fix but couldn't get it working. I looked at different brochure lists but I'm not clear which list I should use/modify? It's the Mega Menu brochure list that I am trying to control.
Jeff

[graphicz]

Assuming your variable is 'ShowInMenu' - as per this image:



Here is the default Brochure Menu bit from the Swift Mega Menu Layout:

<!-- Brochure Menu - Start -->
<actinic:block if="%3cactinic%3avariable%20name%3d%22Wiz5%5fBrochureList%22%20%2f%3e%20%3d%3d%20%22Main%20Menu%20Bar%22" >
<actinic:block php="true">
$brochureDropdown = <<<HEREDOCBROCHURE
<li class="overeight"><a id="main-link-brochure" href="javascript:undefined;"><actinic:variable name="BrochurePageMenuText" /></a>
<div class="megamenu clearfix" id="tc99" style="display:block;">
<actinic:block type="BrochurePagesList" >

<ul class="col-md-6 col-12 link-list">
<li><a class="dropheading title" href="<actinic:variable name="BrochurePageURL" />" ><actinic:variable name="BrochureName" /></a></li>
</ul>

</actinic:block>
</div></li>
<li class="undereight"><a role="button" data-toggle="collapse" data-target="#MegamenuBrochure" href="javascript:undefined;">
<actinic:variable name="BrochurePageMenuText" /> <img src="rightArrowWhite.png" alt="" /></a>
<div class="collapse" id="MegamenuBrochure">
<actinic:block type="BrochurePagesList" >

<ul> <li><a href="<actinic:variable name="BrochurePageURL" />" ><actinic:variable name="BrochureName" /></a></li></ul>
</actinic:block>

</div>
</li>
<style>
@media (min-width:768px) {
.overeight {}
.undereight {display:none!Important;}
}
@media (max-width:767px) {
.overeight {display:none!Important;}
.undereight {}
#mega-menu li.undereight a {color:#fff;}
#mega-menu li.undereight a:hover {color:#f2f2f2;}
}
</style>
HEREDOCBROCHURE;
echo $brochureDropdown;
</actinic:block>
</actinic:block>
<!-- Brochure Menu - End -->

And here is my edited version:

<!-- Brochure Menu - Start -->
<actinic:block if="%3cactinic%3avariable%20name%3d%22Wiz5%5fBrochureList%22%20%2f%3e%20%3d%3d%20%22Main%20Menu%20Bar%22" >
<actinic:block php="true">
$brochureDropdown = <<<HEREDOCBROCHURE
<li class="overeight"><a id="main-link-brochure" href="javascript:undefined;"><actinic:variable name="BrochurePageMenuText" /></a>
<div class="megamenu clearfix" id="tc99" style="display:block;">
<actinic:block type="BrochurePagesList" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22ShowInMenu%22%20%2f%3e">
<ul class="col-md-6 col-12 link-list">
<li><a class="dropheading title" href="<actinic:variable name="BrochurePageURL" />" ><actinic:variable name="BrochureName" /></a></li>
</ul>
</actinic:block>
</actinic:block>
</div></li>
<li class="undereight"><a role="button" data-toggle="collapse" data-target="#MegamenuBrochure" href="javascript:undefined;">
<actinic:variable name="BrochurePageMenuText" /> &nbsp;<i class="fa fa-angle-right"></i></a>
<div class="collapse" id="MegamenuBrochure">
<actinic:block type="BrochurePagesList" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22ShowInMenu%22%20%2f%3e">
<ul> <li><a href="<actinic:variable name="BrochurePageURL" />" ><actinic:variable name="BrochureName" /></a></li></ul>
</actinic:block>
</actinic:block>
</div>
</li>
<style>
@media (min-width:768px) {
.overeight {}
.undereight {display:none!Important;}
}
@media (max-width:767px) {
.overeight {display:none!Important;}
.undereight {}
#mega-menu li.undereight a {color:#fff;}
#mega-menu li.undereight a:hover {color:#f2f2f2;}
}
</style>
HEREDOCBROCHURE;
echo $brochureDropdown;
</actinic:block>
</actinic:block>
<!-- Brochure Menu - End -->

The key bit is around line 19 plus repeated in the mobile version:

 <actinic:block if="%3cactinic%3avariable%20name%3d%22ShowInMenu%22%20%2f%3e">
<ul> <li><a href="<actinic:variable name="BrochurePageURL" />" ><actinic:variable name="BrochureName" /></a></li></ul>
</actinic:block>

I have also swapped the arrow images for Font Awesome (just add <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> to the head)

It is easier to see in a sellerdeck layout. I have a layout type called 'Jottings' and I create blank layouts and paste stuff to see what it looks like with SD formatting. It is just visually easier.

Best wishes

[jeffnurse]

Hi Jonathan,

Thank you for posting this solution, and in such detail. It is exactly what I needed, and works as intended, thank you. Does the code take care of the mobile version too or do I have to deal with that separately?

Also, I am unsure what you mean by this.. or what it is intended to achieve? I tried it and uploaded but didn't notice anything different.

I have also swapped the arrow images for Font Awesome (just add <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> to the head)

It is easier to see in a sellerdeck layout. I have a layout type called 'Jottings' and I create blank layouts and paste stuff to see what it looks like with SD formatting. It is just visually easier.

Kind regards
Jeff

[graphicz]

<actinic:block if="%3cactinic%3avariable%20name%3d%22ShowInMenu%22%20%2f%3e"> appears twice, once in the overeight bit (min-width:768px) and once in the undereight bit (max-width:767px).

See it here: https://www.graphicz.co.uk/sellerdec...tv2/index.html

All the Font Awesome icons are included in one font file, so it only takes a single HTTP request to load Font Awesome. This is great for performance. Here is more about Font Awesome than you can shake a stick at. The last one is a WordPress resource but widely applicable and relevant.

https://www.w3schools.com/icons/font...cons_intro.asp
https://www.w3schools.com/icons/font...ons_webapp.asp
https://www.w3schools.com/icons/font...icons_text.asp
https://fontawesome.com/v4/
https://wpengine.com/resources/why-y...-font-awesome/

[jeffnurse]

Thanks Jonathan,
The hiding brochure fixing tip works perfectly thank you. The font bit is a bit above my knowledge level for now, but I'll read and learn.
Cheers and best wishes for 2024