Last night I created a flyout menu for my website. I thought it would be a good idea to share it with the community. This menu is based on the free plugin extension "Nop Categories Header Menu" already available from https://www.nop-templates.com/. I am using the 2.3 version. I have not tested it for other versions but I don't think there will be much difference.
If you want a header drop down then the "Nop Categories Header Menu" is good to go out of the box but I wanted a flyout menu from the left categories column.
PLEASE NOTE: The current CSS has been written for showing three levels of menus, although it can be extended to accomodate virtually any depth level.
1) Download the plugin from http://www.nop-templates.com/p/11/nop-categories-header-menu and install as per the help document.
2) DO NOT follow the steps for integrating the plugin automatically. We will be doing it manually.
3) After installing go to Presentation\Nop.Web\Views\Catalog and open the file CategoryNavigation.cshtml. Comment out everything under the "listbox" div(in italics below) and paste
@Html.Action("CategoriesHeaderMenu", "CategoriesHeaderMenu") (in bold below) anywhere in the div . The final code between the <div class="listbox"></div>
should look like:
@*<ul>
@foreach (var category in Model)
{
<li class="@(category.IsActive ? "active" : "inactive")"
@if (category.NumberOfParentCategories > 0)
{
//TODO we hard-coded 'margin-left'. But we should set 'margin-right' for RTL languages
if (this.ShouldUseRtlTheme())
{
<text>style="margin-right: @(category.NumberOfParentCategories * categoryPadding)px"</text>
}
else
{
<text>style="margin-left: @(category.NumberOfParentCategories * categoryPadding)px"</text>
}
}
><a href="@Url.RouteUrl("Category", new { categoryId = category.Id, SeName = category.SeName })">@category.Name
@if (category.DisplayNumberOfProducts)
{
<text> (@(category.NumberOfProducts))</text>
}
</a></li>
}
</ul>*@
@Html.Action("CategoriesHeaderMenu", "CategoriesHeaderMenu")
4) Now go to Presentation\Nop.Web\Plugins\SevenSpikes.Nop.Plugins.CategoriesHeaderMenu\Styles and open the CSS file "jquery.superfishmenu.css" in your choice of editor. Delete everything present there and paste the following CSS in the file:
.categoriesHeaderMenu, .categoriesHeaderMenu *
{
margin: 0;
padding: 0;
background-color:#404040;
text-transform: uppercase;
text-decoration: none;
font-weight:bold;
font-size:small;
}
.categoriesHeaderMenu ul li
{
position:relative;
}
.categoriesHeaderMenu ul li ul {
display: none;
}
.categoriesHeaderMenu ul li a
{
display:block;
width: 160px;
color: #FFFFFF;
}
.categoriesHeaderMenu ul li:hover ul
{
display:block; position: absolute; top:-5px;
left:160px;
padding:5px 10px 10px;
}
.categoriesHeaderMenu ul li:hover a
{
display:block; color:#f93; font-style:italic;
}
.categoriesHeaderMenu ul li:hover ul li a:hover { color:#f93;font-style:italic;}
.categoriesHeaderMenu ul li:hover ul li a
{
display:block;
width: 150px;
list-style: none;
color: #FFFFFF;
padding:1px;
font-style:normal;
}
.categoriesHeaderMenu ul li:hover ul li:hover a
{
color:#f93; font-style:italic;
}
.categoriesHeaderMenu ul li:hover ul li a:hover
{
color:#f93;
}
.categoriesHeaderMenu ul li:hover ul li:hover ul li a
{
display:block;
width: 150px;
color: #FFFFFF;
font-style:normal;
}
.categoriesHeaderMenu ul li:hover ul li:hover ul li a:hover
{
color:#f93; font-style:italic;
}
.categoriesHeaderMenu ul li:hover ul li ul
{
display: none;
}
.categoriesHeaderMenu ul li:hover ul li:hover ul
{
display:block; position: absolute; top:-5px;
left:150px; padding:5px 10px 10px;
}
I have kept the default Dark Orange theme look and feel and added a few animations on top of that. You can change the colors and background to suit your needs.
5) I have also made the following changes in the styles.css file for a consistent look and feel on all the listboxes on the left and right sidebars.
.block{margin:0 0 5px;padding:0 0 5px;color:#FFF;}
.block .title{ font-size:16px;font-weight:700;text-transform:uppercase;padding:5px 10px;color:#f93;background:#333 url(images/bg_sidebar_title.gif) no-repeat; text-align:center;}
.block .listbox{font-size:small;padding:5px 10px 10px;line-height:18px;background:#404040 url(images/bg_sidebar_block.gif) no-repeat left bottom;margin:0;}
.block .listbox ul{margin:0;padding:1px; color:#3664A5;background-color:inherit;}
.block .listbox ul li{ border-bottom: 1px ridge #ccc;}
.block a{color:#FFF;font-weight:700;text-decoration:none;padding:1px;}
.block a:hover{color:#f93; text-decoration:blink; font-style:italic;}
Please compare with the original styles.css file and make or omit the changes that you want.
After this the end flyout should look like:
http://www.imgplace.com/viewimg851/9022/27flyoutexample.jpg
The CSS and code changes are open for comments. Feel free to suggest any improvements :-)
Special thanks to the developers at http://www.nop-templates.com for making this a free plugin.
