[megoldva] Wordpress menü darabolás

Web, mail, IRC, IM, hálózatok

Az lenne a feladatom, hogy egy Wordpress oldalon úgy oldjam meg a menü (felső sorban történő) megjelenítését, hogy a logo középen ossza ketté a menüt. Azaz a logótól balra is, jobbra is látsszanak a menüpontok – számítógépen. Telefonon persze szépen "rejtésből" jöjjenek elő, ahogy az egy adaptív oldalhoz illik. Hogyan indulnátok el?

(Én azt tettem, hogy készítettem két menüt, de ez a telefonon nem jó, mert mindkét "rejtésből" ugyanaz akar előjönni.)
Szerk: Lett egy kamu (magyar és angol) menüpont, ami fölé odavarázsolom a logót, melyet a @media(max-width: 980px) részből eltüntetek (display:none).

  • 1582 megtekintés

( bacsi2 | 2018. 04. 15., v – 10:28 )

Menüpontok pozícionálása CSS-sel? Pont ott lesznek, ahová szeretnéd rakni.

"Telefonon persze szépen "rejtésből" jöjjenek elő, ahogy az egy adaptív oldalhoz illik. Hogyan indulnátok el?"

Utánaolvasnék. (Vagy megírnám 0-ról, vagy felraknék egy menu-plugint a sok közül.)

( maszogep | 2018. 04. 15., v – 10:58 )

Elmagyaráznám a megrendelőnek, hogy ez miért nem jó, és rábeszélném egy szimpla menüre. :DDDD

Viccen kívül: ez egmen is érdekel, mert hátha szembejön egy ilyen kérés. Így kapásból én is a css-ben kezdeném el megoldani szerintem.
---
Ó, hogy a hatalmas Kublaj kán üssön rajtad, és a házad népén!

( BlinTux v | 2018. 04. 15., v – 11:47 )

Akár a középső menüpont lehetne maga a logó, ami a főoldalra visz. Ennek adsz egy egyedi osztályt és megformázod CSS-ben ahogy kell.
Mobilon meg rejted.

( szz v | 2018. 04. 19., cs – 11:49 )

Még egy kérdés: ezt hogyan lehetne intelligensebben (rövidebben) megoldani?
A ".boxed .tg-container {width: 98%}" benne van már eredetileg is a @media részben a style.css-ben, és bizonytalan voltam abban, hogy el szabad-e hagynom a felülbíráló részben.

Az egyik (42-es) a magyar, a másik (48-as) az angol "kamu menüpont".

#menu-item-42.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-42 {
background-image: url("...logo.png");
padding-left: 11px;
padding-right: 13.6em;
color: #ffffff;
}

#menu-item-48.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-48 {
background-image: url("...logo.png");
padding-left: 11px;
padding-right: 13.6em;
color: #ffffff;
}

@media(max-width: 980px) {
.boxed .tg-container {
width: 98%;
}
#menu-item-42.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-42 {
display: none;
}
#menu-item-48.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-48 {
display: none;
}
}

Kezdetnek mondjuk összevonod az osztályokat.
És szerintem az összes osztályt sem kell felsorolni ami mind rajta van a menüpontokon, elég az ID-t: 

#menu-item-42,
#menu-item-48 {
    background-image: url("...logo.png");
    padding-left: 11px;
    padding-right: 13.6em;
    color: #ffffff;
}

@media(max-width: 980px) {
    .boxed .tg-container {
        width: 98%;
    }
    #menu-item-42,
    #menu-item-48 {
        display: none;
    }
}

Nincs mit!

Pfff, pedig az már olyan elavult mint állat.
Már 2 éve készült az új oldalam, ami mára már megint csak elavultnak számít, ezért pár hete belekezdtem megint egy újba, de félek, hogy az sem készül el soha :D
Sajna ilyen ez a szakma, évente több tucat oldalt megcsinálok másoknak, de valahogy az enyém mindig csak tolódik :)