come aggiungere lo scorrimento al passaggio del mouse per il menu a discesa senza barra di scorrimento


8

Ho un elenco a discesa molto lungo ,,,, lo voglio con lo scorrimento al passaggio del mouse, ma senza barra di scorrimento per favore guidami quali cambiamenti devo fare ......

inserisci qui la descrizione dell'immagine

Risposte:


1

cambia il topmenu.phtml aggiungi questi. ha funzionato con due livelli.

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

aggiungi qui sotto footer.phtmle vedi l'output e anche lo stile come richiesto Ho apportato modifiche allo stile.

 <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>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.