5

I have added js script in my footer.phtml to display scrolling onhover for long drop down list, but alignment of the navigation bar is not proper.. I want it to display below main category with proper alignment please guide me script which is responsive

if i give position:absolute then dropdown will align properly but the categories will overlap

onhover of main category

below is the script for hover on long dropdown

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

    jQuery(".nav-primary > li").hover(function() { 

         var jQuerycontainer = jQuery(this),
             jQuerylist = jQuerycontainer.find("ul"),
             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")
            });

        // 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({ top: 100 })
            .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>

enter image description here

1 Answer 1

1

change the topmenu.phtml add these

<nav id="nav">
        <ol class="dropdown">
            <?php echo $_menu ?>
        </ol>
    </nav>

add below in footer.phtml and see the output and also style as you required i made changes in style.

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

        jQuery(".dropdown > li").hover(function() { 

             var jQuerycontainer = jQuery(this),
                 jQuerylist = jQuerycontainer.find("ul"),
                 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")
                });

            // 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");

        })});

        //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: relative;
        width: 100%;
    }
    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: 2000;
    }
    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: 180px;
        z-index: 1000;
    }
    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;
    }

    </style>
11
  • Thank u but it is taking space below,, it has to just overlap on underlying content.. hw to edit for this
    – rashmi sm
    Sep 29, 2015 at 9:47
  • did you update the css and js too as i mention? Sep 29, 2015 at 9:49
  • add position:'absolute', after in js paddingTop: jQuerycontainer.data("origHeight"), Sep 29, 2015 at 9:54
  • yes... css is in style tag and js in script tag which i have put in footer.phtml as u have mentioned above,, and changes done in topmenu.phtml,, any extra changes i need to do??
    – rashmi sm
    Sep 29, 2015 at 9:56
  • i think below banner is doing problem. make the banner container position relative. Sep 29, 2015 at 9:57

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.