8

I have long drop down list of subcategory which also includes third level subcategory. i have added using css tricks reference: https://css-tricks.com/long-dropdowns-solution/ now im unable to display third level category... it has to display side of subcategory. provide me proper guidelines

enter image description here

1 Answer 1

2

for third level

        <script>
var maxHeight = 300;
var maxwidth
jQuery.noConflict();
jQuery(function(){

jQuery("li.level0").hover(function() {

var jQuerycontainer = jQuery(this),
jQuerylist = jQuerycontainer.find("ul.level0"),
jQueryanchor = jQuerycontainer.find("a"),
height = jQuerylist.height() * 1.1, // make sure there is enough room at the bottom
multiplier = height / maxHeight; // needs to move faster if list is taller

// need to save height here so it can revert on mouseout
jQuerycontainer.data("origHeight", jQuerycontainer.height());

// so it can retain it's rollover color all the while the dropdown is open
jQueryanchor.addClass("hover");

// make sure dropdown appears directly below parent list item
jQuerylist
.show()
.css({

paddingTop: jQuerycontainer.data("origHeight"),
position:'absolute',
});

// don't do any animation if list shorter than max
if (multiplier > 1) {
jQuerycontainer
.css({
height: maxHeight,
overflow: "hidden",



})
.mousemove(function(e) {
var offset = jQuerycontainer.offset();
var relativeY = ((e.pageY - offset.top) * multiplier) - (jQuerycontainer.data("origHeight") * multiplier);
if (relativeY > jQuerycontainer.data("origHeight")) {
jQuerylist.css("top", -relativeY +jQuerycontainer.data("origHeight"));
};
});
}

}, function() {

var jQueryel = jQuery(this);

// put things back to normal
jQueryel
.height(jQuery(this).data("origHeight"))
.find("ul")
.css({ })
.hide()
.end()
.find("a")
.removeClass("hover");

})});
jQuery (function() {
jQuery("li.level1").hover(function() {

var jQuerycontainer = jQuery(this),
jQuerylist = jQuerycontainer.find("ul.level1"),
jQueryanchor = jQuerycontainer.find("a"),
height = jQuerylist.height() * 1.1, // make sure there is enough room at the bottom

multiplier = height / maxHeight; // needs to move faster if list is taller

// need to save height here so it can revert on mouseout
jQuerycontainer.data("origHeight", jQuerycontainer.height());

// so it can retain it's rollover color all the while the dropdown is open
jQueryanchor.addClass("hover");

// make sure dropdown appears directly below parent list item
jQuerylist
.show()
.css({

//paddingTop: jQuerycontainer.data("origHeight"),
position:'relative',
clear:'both',
});

// don't do any animation if list shorter than max


}, function() {
var jQueryel = jQuery(this);

// put things back to normal
// jQueryel
// .height(jQuery(this).data("origHeight"))
// .find("ul")
// .css({ })
// .hide()
// .end()
// .find("a")
// .removeClass("hover");

})});

//Add down arrow only to menu items with submenus
// jQuery(".nav-primary > li:has('ul')").each(function() {
// jQuery(this).find("a:first").append("<img src='images/down-arrow.png' />");
// });
</script>
<style type="text/css">
ol.dropdown {
position: absolute;
width: 100%;
height: 60px;
}
ol.dropdown li {
background: none repeat scroll 0 0 #ccc;
float: left;
font-weight: bold;
position: relative;
width: 180px;
}
ol.dropdown a:hover {
color: #000;
}
ol.dropdown li a {
color: #222;
display: block;
padding: 20px 8px;
position: relative;
z-index: 904;
}
ol.dropdown li a:hover, ol.dropdown li a.hover {
background: none repeat scroll 0 0 #f3d673;
position: relative;
}
ol.dropdown ul {

display: none;
left: 0;
position: absolute;
top: 0;
width: 100px;
z-index: 902;
}
ol.dropdown ul li {
background: none repeat scroll 0 0 #f6f6f6;
border-bottom: 1px solid #ccc;
color: #000;
font-weight: normal;
}
ol.dropdown ul li a {
background: none repeat scroll 0 0 #eee !important;
display: block;
}
ol.dropdown ul li a:hover {
background: none repeat scroll 0 0 #f3d673 !important;
display: block;
}
ol.dropdown ul li ul {

display: none;
left: 10px;
background-color: #ffc;
/*right: 0;*/



width: 160px;
z-index: 903;
}
ol.dropdown ul li ul li {
background: none repeat scroll 0 0 #f6f6f6;
border-bottom: 1px solid #ffc;
color: #000;
font-weight: normal;
}
ol.dropdown ul li ul li a {
background: none repeat scroll 0 0 #eee !important;
display: block;
}
ol.dropdown ul li ul li a:hover {
background: none repeat scroll 0 0 #f3d673 !important;
display: block;
}

</style>

enter image description here

23
  • have you add the css and js function Commented Sep 29, 2015 at 13:01
  • as above u sent its added in footer.phtml,, anywhere extra we need to add
    – rashmi sm
    Commented Sep 29, 2015 at 13:02
  • no it working on my side.. Commented Sep 29, 2015 at 13:04
  • no just added the third level categories and put css and function for that it is working check what are you missing try to alert in second js function it is working or check your html hierarchy Commented Sep 29, 2015 at 13:06
  • no changes is reflecting.. i tried all possibilty
    – rashmi sm
    Commented Sep 30, 2015 at 4:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.