Just nu i M3-nätverket
Gå till innehåll

Dropdown meny, vertikal eller horisontell


Admini

Rekommendera Poster

Hej
Jag försöker göra en dropdown meny, fast med skillnaden att, istället för att submenyn radas upp (ner?) efter varandra "vertikalt", så kan jag rada upp dem horisontellt efter en bredd som är lika med huvudmenyns bredd och dem ska synas under huvudmenyn.

Jag vet inte om jag har kunnat förklara det tillräckligt förståeligt. Fråga mig i så fall!

Det gick inte att ladda upp en bild, men här kommer en länk med liknande menysystem som jag vill ha
http://www.vega-direkt.se/

Tack på förhand

Länk till kommentar
Dela på andra webbplatser

ser man till att li floatar och att ul inte har en fast höjd så fungerar det som beskrivet.

 

Undermenyn ska ha position:absolute och ha en bredd som sidans bredd.

Länk till kommentar
Dela på andra webbplatser

ser man till att li floatar och att ul inte har en fast höjd så fungerar det som beskrivet.

 

Undermenyn ska ha position:absolute och ha en bredd som sidans bredd.

 

Jag hittade den här fina menyn här:

http://tympanus.net/codrops/2013/03/05/horizontal-drop-down-menu/

 

som funkar jätte bra.

Jag fick bara ändra onClick till onMouseOver under inställningarna

Tack ändå

Länk till kommentar
Dela på andra webbplatser

använd hellre css. li:hover

 

Du menar "hover" istället för "onMouseOver" ?

Jag provade och det gick inte.

Här är koden:

var cbpHorizontalMenu=(function(){var b=$("#cbp-hrmenu > ul > li"),g=b.children("a"),c=$("body"),d=-1;function f(){g.on("mouseover",a);b.on("mouseover",function(h){h.stopPropagation()})}function a(j){if(d!==-1){b.eq(d).removeClass("cbp-hropen")}var i=$(j.currentTarget).parent("li"),h=i.index();if(d===h){i.removeClass("cbp-hropen");d=-1}else{i.addClass("cbp-hropen");d=h;c.off("mouseover").on("mouseover",e)}return false}function e(h){b.eq(d).removeClass("cbp-hropen");d=-1}return{init:f}})();
Länk till kommentar
Dela på andra webbplatser

 

Du menar "hover" istället för "onMouseOver" ?

Jag provade och det gick inte.

Här är koden:

var cbpHorizontalMenu=(function(){var b=$("#cbp-hrmenu > ul > li"),g=b.children("a"),c=$("body"),d=-1;function f(){g.on("mouseover",a);b.on("mouseover",function(h){h.stopPropagation()})}function a(j){if(d!==-1){b.eq(d).removeClass("cbp-hropen")}var i=$(j.currentTarget).parent("li"),h=i.index();if(d===h){i.removeClass("cbp-hropen");d=-1}else{i.addClass("cbp-hropen");d=h;c.off("mouseover").on("mouseover",e)}return false}function e(h){b.eq(d).removeClass("cbp-hropen");d=-1}return{init:f}})();

 

Skit, det funkar inte i IE. Vad göra?

Länk till kommentar
Dela på andra webbplatser

jag hade haft css som en primärlösning och en polyfill för ie7 som inte stödjer :hover på andra element än a-taggen.

 

en ren css-lösning alltså:

#nav > li > ul {display:none}
#nav > li:hover > ul {display:block}
Länk till kommentar
Dela på andra webbplatser

 

jag hade haft css som en primärlösning och en polyfill för ie7 som inte stödjer :hover på andra element än a-taggen.

 

en ren css-lösning alltså:

#nav > li > ul {display:none}
#nav > li:hover > ul {display:block}

Jag har hämtat en annan meny från följande länk:

http://cssmenumaker.com/menu/jquery-accordion-menu

 

Den funkar när den är utan innehåll, men när jag kopplar in databas för att fylla den med innehåll, då funkar den inte som den ska.

Jag kan klicka på en huvudmeny och den öppnar submenyn (som det ska) men den laddar inte om sidan som det är tänkt.

Jag skickar med variabler för att få den att bete sig som jag vill. Jag ser i statusraden (längst ner) att variabler kommer att skickas med. Men det sker ingen laddning av sidan.

Om jag klickar på en submeny så laddar den om sidan, men då ändrar menyn sitt utseende också, vilket inte är meningen.

Snälla jag kört fast och behöver hjälp nu!

Tack

Länk till kommentar
Dela på andra webbplatser

Hej

Jag har en horisontell meny som funkar perfekt, men nu vill jag ha den i vertikal utförande.

Jag vet att jag måste ändra (display: inline) till (display:block;), men när jag gör det så rasar hela bygget.

Här är CSS:n

 

