2 kolone u drop-down meniju (top navigacija)



  • Imam problem da napravim 2 kolone u za drop down meniju sa top navigacije. Dakle da se razumemo nisam dev. radim content/SMM za klijenta, svi sajtovi su mu u wp, pa rekoh ajd’ da probam posto polako ulazim u osnove css, pa ovo dodje kao zgodna vezba, a i kapriam da jos ineko moze da ima ovakav problem.
    Dakle u drop downu postoje 40-tak stranica (http://ca-contractorlicense.com/ ->CLASSIFICATION) i ideja je da se to vidi u 2 kolone , jer ovako evidentno nema smisla. Dakle treba da je kao na http://www.contractorsintelligence.com/ takodje ->Classification)
    Probao sam sa forom sa http://www.prowebdesign.ro/wordpress-sub-menu-items-split-in-2-columns-the-easy-way/:
    .sub-menu-columns ul.sub-menu li {
    display: inline-block;
    float: left;
    width: 200px;
    }
    .sub-menu-columns ul.sub-menu li:nth-child(odd) {
    float: left;
    margin-right: 10px;
    }
    .sub-menu-columns ul.sub-menu li:nth-child(even) {
    float: right;
    }
    Ucinilo mi se najjednostavnije i najlogicnije, ali iz nekog razloga ne radi.
    Predlozi , ideje, neko drugo resenje?



  • originalni css (bez promena koje sa probao) >>>
    https://gist.github.com/anonymous/7e589d8414f6096ab298



  • .menu > li > .sub-menu {
    width: 700px !important;
    }
    .menu > li > .sub-menu > li{
    width:25%;
    height: 100px
    }

    Instinct is a lie, told by a fearful body, hoping to be wrong.

    0


  • @ETFovac ?
    taj deo je ok , ali i dalje mi ne pravi dve kolone, samo mi povecava mesto za sub-menu



  • Dodaj ovo u CSS:

    .menu-menu1-container #menu-menu1 li a {
    font-size: 14px;
    padding: 0 10px;
    }
    .menu-menu1-container #menu-menu1 {
    position: relative;
    }
    .menu-menu1-container #menu-menu1 li#menu-item-64 {
    position: static;
    }
    .menu-menu1-container #menu-menu1 li#menu-item-64 ul {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
    width: 100%;
    }
    .menu-menu1-container #menu-menu1 li#menu-item-64 ul li {
    display: block;
    float: none;
    width: auto;
    }
    .menu-menu1-container #menu-menu1 li#menu-item-64 ul li a {
    white-space: nowrap;
    }

    malo sam ti smanjio font u meniju jer ti je poslednja stavka “ispadala” u novi red. Ono sto ti treba je “column-count” i " white-space"…



  • RISPEKT!


Log in to reply