Page 1 of 1
Drop Down Problems
Posted: Sun Jan 27, 2013 7:45 pm
by fibernut
Hello,
I seam to be having a problem adding drop down sub menus to my navigation bar using the methods in this thread
http://forum.broadleafcommerce.org/viewtopic.php?f=11&t=647.
I copied the code including the missing end tag and the update posted to stop null errors into my nav.html. I then just copied the CSS code into the start of styles.css.
When I view the site, the sub menu is displayed in a linear fashion parallel to the main nav bar once I click on the parent category.
I am guessing this has to do with my CSS. Am I placing the CSS code in the right place or should it go under a certain class and is everything else I am doing okay.
I am using broadleaf commerce version 2.0.2 and I have made no other changes to the demo site.
Thanks
Re: Drop Down Problems
Posted: Tue Jan 29, 2013 4:29 pm
by fibernut
Anyone, this is quite an annoying problem. After further looking it appears that css classes are not applied to the sub menu. Where exactly in the styles.css am I to place the CSS code?
Re: Drop Down Problems
Posted: Wed Jan 30, 2013 11:28 am
by fibernut
A polite bump.
Re: Drop Down Problems
Posted: Wed Jan 30, 2013 12:33 pm
by fibernut
This is what my nav.html looks like:
Code: Select all
<nav>
<div th:remove="all">
<!--
This template displays the navigation of the site by looking up the category named "Nav"
and building a list of the categories sub-categories.
-->
</div>
<blc:categories resultVar="navCategories" parentCategory="Primary Nav" maxResults="6" />
<ul>
<li th:each="category : ${navCategories}">
<a class="home" th:href="@{${category.url}}" th:class="${categoryStat.first}? 'home'" th:text="${category.name}"></a>
</li>
<ul th:if="${#objects.nullSafe(category,default)}" class="sub-menu">
<li th:each="cat : ${category.getChildCategories()}">
<a th:text="${cat.name}" th:href="@{${cat.url}}" />
</li>
</ul>
</ul>
</nav>And this is the nav part of my styles.css
Code: Select all
nav {
width: 940px;
height: 70px;
margin: 0 20px;
border-bottom: double #C8C3C1;
}
nav ul {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
margin: 0;
padding: 0;
display: inline;
}
nav ul li a {
font: 16px/76px 'Open Sans', Helvetica, sans-serif;
font-weight: 600;
color: #342020;
padding: 25px 30px;
background: url('../img/nav-divider.png') top left no-repeat;
}
nav ul li a.home {
background: none;
}
nav ul li:hover .sub-menu { display: block; }
nav ul li ul.sub-menu {
position: absolute;
top: 181px;
list-style-type: none;
background: url(../img/canvas.jpg);
z-index: 99999;
display: none;
width: 253px;
}
nav ul li ul.sub-menu li {
display: block;
float: none;
}
nav ul li ul.sub-menu li:hover {
background-color: #A9C8CB;
-webkit-transition: background-color 0.1s ease-in;
-moz-transition: background-color 0.1s ease-in;
-o-transition: background-color 0.1s ease-in;
transition: background-color 0.1s ease-in;
}
nav ul li ul.sub-menu img {
z-index: 99999;
float: left;
width: 200px;
height: 200px;
}
nav ul li ul.sub-menu a {
font: 12px/35px 'ProximaNovaBold', Helvetica, sans-serif;
color: #342020;
padding: 10px;
background: none;
}
nav ul li a:link, nav ul li a:visited {
color: #342020;
text-decoration: none;
text-transform: uppercase;
}
nav ul li a:hover {
background-color: #E7E3E2;
-webkit-transition: background-color 0.2s ease-in;
-moz-transition: background-color 0.2s ease-in;
-o-transition: background-color 0.2s ease-in;
transition: background-color 0.2s ease-in;
}
And my sub menu is displayed like another parent nav below the default one.
Re: Drop Down Problems
Posted: Wed Jan 30, 2013 1:37 pm
by phillipuniverse
What browser?
Re: Drop Down Problems
Posted: Wed Jan 30, 2013 3:28 pm
by fibernut
I have tried using Google Chrome, Firefox and IE9. The same result every time.
I have attached an image of what I get.
- nav - Copy.gif (168.38 KiB) Viewed 19756 times
Re: Drop Down Problems
Posted: Fri Feb 01, 2013 11:43 am
by fibernut
Do you have any idea why this would be happening?
Re: Drop Down Problems
Posted: Tue Feb 05, 2013 4:53 pm
by fibernut
I believe I may have found the cause of this problem but I do not have a resolution.
Eclipse says "invalid location of tag "ul"" for the ul tag in the sub menu code ( In bold below)
<ul th:if="${#objects.nullSafe(category,default)}" class="sub-menu">
<li th:each="cat : ${category.getChildCategories()}">
<a th:text="${cat.name}" th:href="@{${cat.url}}" />
</li>
</ul>
I believe this is why the CSS sub-menu class is not getting applied to the submenu.
Could anyone offer a resolution for this probelm.
Code: Select all
<nav>
<div th:remove="all">
<!--
This template displays the navigation of the site by looking up the category named "Nav"
and building a list of the categories sub-categories.
-->
</div>
<blc:categories resultVar="navCategories" parentCategory="Primary Nav" maxResults="6" />
<ul>
<li th:each="category : ${navCategories}">
<a class="home" th:href="@{${category.url}}" th:class="${categoryStat.first}? 'home'" th:text="${category.name}"></a>
</li>
<ul th:if="${#objects.nullSafe(category,default)}" class="sub-menu">
<li th:each="cat : ${category.getChildCategories()}">
<a th:text="${cat.name}" th:href="@{${cat.url}}" />
</li>
</ul>
</ul>
</nav>
Re: Drop Down Problems
Posted: Wed Feb 06, 2013 9:57 am
by phillipuniverse
Try encapsulating the submenu within the li:
Code: Select all
<ul>
<li th:each="category : ${navCategories}">
<a class="home" th:href="@{${category.url}}" th:class="${categoryStat.first}? 'home'" th:text="${category.name}"></a>
<ul th:if="${#objects.nullSafe(category,default)}" class="sub-menu">
<li th:each="cat : ${category.getChildCategories()}">
<a th:text="${cat.name}" th:href="@{${cat.url}}" />
</li>
</ul>
</li>
</ul>
Re: Drop Down Problems
Posted: Wed Feb 06, 2013 12:26 pm
by fibernut
Thank you very much, it now works perfectly. I just have to get it working for secondary menus and it will be finished.