.cbp-hrmenu {
    width: 100%;
    margin-top: 0em;
    /*border-bottom: 2px solid #ff0000;    /* Red line color  */
}

/* general ul style */
.cbp-hrmenu ul {
    margin: 10;
    padding: 0;
    list-style-type: none;
}

/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
    width: 100%;
    max-width: 90em;
    margin: 0em;
    padding: 0em;
}

.cbp-hrmenu > ul > li {
    display: inline-block;
    margin: 2px -1px;
    padding:0px;
}

.cbp-hrmenu > ul > li > a {
    font-weight: 700;
    padding: 1em 2em;        /*  Huvudmeny */
    color: #555;
    display: inline-block;
    background:#d0d0d0;

}

.cbp-hrmenu > ul > li > a:hover {
    color: #ffffff;        /* background color  */
}

.cbp-hrmenu > ul > li.cbp-hropen a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
    color: #606060;            /* submeny color  */
}

/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
    display: none;
    position: absolute;
    background: #ffffff;    /* Background color of the whole subarea */
    width: 120%;
    padding: 1em;
    
    left: 0%;
    
/*    border-top: 2px solid #ff0000;    /* Red line color  */
}

.cbp-hropen .cbp-hrsub {
    display: block;
    padding-bottom: 0em;
}

.cbp-hrmenu .cbp-hrsub-inner > div {
    width: 15%;
    float: left;
    padding:  0 0 1em 0em ;     /*  Hela submenyn (burken) */
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
    content: " ";
    display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
    clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner > div a {
    line-height: 1em;
}

.cbp-hrsub h4 {
    color: #339900;            /* kategori color */
    padding: 0.5em 0 0.6em;    /* kategori Luft runtom */
    margin: 0;
    font-size: 160%;        /* Kategori storlek */
    font-weight: 300;
}

/* Examples for media queries */

@media screen and (max-width: 52.75em) {

    .cbp-hrmenu {
        font-size: 80%;
    }

}

@media screen and (max-width: 43em) {

    .cbp-hrmenu {
        font-size: 120%;
        border: none;
    }

    .cbp-hrmenu > ul,
    .cbp-hrmenu .cbp-hrsub-inner {
        width: 100%;
        padding: 0;
    }

    .cbp-hrmenu .cbp-hrsub-inner {
        padding: 0 2em;
        font-size: 75%;
    }

    .cbp-hrmenu > ul > li {
        display: block;
        border-bottom: 4px solid #d0d0d0;
    }

    .cbp-hrmenu > ul > li > a {
        display: block;
        padding: 1em 3em;
    }

    .cbp-hrmenu .cbp-hrsub {
        position: relative;
    }

    .cbp-hrsub h4 {
        padding-top: 0.6em;
    }

}

@media screen and (max-width: 36em) {
    .cbp-hrmenu .cbp-hrsub-inner > div {
        width: 100%;
        float: left;
        padding: 0 2em;
    }
}
 

 

Och kommer HTML:n

 

<div style="position:relative;display:block; left:0px; z-index:10;">
    <div class="main">
        <nav id="cbp-hrmenu" class="cbp-hrmenu">
            <ul>                    
                <li><a href="#">Produkter</a>
                    <div class="cbp-hrsub">
                        <div class="cbp-hrsub-inner">                                     
                            <div>
                                <h4><a href="">produkt_1</a></h4>                                        
                                <ul>                                            
                                    <li>        
                                    <div><a href="#">Produkt_1_1</div></a>        
                                    </li>                                            
                                    <li>        
                                    <div><a href="#">Produkt_1_2 </div></a>        
                                    </li>                                                                                
                                </ul>
                            </div>                                    
                            <div>
                                <h4><a href="">Produkt_2</a></h4>                                        
                                <ul>                                            
                                    <li>        
                                    <div><a href="#">Produkt_2_1 </div></a>        
                                    </li>                        
                                    <li>        
                                    <div><a href="#">Produkt_2_2 </div></a>        
                                    </li>
                                </ul>
                            </div>
                        </div><!-- /cbp-hrsub-inner -->
                    </div><!-- /cbp-hrsub -->
                </li>
            
                <li><a href="#">Kampanjer</a>
                    <div class="cbp-hrsub">
                        <div class="cbp-hrsub-inner">
                        </div>
                    </div>
                </li>
                <li><a href="#">Kontakt</a>
                    <div class="cbp-hrsub">
                        <div class="cbp-hrsub-inner">
                        </div><!-- /cbp-hrsub-inner -->
                    </div><!-- /cbp-hrsub -->
                </li>
            </ul>
        </nav>
    </div>
</div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="js/cbpHorizontalMenu.min.js"></script>
        <script>
            $(function() {
                cbpHorizontalMenu.init();
            });
        </script>

Vad har jag missat?

Tack på förhand!

Jag är desperaaat, snälla hjälp

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...